Base44 UX/UI Design and Copywrinting Examples

Base44 Design System

Source & Stack \- URL: \- Framework: Tailwind CSS (utility-first) \- Components: Custom with Tailwind classes; pill-shaped controls, featherlight aesthetic \- Icons: Lucide icons (swappable via prompt) \- Theme engine: Global Theme panel — palette + typography + spacing updated app-wide \- Dark mode: Light-only interface by default (dark mode requested by community, not yet shipped)

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 (), Base44 docs (), Base44 blog ()

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