---
version: alpha
name: "Base44"
description: "Base44 uses a warm dotted canvas, oversized Dazzed headlines, orange product actions, and a blue secondary accent to make app generation feel like a physical builder surface instead of a generic chat page."
colors:
  bg: "#f9f8f6"
  bg-grid-dot: "#d9d5ce"
  surface: "#ffffff"
  surface-muted: "#eeeceb"
  surface-blue: "#3950e6"
  text: "#1e1e24"
  text-body: "#0f0f0f"
  text-muted: "#6d6a67"
  text-soft: "#686868"
  brand: "#ff773c"
  brand-hover: "#ff6424"
  brand-secondary: "#3950e6"
  cta-fill: "#312f2f"
  cta-text: "#ffffff"
  border: "#d9d5ce"
  border-subtle: "rgba(217, 213, 206, 0.55)"
  focus: "#ff773c"
  success: "#1f7a43"
  warning: "#f6a21a"
  danger: "#d94b36"
  on-brand: "#0f0f0f"
typography:
  display:
    fontFamily: "Dazzed"
    fontSize: "92px"
    lineHeight: 1.5
    letterSpacing: "-0.03em"
  body:
    fontFamily: "WixMadeforText"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Base44 feels like a clean desk with a dotted planning sheet on top. The page is warm off-white rather than pure white, so the heavy black headline and dark CTA can sit on it without feeling sterile.

The brand signal is split: orange marks creation actions, while blue marks special navigation or product emphasis. This keeps the builder action tactile and the product taxonomy organized.

**Key Characteristics**
- Warm paper background: `#f9f8f6`.
- Visible dot-grid texture using `#d9d5ce`.
- Oversized Dazzed display type with tight tracking.
- Orange action controls for prompt submission and creation.
- Deep charcoal primary CTA in the header.
- Blue secondary accent for special product surfaces.
- Rounded prompt boxes, not glass cards.
- Product screenshots arranged as a horizontal proof strip.

## Colors

Primary surface: `bg #f9f8f6` for the page canvas and `surface #ffffff` for prompt cards.

Text: `text #1e1e24` for display copy, `text-body #0f0f0f` for body, and `text-muted #6d6a67` for supporting notes.

Brand action: `brand #ff773c` is the orange build/send control. Use it sparingly and always near a concrete action.

Secondary accent: `brand-secondary #3950e6` marks the Superagents nav item and other product highlights.

Borders: `border #d9d5ce` and `border-subtle rgba(217, 213, 206, 0.55)` maintain the paper-grid language.

## Typography

| Role | Font | Size | Weight | Notes |
| --- | --- | ---: | ---: | --- |
| Hero | Dazzed | 92 | 600 | Very tight, rounded, one dominant message |
| Display | Dazzed | 64 | 600 | Section introductions |
| H1 | Dazzed | 48 | 600 | Detail page title |
| H2 | Dazzed | 36 | 600 | Product blocks |
| H3 | Dazzed | 24 | 600 | Feature cards |
| Body large | WixMadeforText | 20 | 400 | Hero support |
| Body | WixMadeforText | 16 | 400 | Default copy |
| Nav | Dazzed | 16 | 500 | Header groups |
| Button | Geist/Wix | 16 | 600 | Compact action copy |

Keep hero lines short. The display face is wide and friendly, so crowding it into dense paragraphs breaks the Base44 tone.

## Layout

Base44 prefers centered hero composition with a wide but shallow input surface below the headline. The proof strip sits beneath the fold as cropped app previews, creating momentum without explaining every feature at once.

Use the dotted background as structure. Align major edges to the invisible grid, then let product screenshots break the line slightly for energy.

At mobile sizes, reduce the hero to 48-56px and place the prompt box full width. Keep the proof strip horizontally scrollable instead of stacking every screenshot.

Navigation should collapse into a drawer with the charcoal CTA retained at the top or bottom. Dot-grid density can remain fixed so the page does not become noisy.

## Elevation & Depth

Depth is soft and functional. The page relies on texture, scale, and cropping more than shadows.

| Level | Treatment | Use |
| --- | --- | --- |
| 0 | paper background | page base |
| 1 | white surface, no border | prompt input |
| 2 | subtle shadow | hero prompt box |
| 3 | cropped screenshot cards | proof strip |

## Shapes

| Tier | Value | Use |
| --- | ---: | --- |
| Micro | 2 | Link focus, blue nav markers |
| Small | 6 | tiny controls |
| Medium | 8 | header CTA |
| Large | 12 | prompt box, cards |
| Extra large | 20 | large product modules |
| Pill | 9999 | rare labels only |

The signature radius is 8-12px. Do not over-round the whole interface.

## Components

Buttons: primary header buttons are charcoal pills with 8px radius. Prompt actions use orange square-rounded controls with black icons or text.

Cards: use white or muted cream surfaces with light borders. Avoid heavy shadows except under the main prompt box.

Badges: blue text on the paper background works better than filled chips. Use small square markers for separation.

Inputs: prompt boxes should feel like a blank build surface with one large text area, minimal chrome, and a strong submit affordance.

Navigation: keep the logo left, grouped product menus center-left, and the main CTA on the right.

Use quick, practical transitions: 140ms for hover, 220ms for open states, and 360ms for screenshot or builder-preview movement.

Orange actions should brighten slightly on hover. Charcoal CTAs can lift with a small translateY and shadow. Dot-grid backgrounds should not animate unless the whole scene is intentionally showing generation progress.

`#1e1e24` on `#f9f8f6` provides strong contrast for hero text. Orange `#ff773c` needs dark text or iconography, not white copy, for smaller controls.

Focus rings should use orange on light surfaces and blue for secondary product links. Preserve visible labels on prompt controls; icons alone need accessible names.

Voice is direct, builder-oriented, and slightly playful. Use verbs like build, ship, generate, connect, and refine.

Avoid enterprise abstraction. Copy should make the user feel that apps, websites, games, and tools are concrete outputs, not vague workflows.

The audited homepage is light-only. If a dark variant is needed for a product mockup, invert to charcoal surfaces while preserving orange for creation actions and blue for product emphasis.

Do not convert the dotted background to pure black. A dark Base44 theme should still feel like a workbench, not a terminal.

Base44 sits between AI builders, dot-grid notebooks, and no-code app canvases. It rejects the glassy blue-purple AI landing page in favor of a warmer, more physical construction metaphor.

The orange action language gives the system a tool-like quality. The blue accent is deliberately secondary, used to signal product depth rather than the core action.

## Do's and Don'ts

Do use warm off-white backgrounds. Do keep headline type oversized. Do reserve orange for creation actions. Do use blue only for secondary emphasis. Do crop product previews boldly.

Do not make every button orange. Do not remove the dot-grid texture from hero compositions. Do not use cold gray as the main canvas. Do not replace Dazzed with a narrow grotesk for display text.

### Quick Color Reference

Background: `#f9f8f6`; text: `#1e1e24`; body text: `#0f0f0f`; orange action: `#ff773c`; blue accent: `#3950e6`; CTA fill: `#312f2f`; border: `#d9d5ce`; surface: `#ffffff`.

### Example Component Prompts

- Create a Base44-style hero with a warm dotted background, massive Dazzed headline, and centered prompt builder.
- Design a compact charcoal header CTA with 8px radius and white text.
- Build a prompt input card with orange submit button, minimal controls, and a soft shadow.
- Create a horizontal strip of app preview cards cropped under the hero fold.

### Iteration Guide

1. Make the page warmer before adding more color.
2. Use orange only where the user creates something.
3. Keep blue as a secondary product signal.
4. Increase display type before adding decorative graphics.
5. Use dots, screenshots, and prompt surfaces as the main visual system.