Logo
AppMake logo variants — full wordmark and icon-only, in dark and light mode.
Full Logo (Dark Background)
/logo-dark.svg · mix-blend-mode: screen · Text: #EBEDF2
Full Logo (Light Background)
/logo-light.svg · mix-blend-mode: multiply · Text: #1E2028
Icon Only
icon-dark.svg
icon-light.svg
favicon.svg (32px)
Logo Anatomy
The AppMake icon consists of four overlapping circles with blend modes:
Dark variant uses mix-blend-mode: screen, light variant uses mix-blend-mode: multiply. Wordmark set in DM Sans, 48px, weight 500, letter-spacing -2.
Colors
CSS custom properties used throughout the app. Shown in light and dark mode.
Theme Colors (CSS Variables)
Background
--background
Foreground
--foreground
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Destructive
--destructive
Border
--border
Card
--card
Popover
--popover
Input
--input
Ring
--ring
Chart Colors
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Dashboard Colors
Deep Purple
#1a0533
Dark Navy
#0a1628
Hot Pink
#ff1493
Deep Pink
#c2185b
Typography
Custom font system: Inter Tight (primary), Inter (body), Founders Grotesk X Condensed (display), Caveat (handwriting), Geist Mono (code).
Font Families
Inter Tight — Primary / Default (font-sans)
The quick brown fox jumps over the lazy dog
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Inter — Body text (font-body)
The quick brown fox jumps over the lazy dog
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Founders Grotesk X Condensed — Display headlines (font-display)
The quick brown fox
Caveat — Handwriting accents (font-hand)
The quick brown fox jumps over the lazy dog
Regular 400
Semibold 600
Bold 700
Geist Mono — Code / monospace (font-mono)
The quick brown fox jumps over the lazy dog
Font Usage Guide
| Class | Font | CSS Variable | Use Case |
|---|---|---|---|
| font-sans | Inter Tight | --font-sans | Default UI, headings, nav, buttons |
| font-body | Inter | --font-body | Long-form body text, paragraphs |
| font-display | Founders Grotesk X Condensed | --font-display | Hero headlines, large display text (uppercase) |
| font-hand | Caveat | --font-hand | Handwriting accents, annotations |
| font-mono | Geist Mono | --font-mono | Code, file paths, terminal |
Heading Sizes
Display
Heading 6XL
Heading 5XL
Heading 4XL
Heading 3XL
Heading 2XL
Heading XL
Heading LG
Body text — base size
Small text
Text Styles
Default foreground text (Inter Tight)
Muted foreground text
Body text in Inter (font-body)
Display text (font-display)
Handwritten accent (font-hand)
Inline code (font-mono)
Variants
Sizes
Icon Buttons
With Icons
States
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style of the button |
| size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Size of the button |
| asChild | boolean | false | Merge props onto child element instead of rendering a button |
Inputs
Text inputs, textareas, and the dashboard glassmorphism chat input.
Standard Input
Textarea
Dashboard Chat Input (Glassmorphism)
border-white/15 · bg-white/5 · backdrop-blur-md
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | Input type (text, password, email, etc.) |
| placeholder | string | — | Placeholder text |
| disabled | boolean | false | Disable the input |
Cards
Standard shadcn Card and dashboard glassmorphism project card.
Standard Card
This is the card content area. You can put any content here.
Dashboard Project Card (Glassmorphism)
Todo App
2h ago
Dashboard
2h ago
border-white/10 · bg-white/5 · backdrop-blur-sm
| Prop | Type | Default | Description |
|---|---|---|---|
| CardHeader | component | — | Contains title, description, and optional action |
| CardTitle | component | — | The card heading |
| CardDescription | component | — | Supporting text below the title |
| CardAction | component | — | Action slot in the header, auto-positioned top-right |
| CardContent | component | — | Main content area |
| CardFooter | component | — | Footer area with flex layout |
Avatars
Avatar with image fallback, initials, sizes, badges, and groups.
Sizes
sm
default
lg
With Image & Fallback
With Badge
Avatar Group
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "lg" | "default" | Avatar size (6/8/10) |
| AvatarImage | component | — | Image that auto-hides on error |
| AvatarFallback | component | — | Shown while image loads or on error |
| AvatarBadge | component | — | Small status indicator dot |
| AvatarGroup | component | — | Overlapping avatar stack |
Tabs
Tab components with default and line variants.
Default Variant
Account settings content goes here.
Line Variant
Recently viewed projects.
Dashboard ProjectTabs
| Prop | Type | Default | Description |
|---|---|---|---|
| variant (TabsList) | "default" | "line" | "default" | Visual style: pill background or underline indicator |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
| defaultValue | string | — | Initially active tab value |
Dropdown Menu
Context menus and dropdown actions.
Standard Dropdown
Workspace Dropdown (Dashboard Style)
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "center" | Alignment relative to trigger |
| sideOffset | number | 4 | Distance from the trigger |
| variant (item) | "default" | "destructive" | "default" | Visual style of menu item |
| inset | boolean | false | Add left padding for icon alignment |
Dashboard Components
Custom components used in the main dashboard.
MeshGradientBackground
CSS fallback shown — WebGL version uses @paper-design/shaders-react
Colors: #1a0533, #0a1628, #ff1493, #c2185b · Speed: 0.3 · Bottom fade overlay for smooth transition
TypingHeading
Props: name (string) · 40ms typing interval · Blinking cursor pulses when complete
DashboardChatInput
Rotating placeholders · Auto-resize textarea (max 160px) · Enter to submit, Shift+Enter for newline
ProjectTabs
3 tabs: Recently viewed, My projects, Templates · Grid: 2 cols → 3 → 4 · Time-ago formatting
Animations
Keyframe animations defined in globals.css.
shimmer
animation: shimmer 2s infinite
fadeInUp
animation: fadeInUp 500ms ease-out
bounce
animation: bounce 1.2s infinite (staggered 0.15s)
slideIn
animation: slideIn 300ms ease-out
logoPulse
animation: logoPulse 2s ease-in-out infinite
gradient-x
animation: gradient-x 3s ease infinite
| Animation | Keyframes | Use Case |
|---|---|---|
| shimmer | translateX(-100% → 100%) | Loading skeleton placeholders |
| gradient-x | background-position 0% → 100% → 0% | Animated gradient backgrounds |
| fadeInUp | opacity 0→1, translateY(6px→0) | Content entry animations |
| bounce | translateY(0→-4px→0) | Typing dots, attention indicators |
| slideIn | translateX(-100%→0) | Mobile sidebar entrance |
| logoPulse | scale(1→1.08→1), opacity(0.8→1→0.8) | Logo / loading indicator |