# Base44 — Design Extract (Nightshift / Dark)

Source: https://base44.com/ (captured 2026-09-17).
Build platform: React (Vite build, hashed chunk assets) + Tailwind CSS (arbitrary-value utility classes) with a small set of `--br-*` / shadcn-style HSL custom properties for the shared component layer.
This document describes a dark-mode counterpart built from the same tokens as [design-default.md](design-default.md) — Base44's home page itself ships light-only; typography, layout, components and copy are unchanged, only the palette is re-tuned for a dark ground.


---


## 1. Overall Style

Same warm, soft-object aesthetic as the default extract, inverted onto a dark ink ground instead of paper.

- The canvas becomes the site's own ink tone (`#1E1E24`), which on the live light site is only ever used for *text* — here it's the background, so the whole page reads as "after hours."
- Default text becomes the light "text-inverse" tone (`#EEECEB`), the same value the live site already uses for text-on-dark (its footer and CTA-black bands).
- Corners, radius scale, spacing and type stay identical to the default extract — only fills, borders and text colours change.
- The orange (`#FF6A00`) and blue (`#3950E6`) accents are brightened slightly (`#FF8A3D`, `#7C8CFF`) to keep AA contrast against the dark ground; on the live light site these same hues already appear at full saturation only against paper, so a lift is needed here rather than there.
- Primary CTA flips: instead of a dark charcoal fill on light paper, it's a light "paper" fill (`#EEECEB`) on the dark ground — mirroring the live site's own footer CTA button, which already does exactly this swap.
- Cards and surfaces use a slightly lifted dark tone rather than pure black, keeping the same "soft paper" warmth the light mode has, just recoloured for depth instead of light.


## 2. Color Palette (dark)

| Token | Hex | Role |
|---|---|---|
| `--bg` | `#1E1E24` | Page ground (was page *text* on the light extract) |
| `--surface` | `#28282F` | Alt section / card fill (lifted from bg) |
| `--surface-2` | `#312F2F` | Deeper card fill (the live CTA-black tone, reused as a surface here) |
| `--text` | `#EEECEB` | Primary text (the live site's own text-inverse token) |
| `--muted` | `#9A968F` | Secondary/supporting copy (lightened from `#6D6A67`) |
| `--border` | `#3A383D` | Hairlines on the dark ground |
| `--orange` (brightened) | `#FF8A3D` | Brand accent, tuned up from `#FF6A00` for dark-ground contrast |
| `--blue` (brightened) | `#7C8CFF` | Links / "Superagents" label, tuned up from `#3950E6` |
| CTA fill (paper-on-dark) | `#EEECEB` | Primary button fill (mirrors the live footer CTA) |
| CTA text | `#1E1E24` | Primary button label |
| CTA hover | `#D8D5D0` | Primary button hover fill |

All other tokens (radius scale, spacing, easing, fonts) are unchanged from [design-default.md](design-default.md).


## 3–8. Typography, Layout, Components, Structure, Assets, Motion

Unchanged from the default extract — see [design-default.md](design-default.md) sections 3–8. Only the palette above applies; Dazzed remains the display face, Geist the body face, and the 6/8/10 px radius scale, fluid clamp() spacing, and 0.2 s ease-standard motion all carry over as-is.


## 9. Quick Token Summary (dark)

```css
:root {
  /* ground + neutrals (dark) */
  --bg:          #1E1E24;
  --surface:     #28282F;
  --surface-2:   #312F2F;
  --text:        #EEECEB;
  --muted:       #9A968F;
  --border:      #3A383D;

  /* accents, brightened for dark-ground contrast */
  --orange: #FF8A3D;  /* was #FF6A00 on paper */
  --blue:   #7C8CFF;  /* was #3950E6 on paper */

  /* primary button — paper-on-dark, mirrors the live footer CTA */
  --cta-fill:  #EEECEB;
  --cta-text:  #1E1E24;
  --cta-hover: #D8D5D0;

  /* unchanged from default */
  --font-display: "Dazzed", "Dazzed Fallback", sans-serif;
  --font-body:    "Geist", "Geist Fallback", sans-serif;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --dur-hover: .2s;
}
```