Figma file available
.webp)
Base44
Build App with AI in Minutes
No items found.
No items found.
Visual identity
Base44 Design System
Source & Stack
\- URL:
Typography \- Primary typeface: Madefor Text (Wix Madefor Text) \- Display style: Whisper-weight — weight 400 at large size; feels engraved rather than stamped \- Letter-spacing: 0.1em on body and nav text \- Weight rule: No bold (600+) or black weights for headlines; 400 is the display voice \- Font management: Via Theme panel Fonts tab; supports Google Fonts + Brand Fonts library
Color Philosophy \- Canvas: #faf9f7 — warm off-white (page background) \- Surface: #ffffff — white only for cards and elevated surfaces \- Accent: #ebffb1 — electric lime; the sole saturated color allowed on interactive surfaces \- Text on accent: Dark text over lime CTA buttons \- Everything else: Achromatic (grays, blacks, whites) or gradient-borne \- Principle: One accent, maximum authority — interface stays quiet so the lime pops
Spacing \- Managed via Tailwind spacing scale (4px base unit) \- Customizable globally through Theme panel spacing settings \- Featherlight aesthetic: minimal padding, airy layouts
Component Defaults \- Border radius (cards/surfaces): 10px — never sharp, never larger rounding \- Border radius (controls/buttons): 999px — pill-shaped \- Borders: Hairline (1px), low-contrast \- Shadows: Almost none — near-flat elevation model \- CTA fill: #ebffb1 lime with dark foreground text
Layout \- Mobile-first, responsive via Tailwind breakpoints \- Clean white space, deep navy/emerald accents in marketing contexts \- Smooth animations throughout \- Premium, editorial feel: sparse chrome, content-forward
/ ============================================ Base44 Design System — CSS Custom Properties Source: base44.com (Tailwind CSS + custom theme) ============================================ /
:root { / --- Color: Canvas & Surfaces --- / --color-canvas: #faf9f7; / warm off-white page background / --color-surface: #ffffff; / cards, elevated product surfaces / --color-surface-raised: #ffffff;
/ --- Color: Accent (Electric Lime) --- / --color-accent: #ebffb1; / primary CTA fill — sole saturated color / --color-accent-hover: #dfffa0; / slightly deeper lime on hover / --color-accent-fg: #1a1a1a; / dark text over lime backgrounds /
/ --- Color: Achromatic Scale --- / --color-gray-50: #fafafa; --color-gray-100: #f4f4f5; --color-gray-200: #e4e4e7; --color-gray-300: #d4d4d8; --color-gray-400: #a1a1aa; --color-gray-500: #71717a; --color-gray-600: #52525b; --color-gray-700: #3f3f46; --color-gray-800: #27272a; --color-gray-900: #18181b;
/ --- Color: Semantic --- / --color-bg: var(--color-canvas); --color-fg: #1a1a1a; --color-fg-muted: var(--color-gray-500); --color-fg-subtle: var(--color-gray-400); --color-border: var(--color-gray-200); / hairline borders / --color-border-focus: var(--color-accent);
/ --- Typography --- / --font-sans: 'Madefor Text', 'Wix Madefor Text', system-ui, sans-serif; --font-display: var(--font-sans); --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px /
--font-weight-normal: 400; / display voice — even at large sizes / --font-weight-medium: 500; --font-weight-semibold: 600; / use sparingly — not for headlines /
--line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
--letter-spacing-body: 0.1em; / body + nav text / --letter-spacing-tight: -0.01em; / large display headings / --letter-spacing-normal: 0em;
/ --- Spacing (4px base unit, Tailwind scale) --- / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px /
/ --- Border Radius --- / --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-card: 10px; / all cards and product surfaces / --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; / buttons, tags, pill-shaped controls / --radius-full: 9999px;
/ --- Shadows (near-flat — almost none) --- / --shadow-none: none; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.06); --shadow-card: var(--shadow-sm); / default card shadow /
/ --- Transitions --- / --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; }
/ Dark mode — not officially shipped; community-requested / / Third-party Dark Base44 extension approximation: / @media (prefers-color-scheme: dark) { :root { --color-canvas: #0f0f11; --color-surface: #18181b; --color-bg: #0f0f11; --color-fg: #f4f4f5; --color-fg-muted: #a1a1aa; --color-border: #27272a; } }
Base44 Design Tokens Reference
Color Tokens
| Token | Value | Usage |
|---|---|---|
| canvas | #faf9f7 | Page/app background (warm off-white) |
| surface | #ffffff | Cards, modals, elevated surfaces |
| accent | #ebffb1 | Electric lime — primary CTA fill, sole saturated color |
| accent-hover | #dfffa0 | Lime hover state |
| accent-fg | #1a1a1a | Text on lime backgrounds |
| fg | #1a1a1a | Default body text |
| fg-muted | #71717a | Secondary/supporting text |
| fg-subtle | #a1a1aa | Placeholder, disabled text |
| border | #e4e4e7 | Hairline borders |
| gray-50 | #fafafa | Subtle backgrounds |
| gray-100 | #f4f4f5 | Hover states on light surfaces |
| gray-200 | #e4e4e7 | Dividers, borders |
| gray-400 | #a1a1aa | Muted icons |
| gray-600 | #52525b | Secondary labels |
| gray-900 | #18181b | Near-black text |
Spacing Scale
| Token | rem | px | Tailwind class |
|---|---|---|---|
| space-1 | 0.25rem | 4px | p-1 |
| space-2 | 0.5rem | 8px | p-2 |
| space-3 | 0.75rem | 12px | p-3 |
| space-4 | 1rem | 16px | p-4 |
| space-6 | 1.5rem | 24px | p-6 |
| space-8 | 2rem | 32px | p-8 |
| space-12 | 3rem | 48px | p-12 |
| space-16 | 4rem | 64px | p-16 |
| space-24 | 6rem | 96px | p-24 |
Typography
| Token | Value | Notes |
|---|---|---|
| font-sans | Madefor Text, system-ui | Primary typeface (Wix Madefor Text) |
| font-size-sm | 0.875rem / 14px | Small labels |
| font-size-base | 1rem / 16px | Body text |
| font-size-lg | 1.125rem / 18px | Lead text |
| font-size-xl | 1.25rem / 20px | Subheadings |
| font-size-2xl | 1.5rem / 24px | Section headings |
| font-size-4xl | 2.25rem / 36px | Page headings |
| font-size-5xl | 3rem / 48px | Display headings |
| font-weight-normal | 400 | Display voice — even at hero sizes |
| font-weight-medium | 500 | UI labels, buttons |
| letter-spacing-body | 0.1em | Body + nav text |
| line-height-normal | 1.5 | Body copy |
| line-height-tight | 1.2 | Display headings |
Border Radius
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Small chips, badges |
| radius-md | 8px | Inputs, small cards |
| radius-card | 10px | All cards and product surfaces |
| radius-lg | 12px | Larger panels |
| radius-pill | 999px | All buttons and pill controls |
Shadows
| Token | Value | Usage |
|---|---|---|
| shadow-none | none | Flat surfaces (default) |
| shadow-xs | 0 1px 2px rgba(0,0,0,0.04) | Subtle lift |
| shadow-sm | 0 1px 3px rgba(0,0,0,0.06) | Cards (default card shadow) |
| shadow-md | 0 2px 8px rgba(0,0,0,0.06) | Dropdowns, popovers |
Shadow philosophy: Near-flat elevation model. Depth is implied through border + background contrast, not shadow depth.
Framework & Stack \- CSS Framework: Tailwind CSS (utility-first; core to Base44's generated code) \- Component library: Custom featherlight components using Tailwind classes \- Icons: Lucide icons (default; swappable via AI prompt) \- Fonts: Wix Madefor Text loaded via Google Fonts / Base44 font panel \- Theme engine: Proprietary Global Theme panel (palette + typography + spacing propagated app-wide without code edits) \- Code access: Tailwind class editing available on paid plans
Theme Support \- Light mode: Full, polished — the official and only shipped theme \- Dark mode: NOT officially available as of 2025–2026; multiple community requests open on feedback.base44.com; a third-party Chrome extension ("Dark Base44") approximates dark mode \- Theming mechanism: Theme panel — change primary color/font and entire app updates instantly
Data Source Confidence
\- High confidence: Accent color #ebffb1 (electric lime), canvas color #faf9f7, pill radius (999px), card radius (~10px), Tailwind framework, Madefor Text font, near-flat shadow model — all confirmed via Refero Styles design system analysis and multiple secondary sources
\- Medium confidence: Exact gray scale values (inferred from Tailwind defaults + achromatic system description), specific font size scale (Tailwind defaults)
\- Low confidence: Exact spacing values in components (Tailwind scale used but specific component padding not documented publicly)
\- Primary sources: Refero Styles (
Notable Patterns 1\. Mono-accent philosophy: Electric lime (#ebffb1) is the only saturated color on interactive surfaces — all other UI is achromatic 2\. Whisper-weight typography: Headlines use font-weight 400 at large sizes — bold weights deliberately avoided 3\. Pill controls everywhere: 999px border-radius on all buttons/tags/chips — no intermediate rounding 4\. Featherlight elevation: Near-zero shadow depth; borders + background contrast create hierarchy 5\. AI-first customization: Design changes delivered via natural language prompts to AI, not manual CSS editing 6\. Marketing vs. product: Marketing site uses warm off-white canvas; app shell uses white surfaces with lime accent