MozaikaDesign system

Modal — Design System

dark · modern · high · tailwind · confidence 92%

Modal renders AI infrastructure as a night launchpad: Goga headlines at 64px/500 over pure black, neon accent traces, pill CTAs, and 42px stat numerals that read like telemetry. The dark canvas makes GPU talk feel cinematic while Inter keeps the body text at engineering scale — serverless compute with an event-horizon aesthetic.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/modal.

Tokens

Modal's decoded design system: background #000000, text #DDFFDC, accent #7FEE64, link #DEF0DD, primary #DDFFDC; type scale h1 64px / h2 54px / body 16px; 8px spacing base; 4px base radius. The single interactive/action color is #7FEE64 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

RoleValue
bg#000000
surface#0D0F0D
border#212621
text#DDFFDC
text_muted#899E88
primary#DDFFDC
accent#7FEE64
link#DEF0DD
secondary#677D64
button_bg#7FEE64
button_text#000000

Using these colors

Typography

Spacing

Radii

Per-section tokens (18)

Export: DESIGN.md

# Modal — Design System

> dark, modern, high, tailwind

Modal renders AI infrastructure as a night launchpad: Goga headlines at 64px/500 over pure black, neon accent traces, pill CTAs, and 42px stat numerals that read like telemetry. The dark canvas makes GPU talk feel cinematic while Inter keeps the body text at engineering scale — serverless compute with an event-horizon aesthetic.

## Colors

| Role | Value |
|------|-------|
| bg | `#000000` |
| surface | `#0D0F0D` |
| border | `#212621` |
| text | `#DDFFDC` |
| text_muted | `#899E88` |
| primary | `#DDFFDC` |
| accent | `#7FEE64` |
| link | `#DEF0DD` |
| secondary | `#677D64` |
| button_bg | `#7FEE64` |
| button_text | `#000000` |

**Using these colors**

- **Action color** `#7FEE64` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `accent`, `button_bg` are all `#7FEE64` — one role, not several (your action color).
- **accent** `#7FEE64` — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
- **primary** `#DDFFDC` — ≈ the text color — a foreground/text color, not an action color (action = #7FEE64).
- **link** `#DEF0DD` — reads as a neutral UI color, not a link accent — verify against the reference (action = #7FEE64).
- **secondary** `#677D64` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

## Typography

- Heading: **Goga** _(free fallback: Newsreader)_
- Body: **Inter**
- h1: 64px
- h2: 54px
- body: 16px

> **Fonts —** Goga may be proprietary — safe free fallback: Newsreader (Google Fonts). Inter — free, on Google.

## Spacing
- base unit: 8px
- scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

## Radius
- base: 4px
- button: 9999px

## Primary button
- bg `#7FEE64` · text `#000000` · radius 9999px

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.

Export: Tailwind v4 (@theme)

@theme {
  /* action color #7FEE64 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --color-bg: #000000;
  --color-surface: #0D0F0D;
  --color-border: #212621;
  --color-text: #DDFFDC;
  --color-text-muted: #899E88;
  --color-primary: #DDFFDC;  /* ≈ the text color — a foreground/text color, not an action color (action = #7FEE64). */
  --color-accent: #7FEE64;  /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
  --color-link: #DEF0DD;  /* reads as a neutral UI color, not a link accent — verify against the reference (action = #7FEE64). */
  --color-secondary: #677D64;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --color-button-bg: #7FEE64;  /* primary-button fill — the main call-to-action color. */
  --color-button-text: #000000;
  /* fonts: Goga may be proprietary — safe free fallback: Newsreader (Google Fonts). Inter — free, on Google. */
  --font-heading: "Goga", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-h1: 64px;
  --text-h2: 54px;
  --text-body: 16px;
  --radius-base: 4px;
  --radius-button: 9999px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
}

Export: CSS variables

:root {
  /* action color #7FEE64 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --bg: #000000;
  --surface: #0D0F0D;
  --border: #212621;
  --text: #DDFFDC;
  --text-muted: #899E88;
  --primary: #DDFFDC;  /* ≈ the text color — a foreground/text color, not an action color (action = #7FEE64). */
  --accent: #7FEE64;  /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
  --link: #DEF0DD;  /* reads as a neutral UI color, not a link accent — verify against the reference (action = #7FEE64). */
  --secondary: #677D64;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --button-bg: #7FEE64;  /* primary-button fill — the main call-to-action color. */
  --button-text: #000000;
  --font-heading: "Goga", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 4px;
  --radius-button: 9999px;
}
/* fonts: Goga may be proprietary — safe free fallback: Newsreader (Google Fonts). Inter — free, on Google. */