---
title: "Base44 design system"
variant: extended
source: https://base44.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/base44-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Base44 · Design System

> Warm editorial minimalism, punctuated by electric blue.

**Theme:** light · **Industry:** ai · **Source:** https://base44.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Base44 pairs a warm, off-white canvas and oversized dark headlines with crisp blue and orange accents. A long, modular SaaS homepage moves from a prompt-led hero and product examples through features, pricing, FAQs, and a direct CTA.

## North star

Let oversized dark typography and a warm neutral canvas lead; use vivid blue and orange only to focus attention.

## Overview

The page builds its identity from a warm light canvas (#eeeceb), near-black text (#1e1e24), and large, confident Dazzed headlines. Geist handles supporting copy, navigation, and controls, keeping dense product information readable against the spacious editorial structure. White and near-white panels separate cards and later FAQ and footer areas from the long neutral page background. Blue is reserved for standout feature panels and select navigation emphasis; orange appears as a vivid CTA detail, card edge, or pricing highlight rather than a general wash. The hero centers a short value proposition above a white prompt composer, then uses a wide strip of varied app examples as product proof. Further down, the page alternates split feature layouts, card rows, statistics, pricing, and FAQ content. Hairline dividers and mostly flat surfaces keep the interface precise; the strongest visual layering comes from contrasting section bands and illustrative product previews.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1e1e24` | `--color-soft-ink` | brand | Primary headings, body copy, navigation, links, and dark outlines on cards. |
| Warm Canvas | `#eeeceb` | `--color-warm-canvas` | surface | Dominant page background and broad section bands behind the hero and content. |
| Porcelain Mist | `#f9f8f6` | `--color-porcelain-mist` | surface | Soft card and inset-panel background, especially across product-category cards. |
| Clean Paper | `#ffffff` | `--color-clean-paper` | surface | Prompt composer, pricing and FAQ surfaces, and the closing footer area. |
| Signal Orange | `#ff6a00` | `--color-signal-orange` | accent | Measured card border accent and small orange details; use sparingly, not as the main CTA fill. |
| Electric Blue | `#3950e6` | `--color-electric-blue` | brand | Large feature and closing CTA panels, with occasional emphasis in navigation and product previews. |
| Coral Spark | `#ff773c` | `--color-coral-spark` | accent | Bright small CTA treatment, visible on the hero composer’s submit control. |
| Stone Tint | `#e2ded7` | `--color-stone-tint` | neutral | Quiet inset-card tone, seen in pricing and metric-style surfaces rather than as a dominant page color. |

### Semantic aliases

`--color-canvas` → `#eeeceb` (Warm Canvas) · `--color-surface` → `#f9f8f6` (Porcelain Mist) · `--color-surface-2` → `#ffffff` (Clean Paper) · `--color-text` → `#1e1e24` (Soft Ink) · `--color-border` → `#ff6a00` (Signal Orange) · `--color-accent` → `#3950e6` (Electric Blue) · `--color-accent-2` → `#ff773c` (Coral Spark) · `--color-accent-3` → `#ff6a00` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e24` | `#eeeceb` | 14.08:1 | AAA |
| `#1e1e24` | `#f9f8f6` | 15.62:1 | AAA |
| `#1e1e24` | `#ffffff` | 16.58:1 | AAA |
| `#3950e6` | `#eeeceb` | 5.15:1 | AA |
| `#3950e6` | `#f9f8f6` | 5.71:1 | AA |
| `#3950e6` | `#ffffff` | 6.06:1 | AA |

### Gradients

- `linear-gradient(rgb(30, 30, 36), rgb(30, 30, 36))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 600, 500 | Supporting copy, buttons, links, and much of the navigation and interface text. | Inter |
| Dazzed | `--font-display` | webfont | 600, 500 | Display headings and prominent feature or card text; also used in some navigation and link instances. | Manrope |

- **Geist:** Use measured regular, medium, and semibold weights; keep body copy clean and generally untracked.
- **Dazzed:** Use semibold for large headings, tight negative tracking, compact line-height, and natural sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.422, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 93px | 600 | 0.89 | -0.04em | — | Dazzed | Large hero-scale display headline. |
| h1 | 57px | 600 | 1.05 | -0.03em | — | Dazzed | Primary hero and major section headlines. |
| h2 | 36px | 600 | 1.08 | -0.021em | — | Dazzed | Section headings, including features, pricing, and FAQ. |
| h3 | 24px | 600 | 1.25 | -0.03em | — | Dazzed | Card titles and smaller feature headlines. |
| h4 | 21px | 400 | 1.39 | -0.01em | — | Geist | Supporting subheads and explanatory statements. |
| body | 16px | 400 | 1.44 | 0 | — | Geist | Main paragraphs and feature descriptions. |
| caption | 15px | 400 | 1.33 | 0 | — | Geist | Compact helper copy and secondary annotations. |
| button | 16px | 500 | 1 | 0 | — | Geist | Primary and secondary CTA labels. |
| nav | 16px | 500 | 1.5 | 0 | — | Dazzed | Top navigation items and prominent navigation labels. |
| link | 16px | 400 | 1.44 | 0 | — | Geist | Inline and standalone text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 9, 10, 11, 12, 14, 15, 20, 21, 22, 23, 24, 27, 30 px.
- Section rhythm 90px · element gap 24px · card padding 8px · max content width —.

A long, single-page composition uses broad section bands and a modular content grid. The hero is centered, while subsequent feature blocks shift between split layouts and three-column cards; pricing and FAQ return to a two-column feel. The measured maximum width is unspecified, so preserve the screenshot’s generous side margins without inventing a fixed width. Comfortable density and substantial vertical breathing room distinguish major sections, while compact lists and rules keep information-heavy areas orderly.

## Shape & elevation

- Radius: button `8px` · card `8px` · nav `2px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.16s ease` on interactive elements.

The overall design is flat, with no measured shadow system. Separate content using white or near-white panels, contrasting section backgrounds, and thin dark dividers. Some cards use prominent outlines or orange accents; avoid adding soft shadow stacks or artificial depth.

## Imagery

The hero uses a horizontal collage of app interfaces as product proof, with contrasting greens, maps, dashboards, and dark panels contained in their own previews. Feature areas pair interface-like illustrations with text; a blue block carries a large typographic message. Later content includes a founder portrait and warm-toned card artwork. Treat these as varied product examples, not as a unified photography palette.

## Components

### Top navigation

A slim horizontal header with the Base44 mark, text links, a small blue-highlighted item, language icon, and dark rounded CTA.

### Hero prompt composer

Centered white input panel with muted prompt text, utility controls, and a coral-orange submit control with an 8px measured radius.

### App preview strip

A wide, tightly aligned row of heterogeneous app previews, allowing each interface to retain its own palette and visual character.

### Feature list

Editorial split section pairing a short headline and illustration with stacked text rows separated by dark rules and arrow icons.

### Category cards

Three light cards for Apps, Websites, and AI agents, each with a concise explanation, dark button, and orange lower-edge accent.

### Pricing panels

Side-by-side plan information with a white free tier and a strong orange paid tier; keep pricing labels and actions clearly grouped.

### FAQ accordion

A heading column alongside a list of question rows, thin dividers, and circular expand controls on a clean white band.

### Closing CTA

A broad vivid-blue panel with oversized white centered text and an underlined build link.

### Measured component styles

- **Primary button** (“Build an app”): background #312f2f · text #ffffff · border 1px solid · radius 8px · padding 0px 22px · 500 16px Geist
- **Secondary button**: background #ff773c · text #1e1e24 · radius 8px · padding 0px · 400 16px Geist
- **Link** (“Backend and storage, built in”): transparent background · text #1e1e24 · radius 0px · padding 0px · 400 16px Dazzed
- **Input**: transparent background · text #000000 · radius 0px · padding 20px 12px 12px 24px · 400 17px Geist
- **Card** (“What is Base44? Base44 is a no-code AI p”): transparent background · text #1e1e24 · border 2px solid #1e1e24 · radius 0px · padding 0px 0px 33px 0px · 400 16px Dazzed
- **Navigation item** (“About Us”): transparent background · text #1e1e24 · radius 0px · padding 0px · 400 18px Geist

## Do

- Use the warm gray canvas for broad page regions.
- Set major headlines in Dazzed-style bold display typography.
- Use near-black text for navigation, headings, and rules.
- Reserve vivid blue for selected feature and CTA panels.
- Keep orange accents concentrated in controls, card edges, and highlights.
- Separate sections with generous whitespace and simple dividers.

## Don't

- Do not make gradients or shadows a defining visual feature.
- Do not use orange as a full-page background.
- Do not flatten app previews into one uniform illustration style.
- Do not crowd the hero with competing navigation or extra copy.
- Do not add unmeasured dimensions, spacing, or corner radii.
- Do not replace the restrained palette with many unrelated accents.

## Agent prompt

Build a new Base44-style SaaS page with a warm, editorial interface. Use Warm Canvas (#eeeceb) for broad page areas and Soft Ink (#1e1e24) for text, navigation, and rules. Use Dazzed-like display typography for large, tightly tracked headings, with Geist-like sans serif for readable copy and controls. Create a clear hero with a centered prompt panel, then organize content into split feature sections and light cards. Use Clean Paper (#ffffff) and Porcelain Mist (#f9f8f6) to distinguish panels. Reserve Electric Blue (#3950e6) for a few bold feature or CTA areas, and Coral Spark (#ff773c) or Signal Orange (#ff6a00) for small action details. Keep the page spacious, mostly flat, and structured with restrained dividers; avoid unmeasured styling claims or decorative shadow effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-column page with a centered hero followed by alternating split sections, card rows, pricing, FAQ, CTA, and footer. | Prompt-led entry, Feature discovery, Plan comparison, Expandable FAQ | Warm neutral canvas, Large dark headlines, Flat cards and dividers, Blue and orange accents |

## Source CSS custom properties (selected)

```css
--font-family-base44: "WixMadeforText", system-ui, sans-serif;
--background: 40 20% 97%;
--foreground: 0 0% 6%;
--card-foreground: 0 0% 6%;
--popover-foreground: 0 0% 6%;
--primary: 0 0% 6%;
--primary-foreground: 0 0% 98%;
--secondary: 36 20% 94%;
--secondary-foreground: 0 0% 6%;
--muted-foreground: 220 8% 15%;
--accent: 36 20% 94%;
--accent-foreground: 0 0% 6%;
--destructive-foreground: 0 0% 98%;
--border: 36 12% 83%;
--radius: .75rem;
--brand: 28 96% 61%;
--brand-foreground: 0 0% 100%;
--brand-hover: 28 82% 55%;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--surface-canvas: #FAF9F7;
--surface-card: #FFFFFF;
--surface-sunken: #E3DED8;
--surface-inverse: #1E1E24;
--surface-main: #EEECEB;
--surface-blue: #3B51E5;
--surface-grey: #BDBDBD;
--surface-warm: #E2DED7;
--text-strong: #0F0F0F;
--text-body: #232529;
--text-muted: #767676;
--text-faint: #A4A4A4;
--text-inverse: #EEECEB;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/base44-com