# Base44 — Design Extract (Default)

Source: https://base44.com/ (captured 2026-09-17).
Build platform: React (Vite build, hashed chunk assets) + Tailwind CSS (arbitrary-value utility classes, e.g. `text-[#1e1e24]`, `rounded-[8px]`) with a small set of `--br-*` / shadcn-style HSL custom properties for the shared component layer.
This document describes the visual design of the home page. It is a reference, not a set of instructions.


---


## 1. Overall Style

Base44 (a Wix-owned "vibe coding" app builder) uses a warm-paper, soft-object aesthetic — closer to a stationery brand than a dev tool.

- The canvas is a warm off-white paper tone (`#F9F7F4`), not pure white; sections alternate between it and a slightly deeper oat tone (`#EEECEB`) for a two-tone rhythm rather than hard section dividers.
- Default text is a near-black ink (`#1E1E24`), never pure black; secondary copy drops to a warm grey (`#6D6A67`).
- Corners are soft and small throughout: 6–10 px on buttons and cards, 2 px on tiny label pills, fully round only for avatars/dots. Nothing is sharp, nothing is a full pill button.
- Two accent hues appear sparingly against the neutral paper ground: a hot orange (`#FF6A00`) for brand marks/CTAs-of-emphasis, and an electric blue (`#3B51E5` / `#3950E6`) for the "Superagents" link and a few inline actions.
- Primary CTAs are solid near-black pills-with-corners (`#312F2F` → hover `#433F3F`), not the orange or blue — colour is reserved for accents, not the main action.
- Two type voices: **Dazzed**, a rounded proprietary display face, for every headline (large, tight tracking, sentence case); **Geist**, a variable-weight grotesque, for body copy, nav, buttons and labels.
- Layout is a wide, airy, full-bleed canvas (1920 px cap) with generous clamp()-based fluid spacing — headlines scale continuously with viewport width rather than jumping at breakpoints.
- Motion is understated: 0.2 s color/background transitions on a gentle ease-out curve, plus a "slot machine" label swap on the primary CTA (the button text slides up and is replaced by an echo copy on hover).
- Copy is builder-first and reassuring: "no setup," "no engineers," "no waiting," paired with real usage stats from a customer story (1 week to launch, $1M ARR in 3 months).
- Hero tagline: **"Every builder needs a base"** — "Build your own apps, websites, products and AI agents on Base44 using your own words. Get ahead — and make sure it stays that way."


## 2. Color Palette

Real hex values pulled from the live CSS (`var(--token, #hex)` fallbacks) and inline Tailwind arbitrary classes.

### Neutrals / ground

| Token | Hex | Role |
|---|---|---|
| `--offwhite` (page bg, alt) | `#F9F7F4` | Primary page canvas |
| `--offwhite` (component default) | `#EEECEB` | Alternating section bg, input/card fill |
| `--surface-warm` | `#E2DED7` | Warm card/panel surface |
| `--border-warm` | `#DDD8D2` | Hairline borders on warm surfaces |
| `--surface-grey` / `--disabled` | `#BDBDBD` | Disabled states, quiet numerals |
| `--text-secondary` | `#6D6A67` | Secondary/supporting copy |
| `--text-placeholder` | `#8E8E8E` | Form placeholder text |
| `--white` | `#FFFFFF` / `#fff` | Popovers, dropdown panels |
| `--black` / `--text-ink` / `--ink-800` | `#1E1E24` | Primary text, dark section fill |
| `--surface-inverse` | `#1E1E24` | Same value, used as a background (footer, dark bands) |
| `--text-inverse` | `#EEECEB` | Text on dark bands |
| `--cta-black` | `#312F2F` | Primary button fill |
| CTA hover (charcoal, no named token) | `#433F3F` | Primary button hover fill |

### Brand accents

| Token | Hex | Role |
|---|---|---|
| `--orange` | `#FF6A00` | Brand mark / occasional accent fill |
| `--icon-orange` | `#FFAE81` | Softer orange for icon strokes |
| `--invalid` | `#FF5100` | Form error state |
| `--blue` / `--blue-500` / `--focus-ring` | `#3B51E5` | Links, focus rings, "Superagents" label (site header uses `#3950E6`, a near-identical shade) |
| `--cta-blue-hover` | `#4B62FA` | Blue element hover |
| `--icon-blue` | `#9CA9FF` | Softer blue for icon strokes |
| `--green` | `#134F25` | Deep green (success text) |
| `--icon-green` | `#499C61` | Softer green for icon strokes |

### Shadows

| Token | Value | Role |
|---|---|---|
| `--shadow-menu` | `0 10px 20px 0 rgba(15,14,14,.06), 0 0 6px 0 rgba(15,14,14,.07)` | Dropdowns, filter/search panels |

Selection/hover colour is not overridden globally; links and the "Superagents" nav item sit in blue (`#3950E6`) against the ink-on-paper default.


## 3. Typography

### Fonts

| Family | Style | Weights used | Use | Licensed? |
|---|---|---|---|---|
| **Dazzed** | Rounded proprietary display sans | 400 / 500 / 600 | All headlines (`h1`–`h2`), hero, section titles, footer CTA | Yes — commercial, self-hosted from `media.base44.com` |
| **Geist** | Grotesque, variable weight | 100–900 (site uses ~400/500/600) | Body copy, nav, buttons, labels, form fields | No — open source (Vercel, SIL OFL), self-hosted |
| Dazzed Fallback / Geist Fallback | Metric-matched system fallback | — | `size-adjust` / `ascent-override` tuned local fallback (Arial/Helvetica/Roboto/Segoe UI) to prevent layout shift while the webfont loads | — |

### Type scale (selected, desktop → mobile via `clamp()`)

| Token | Size | Use |
|---|---|---|
| Hero H1 | `clamp(60px, 6.51vw, 125px)`, line-height 1.05, tracking `-0.04em` | "Every builder needs a base" |
| Hero subhead | `clamp(17px, 1.46vw, 28px)`, line-height 1.39, tracking `-0.01em`, color `#252525` | Hero supporting paragraph |
| Testimonial stat number | `clamp(50px, 5.58vw, 76px)`, line-height `clamp(50px, 4.17vw, 80px)` | "1 week" / "$1M ARR" / "6-8%" |
| Nav label | 16 / 24px, weight 500 | Header nav items |
| Button label (mobile) | 14px, weight 500, tracking `-0.14px` | "Start building" (mobile) |
| Button label (desktop) | 16px, weight 600, tracking `-0.36px` | "Start building" (desktop, ≥768px) |
| Field label | 18 / 26px, weight 400 | Form field labels |
| Field input | 14 / 18px, weight 400 | Form inputs |

### Line-height, tracking, headline pattern

- Display headlines run tight: line-height 1.0–1.1, negative tracking (−0.01em to −0.04em, tighter at larger sizes).
- Body copy sits looser: line-height ≈1.4.
- Headline pattern: sentence case, no eyebrow/kicker label above section titles (unlike many dev-tool sites) — a plain two-line sentence carries each section, e.g. "The whole stack. No setup slowdown."


## 4. Layout

- **Max width**: 1920 px full-bleed container; inner content padding is fluid — `20px` on mobile, `6.51vw` on tablet, capped at `min(3.125vw, 60px)` ≈ 60 px on desktop.
- **Prose max-widths**: 832 px for section body copy; 510 / 469 / 369 px for the three "what will you build" card descriptions; 627 / 800 / 740 / 593 px used for assorted narrower blocks.
- **Spacing**: not a strict 4/8 px grid — organic fluid gaps (`clamp()` values plus fixed 6, 8, 9, 10, 12, 14, 20, 30, 36, 50 px) sized per component, consistent with a visual page-builder output rather than a hand-authored design-token system.
- **Breakpoints**: custom to this page — 768 px, 1100 px, 1431 px (not the Tailwind defaults) — chosen to match design-file breakpoints for the header/nav collapse and hero type scaling.
- **Radius scale**: 2 px (small label pills), 6 px (mobile buttons, multiselect chips), 8 px (desktop buttons, play/pause control), 10 px (large CTA buttons, feature cards), 9999px/`50%` (avatars, dots, fully-round controls).
- **Section rhythm**: alternates between the two neutral tones (`#F9F7F4` ↔ `#EEECEB`) instead of borders; a couple of sections invert to the ink-dark (`#1E1E24`) or charcoal (`#312F2F`) fill for contrast (footer, final CTA band).
- **Shadow**: reserved for floating UI (dropdowns, filter panels) via `--shadow-menu` — flat sections and cards carry no shadow, only fill/border changes.


## 5. Components

- **Header/nav** — transparent bar over the hero; left wordmark logo, center nav (`Product`, `Use Cases`, `Resources` as dropdown triggers; `Security`, `Pricing`, `Enterprise` as plain links; `Superagents` as a blue `#3950E6` label flanked by two 4 px square bullets), right side: a globe/language button (hidden below 1431 px), the primary CTA, and a hamburger toggle (shown below 1431 px). Nav text is Geist medium, 16/24, ink `#1e1e24`.
- **Primary button ("Start building")** — solid `#312F2F` fill, white text, radius 6 px (mobile, 32 px tall) → 8 px (desktop ≥768px, 38 px tall); Geist 500/14px mobile → 600/16px desktop, tracking tightens at the larger size. Hover fill lightens to `#433F3F` over 200 ms. Label text uses a two-line "slot" wrapper: the visible label and a hidden echo copy sit stacked, and on hover the stack translates up by 50% to reveal the echo line — a subtle slot-machine swap rather than a colour/scale change.
- **Feature/build cards** ("Apps" / "Websites" / "AI agents") — Dazzed title + Geist description (max-width 510 px) + a dedicated CTA per card ("Build an app", "Build a website", "Create an AI agent").
- **Multiselect chip** — 40 px tall pill, 6 px radius, 2 px transparent border, `#EEECEB` fill with a bottom-anchored charcoal underline that grows on hover/selection (`background-size` animated 0%→100%).
- **Dropdown / filter panel** — white fill, `--shadow-menu` double shadow, 6 px radius, Geist body text.
- **Testimonial block** — customer name/title/company, pull quote, and three large stat pairs (value in Dazzed display size + small Geist label underneath): "1 week / to launch", "$1M ARR / in 3 months", "6-8% / conversion." CTA: "Read full story."
- **Pricing cards** — two-plan layout: Free ($0/mo, "Start Building") vs. paid (from $16/mo billed annually, "See all plans"), plus an enterprise line ("Looking for enterprise solutions? Contact sales").
- **FAQ** — accordion list, 12 questions, plain Geist text, no icon decoration beyond an expand affordance.
- **Footer** — dark ink/charcoal band, large Dazzed sign-off line ("Go ahead. Build it yourself." / final CTA), then a four-column link grid (Company, Product, Resources, Legal), social row (X, Discord, LinkedIn, Reddit), copyright "© 2026 Wix.com Ltd. All rights reserved."


## 6. Page Structure and Content

1. **Header / nav** — Product, Use Cases, Resources, Security, Pricing, Enterprise, Superagents; CTA "Start building."
2. **Hero** — "Every builder needs a base" / "Build your own apps, websites, products and AI agents on Base44 using your own words. Get ahead — and make sure it stays that way." CTA: "Start building."
3. **The whole stack** — "The whole stack. No setup slowdown." / "Ship something real with vibe coding — without touching a server, wiring up a payment provider, or configuring a database. It's all already there." Feature list: Backend and storage built in · One-click integrations · Stay on brand with custom domain · Easily keep track of analytics · Get paid directly through Base44 · Enterprise-grade security.
4. **What will you build?** — Apps ("Turn any idea into a fully functional app — with backend, auth, payments, and hosting already built in. No setup, no engineers, no waiting." → "Build an app"); Websites ("Build a website for any need. AI-generated design, custom domain, built-in SEO tools — ready to go live from day one." → "Build a website"); AI agents ("Create a 24/7 agent that connects to your tools, takes real action, and works while you sleep. No integration headaches." → "Create an AI agent").
5. **Beautiful by default** — "Beautiful by default. Yours by design." Four features: Seamlessly collaborate (shared board, notes, AI instructions), Generate high-quality videos, Get redesign recommendations (AI shows previews first), Control the design (global colors/fonts).
6. **Built-in marketing tools** — "Built-in marketing tools to grow after you ship." SEO/GEO dashboard (scan + prioritized fix list for Google/ChatGPT/Gemini visibility), Social presence (auto-generated, on-voice social content), App analytics (traffic, sales, custom dashboards).
7. **Customer testimonial** — Yoav Hornung, Founder, Gift My Book (ex-Fiverr): "It took about a week to come up with a product that works end-to-end." Stats: 1 week to launch · $1M ARR in 3 months · 6-8% conversion. CTA: "Read full story."
8. **Pricing** — "Choose your plan." Free: $0/mo, "Start Building," core features/integrations/auth/database. Paid: from $16/mo billed annually, "See all plans," unlimited apps/in-app code edits/custom domain. Enterprise line: "Looking for enterprise solutions? Contact sales."
9. **FAQ** — "Frequently asked questions" — 12 items covering what Base44 is, how vibe coding works, pricing, coding experience required (no), platform comparison, website building, app types, integrations, credits, deployment/hosting, Superagents, and data security.
10. **Final CTA** — "Go ahead. Build it yourself." CTA: "Start building." Visual gallery of built-app screenshots (financial dashboard, UI elements, portrait, audio player, event photo).
11. **Footer** — Company (About Us, Affiliate Program, Careers); Product (Features, Integrations, Enterprise, Pricing, Roadmap, Changelog, Feature Request, Use Cases, Status, Base44 for Developers, Superagents, Workflows, AI App Builder, AI Website Builder); Resources (Docs & FAQs, Higher Ed, Community, Blog, Hire a Partner); Legal (Privacy Policy, Terms of Service, Security, Report Misuse, Responsible Use, Accessibility Statement); social icons (X, Discord, LinkedIn, Reddit); copyright "© 2026 Wix.com Ltd. All rights reserved."


## 7. Assets

- Logo: wordmark SVG (`static.wixstatic.com/shapes/...`), plus small icon glyphs (globe for language, hamburger for mobile menu) served from `media.base44.com`.
- Product screenshots throughout (dashboard, app UI, "beautiful by default" board mockups, final-gallery images) — real captured app output rather than illustration.
- No custom icon font — inline SVGs for chevrons/carets (nav dropdown arrows) and simple line icons.
- Fonts self-hosted from `media.base44.com/files/public/marketing-site-assets/fonts/` (Dazzed) and `/fonts/geist/` (Geist), with metric-matched local fallback faces to avoid layout shift (`Dazzed Fallback`, `Geist Fallback`).


## 8. Motion

- Standard easing: `cubic-bezier(.22, 1, .36, 1)` (`--ease-standard`), duration `.2s` (`--dur-hover`) — a soft, slightly overshooting ease-out used for all color/background transitions.
- Primary CTA label swap: a two-line stacked span translates `-50%` on hover (desktop, ≥1100px) to reveal an echo copy of the label — the "slot machine" effect noted above.
- Nav dropdown carets rotate 200 ms on open/close.
- Multiselect chips animate `background-size` from `0%` to `100%` height on hover/select to reveal an underline-style fill.
- No parallax or scroll-triggered entrance animation observed on the marketing page; motion is confined to hover/interaction states.


## 9. Quick Token Summary

```css
:root {
  /* ground + neutrals */
  --offwhite-paper:   #F9F7F4;  /* primary page canvas */
  --offwhite:         #EEECEB;  /* alt section bg, inputs */
  --surface-warm:     #E2DED7;
  --border-warm:      #DDD8D2;
  --surface-grey:     #BDBDBD;
  --text-ink:         #1E1E24;  /* primary text / dark section fill */
  --text-secondary:   #6D6A67;
  --text-placeholder: #8E8E8E;
  --white:            #FFFFFF;

  /* buttons */
  --cta-black:        #312F2F;  /* primary button fill */
  --cta-black-hover:  #433F3F;

  /* accents */
  --orange:           #FF6A00;
  --icon-orange:      #FFAE81;
  --blue:             #3B51E5;  /* focus ring / links */
  --blue-nav:         #3950E6;  /* "Superagents" nav label */
  --cta-blue-hover:   #4B62FA;
  --icon-blue:        #9CA9FF;
  --green:            #134F25;
  --icon-green:       #499C61;
  --invalid:          #FF5100;

  /* shadow */
  --shadow-menu: 0 10px 20px 0 rgba(15,14,14,.06), 0 0 6px 0 rgba(15,14,14,.07);

  /* type */
  --font-display: "Dazzed", "Dazzed Fallback", sans-serif;   /* commercial, self-hosted */
  --font-body:    "Geist", "Geist Fallback", sans-serif;     /* open source */

  /* geometry */
  --content-max:  1920px;
  --prose-max:    832px;
  --radius-sm:    2px;   /* label pills */
  --radius-md:    6px;   /* mobile buttons, chips */
  --radius-lg:    8px;   /* desktop buttons */
  --radius-xl:    10px;  /* large CTAs, feature cards */

  /* motion */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --dur-hover:     .2s;
}
```