<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Lambda
tagline: Near-black #0b0b0b canvas, Suisse Intl at 117px over Suisse Intl Mono body, with a signature indigo #6236f4 and cream #e7e6d9 — sharp-cornered superintelligence-cloud infra.
updated_at: 2026-05-29T21:44:03.151Z
published_at: 2026-05-29T21:44:03.151Z
author: webdesignhot
source_url: https://lambda.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, dev-tools]
tags: [dark, sans, mono, technical, gpu, infra]
preview_swatch: ['#0b0b0b', '#6236f4', '#e7e6d9']
related: [runpod, modal, anthropic]
description: 'Lambda''s marketing surface reads like a superintelligence-cloud control panel — a near-black `#0b0b0b` canvas carrying warm-grey `#b0afa6` body type and cream `#e7e6d9` headlines, with Suisse Intl driving a 117px h1 at weight 600 over a Suisse Intl Mono body that lends every paragraph the cadence of a terminal log. The brand runs two CTA registers in tandem: a cream `#e7e6d9` solid button (LAUNCH GPU INSTANCE) for the self-serve path and a signature indigo `#6236f4` button (TALK TO OUR TEAM) for the enterprise path — both with sharp 0px corners and uppercase labels. Everything is square-edged, mono-bodied, and performance-forward: where RunPod dresses GPU cloud in friendly purple-on-slate chrome, Lambda strips the surface to a near-black infra console where the indigo is the only chromatic event and the cream is the only voice that shouts.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: cream
  muted: text-muted
  border: border
  ring: brand
colors:
  bg: '#0b0b0b'                  # canvas — near-black (NOT pure #000, warmed a hair)
  bg-deep: '#000000'             # true-black overlay / dialog backdrop
  surface: '#141414'            # slightly-lifted content card on near-black
  surface-elevated: '#1f1f1f'   # nested card / hover surface
  text: '#b0afa6'               # primary running-text — warm desaturated grey
  text-strong: '#d3d2c5'        # emphasised paragraphs, brighter mono body
  text-muted: '#82817e'         # captions, fine-print, disabled labels
  cream: '#e7e6d9'              # headline + cream-CTA color — the warm-white voice
  on-cream: '#0b0b0b'           # near-black text on the cream solid CTA
  brand: '#6236f4'              # signature Lambda indigo — primary brand voltage
  brand-link: '#815ef8'         # lightened indigo for inline links on near-black
  brand-deep: '#29246a'         # darkest indigo — outline / tinted edge
  on-brand: '#e7e6d9'           # cream text on the indigo CTA
  accent-green: '#37cd8f'       # rare success / "live" status accent
  border: '#42413e'             # warm-grey hairline on cards and buttons
  border-strong: '#565552'      # heavier divider / input border
  shadow-color: 'rgba(0, 0, 0, 0.45)'   # near-black ambient shadow on dark
  success: '#37cd8f'            # success / online
  warning: '#e7e6d9'            # warning leans cream — no amber in palette
  danger: '#815ef8'             # destructive leans indigo — brand-tinted, no red
  info: '#815ef8'               # informational accent — lightened indigo

typography:
  display:
    family: '"Suisse Intl", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [400, 500, 600]
  body:
    family: '"Suisse Intl Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  mono:
    family: '"Suisse Intl Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 117, weight: 600, lineHeight: 0.98, tracking: '-0.03em',  family: display, notes: 'Homepage h1 — measured live at 117px' }
    display-lg:      { size: 72,  weight: 600, lineHeight: 1.0,  tracking: '-0.025em', family: display, notes: 'h2 — measured live at 72px' }
    h1:              { size: 56,  weight: 600, lineHeight: 1.04, tracking: '-0.02em',  family: display }
    h2:              { size: 40,  weight: 600, lineHeight: 1.08, tracking: '-0.015em', family: display }
    h3:              { size: 28,  weight: 500, lineHeight: 1.15, tracking: '-0.01em',  family: display }
    h4:              { size: 22,  weight: 500, lineHeight: 1.2,  tracking: '0',        family: display }
    title-mono:      { size: 18,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body, notes: 'mono sub-head / card title' }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body, notes: 'default running-text — Suisse Intl Mono, measured live' }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13,  weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    cta-label:       { size: 14,  weight: 500, lineHeight: 1.0,  tracking: '0.06em',   family: body, transform: uppercase, notes: 'uppercase CTA / button label' }
    eyebrow:         { size: 12,  weight: 500, lineHeight: 1.4,  tracking: '0.12em',   family: body, transform: uppercase }
    caption:         { size: 12,  weight: 400, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    code:            { size: 14,  weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }

radius:
  none: 0
  micro: 0
  sm: 0
  md: 0
  lg: 0
  xl: 0
  pill: 0

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:
    backgroundColor: cream
    textColor: on-cream
    rounded: none
    padding: '14px 24px'
    height: 48
    transform: uppercase
    use: 'self-serve CTA — "LAUNCH GPU INSTANCE", cream solid'
  button-brand:
    backgroundColor: brand
    textColor: on-brand
    rounded: none
    padding: '14px 24px'
    height: 48
    transform: uppercase
    use: 'enterprise CTA — "TALK TO OUR TEAM", signature indigo'
  button-outline:
    backgroundColor: transparent
    textColor: cream
    border: '1px solid #42413e'
    rounded: none
    padding: '14px 24px'
    height: 48
    transform: uppercase
    use: 'secondary action — outline on near-black'
  button-text:
    backgroundColor: transparent
    textColor: brand-link
    rounded: none
    transform: uppercase
    use: 'inline text link CTA with chevron'
  card:
    backgroundColor: surface
    textColor: text
    border: '1px solid #42413e'
    rounded: none
    padding: 32
    use: 'standard feature / spec card on near-black'
  card-spec:
    backgroundColor: bg
    textColor: text
    border: '1px solid #42413e'
    rounded: none
    padding: 24
    use: 'GPU / cluster spec card — mono data rows'
  badge:
    backgroundColor: transparent
    textColor: text-muted
    border: '1px solid #42413e'
    rounded: none
    padding: '4px 10px'
    transform: uppercase
    use: 'square mono tag — region / GPU type'
  badge-live:
    backgroundColor: transparent
    textColor: accent-green
    border: '1px solid #42413e'
    rounded: none
    padding: '4px 10px'
    transform: uppercase
    use: '"AVAILABLE" / "LIVE" status badge — green dot'
  input:
    backgroundColor: bg
    textColor: text
    border: '1px solid #42413e'
    rounded: none
    padding: '12px 14px'
    height: 48
  top-nav:
    backgroundColor: bg
    textColor: text
    height: 64
    border-bottom: '1px solid #42413e'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — opacity-only transitions'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none — depth comes from 1px #42413e hairlines, not shadow'
  ambient: 'rgba(0, 0, 0, 0.45) 0 1px 2px'
  modal: 'rgba(0, 0, 0, 0.45) 0 24px 48px -12px'

accessibility:
  contrast-text-on-bg: 8.93        # AAA — #b0afa6 on #0b0b0b
  contrast-cream-on-bg: 15.67      # AAA — #e7e6d9 on #0b0b0b
  contrast-oncream-on-cream: 15.67 # AAA — #0b0b0b on #e7e6d9 (cream CTA)
  contrast-oncream-on-brand: 4.99  # AA  — #e7e6d9 on #6236f4 (indigo CTA)
  contrast-brand-on-bg: 3.14       # AA-large only — #6236f4 on #0b0b0b
  contrast-link-on-bg: 4.58        # AA  — #815ef8 on #0b0b0b (lightened link)
  contrast-strong-on-bg: 12.93     # AAA — #d3d2c5 on #0b0b0b
  focus-ring: '2px solid #815ef8 offset 2px — lightened indigo for visibility on near-black'
  reduced-motion-honored: true

dark-mode: 'this IS the only theme — Lambda ships a single near-black marketing surface; no light variant offered'

lineage:
  summary: |
    Lambda's marketing aesthetic sits in the **performance-infra**
    lineage — the near-black-canvas, mono-bodied, square-cornered
    register that signals raw compute rather than friendly developer
    onboarding. Where RunPod dresses GPU cloud in approachable
    purple-on-slate chrome and Modal leans bright and illustrative,
    Lambda strips the surface to a near-black `#0b0b0b` console and
    lets a single signature indigo `#6236f4` carry every chromatic
    event. The Suisse family is the brand's defining typographic
    choice: Suisse Intl (the Swiss neo-grotesque from Swiss Typefaces)
    runs the display register at 117px / 600 with tight negative
    tracking, while Suisse Intl Mono runs the *entire body* — not just
    code — so every paragraph reads with the cadence of a terminal log
    and the precision of a spec sheet. The cream `#e7e6d9` is the
    only warm-white in the palette: it carries headlines, the
    self-serve "LAUNCH GPU INSTANCE" CTA, and nothing decorative.
    Sharp 0px corners on every surface — buttons, cards, inputs,
    badges — reject the rounded-friendliness of consumer SaaS and
    align Lambda with the hardware-and-infra severity of a company
    selling H100 clusters and "the superintelligence cloud."
  influences:
    - name: Swiss Typefaces (Suisse Intl)
      role: The Suisse Intl + Suisse Intl Mono superfamily defines the display-and-mono typographic identity.
      url: https://www.swisstypefaces.com
    - name: Vercel
      role: Near-black monolithic marketing canvas with single-accent discipline and sharp geometry.
      url: https://vercel.com
    - name: Linear
      role: Near-black-on-near-black surface discipline; hairline borders over shadow for depth.
      url: https://linear.app
    - name: NVIDIA
      role: Hardware-infra severity and GPU-cluster performance register the brand sells against.
      url: https://www.nvidia.com
    - name: International Typographic Style
      role: Swiss-grid rationalism — uppercase labels, square geometry, type-as-structure.
      url: https://en.wikipedia.org/wiki/International_Typographic_Style
---

## 1. Visual Theme & Atmosphere

Lambda's marketing surface reads like a superintelligence-cloud control panel rendered in the dark. The canvas is near-black `#0b0b0b` — not pure `#000`, but warmed by a single point so the surface reads as a deliberate material rather than a void. Across it runs warm-grey `#b0afa6` body type set in **Suisse Intl Mono**, which means every paragraph — not just code — carries the fixed-width cadence of a terminal log. The effect is immediate: this is a brand selling raw compute, and the typography itself behaves like a spec sheet.

The defining tension is between two warm-whites and one cold chromatic event. Cream `#e7e6d9` is the headline voice — Suisse Intl (the Swiss neo-grotesque) blown up to a measured **117px at weight 600** with tight negative tracking, dominating the hero band. The signature indigo `#6236f4` is the only saturated color in the system, and Lambda spends it deliberately: it appears as the "TALK TO OUR TEAM" enterprise CTA and almost nowhere else. The cream and the indigo are the two things that shout; everything else recedes into the near-black.

Lambda runs **two CTA registers side by side**, and this is the brand's most distinctive move. The self-serve path gets a cream `#e7e6d9` solid button ("LAUNCH GPU INSTANCE") with near-black text — high-contrast, immediate, "go." The enterprise path gets the indigo `#6236f4` button ("TALK TO OUR TEAM") with cream text. Both are uppercase, both have sharp 0px corners. The pairing tells the whole business model at a glance: spin up a GPU instance yourself, or talk to a human about a cluster.

Everything is square-edged. There is no radius anywhere in the system — buttons, cards, inputs, and badges all terminate in 90-degree corners. Depth comes not from shadow or rounding but from 1px warm-grey `#42413e` hairlines that divide the near-black into panels. This is the International Typographic Style translated to a dark GPU-cloud console: rational, gridded, uppercase-labeled, with type doing the structural work that decoration does elsewhere.

The register throughout is technical, infra-forward, and performance-obsessed. Where consumer SaaS rounds its corners and softens its palette to feel approachable, Lambda sharpens everything to feel *fast and exact*. The brand sells the superintelligence cloud, and the surface looks like the thing you'd see when you SSH into it.

**Key Characteristics:**
- Near-black `#0b0b0b` canvas (warmed a hair off pure black) — the only theme; no light variant.
- Warm-grey `#b0afa6` body type, cream `#e7e6d9` headlines — two-temperature monochrome.
- **Suisse Intl Mono runs the entire body**, not just code — every paragraph reads terminal-cadenced.
- Suisse Intl display at 117px / 600 with tight negative tracking for the hero h1.
- Signature indigo `#6236f4` as the sole saturated color — spent on the enterprise CTA, almost nothing else.
- Dual-CTA system: cream solid (self-serve "LAUNCH GPU INSTANCE") + indigo (enterprise "TALK TO OUR TEAM").
- Sharp **0px corners everywhere** — buttons, cards, inputs, badges. No radius in the system.
- Depth from 1px `#42413e` warm-grey hairlines, not from shadow.
- Uppercase labels with positive tracking — CTA labels, eyebrows, badges.
- Swiss-grid rationalism: square geometry, type-as-structure, monochrome restraint.

## 2. Color Palette & Roles

### Canvas
- **Bg / Canvas** (`#0b0b0b`): Near-black warmed a single point off pure black — the brand's only surface. Every band sits on it.
- **Bg Deep** (`#000000`): True black for dialog backdrops and overlay scrims.
- **Surface** (`#141414`): Slightly-lifted card surface for definition against the near-black canvas.
- **Surface Elevated** (`#1f1f1f`): Nested cards and hover states — one step brighter.

### Text
- **Text** (`#b0afa6`): Warm desaturated grey — all default running-text in Suisse Intl Mono. 8.93 contrast on bg (AAA).
- **Text Strong** (`#d3d2c5`): Brighter mono body for emphasised paragraphs. 12.93 on bg (AAA).
- **Text Muted** (`#82817e`): Captions, fine-print, disabled labels.
- **Cream** (`#e7e6d9`): The warm-white headline voice — Suisse Intl display, and the cream solid CTA fill. 15.67 on bg (AAA).

### Brand
- **Brand / Indigo** (`#6236f4`): Signature Lambda indigo (rgb 98, 54, 244) — the sole saturated color; the "TALK TO OUR TEAM" enterprise CTA. 3.14 on bg (AA-large / non-text use).
- **On-Brand** (`#e7e6d9`): Cream text on the indigo CTA — 4.99 contrast (AA).
- **Brand Link** (`#815ef8`): Lightened indigo for inline links and focus rings — readable on near-black at 4.58 (AA).
- **Brand Deep** (`#29246a`): Darkest indigo for tinted outlines and edge accents.

### Interactive
- **Link** (`#815ef8`): Inline body links use lightened indigo for legibility on near-black; underlined.
- **Focus Ring** (`#815ef8`): 2px solid lightened-indigo ring with 2px offset.
- **Selected** (`rgba(98, 54, 244, 0.25)`): Selected-text background — indigo tint.
- **Disabled** (`#82817e`): Disabled labels and tertiary chrome.

### Borders
- **Border** (`#42413e`): Warm-grey 1px hairline — the system's primary depth cue, on cards, buttons, inputs, badges. 1.93 on bg (decorative, not text).
- **Border Strong** (`#565552`): Heavier divider for input edges and table rows.

### Accent
Lambda's accent system is deliberately near-empty — the indigo is the only chromatic event, and a single green appears for status.
- **Accent Green** (`#37cd8f`): Rare "AVAILABLE" / "LIVE" status accent — region online, instance ready. 9.65 on bg (AAA).

### Shadow
Lambda almost entirely avoids shadow — depth is hairline-driven. Where shadow appears it is true-black at low alpha.
- **Shadow Color** (`rgba(0, 0, 0, 0.45)`): Ambient shadow on dialogs and modals only.

### Semantic
- **Success** (`#37cd8f`): Confirmation, "online", "available" status.
- **Warning** (`#e7e6d9`): Warning leans cream — no amber exists in the palette; the warm-white carries caution.
- **Danger** (`#815ef8`): Destructive actions lean lightened-indigo — Lambda has no red; the brand keeps even errors on-palette.
- **Info** (`#815ef8`): Informational notices use lightened indigo.

## 3. Typography Rules

### Font Family
- **Display**: `"Suisse Intl", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif`. The Swiss neo-grotesque from Swiss Typefaces — every headline, hero, and section head.
- **Body**: `"Suisse Intl Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. The monospace cut — runs the *entire body*, not just code. This is the brand's signature: paragraphs read like terminal output.
- **Mono**: Same `"Suisse Intl Mono"` chain — code blocks, GPU specs, region identifiers, terminal output share the body face.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Suisse Intl | 117 | 600 | 0.98 | -0.03em | — | Homepage h1 — measured live at 117px |
| display-lg | Suisse Intl | 72 | 600 | 1.0 | -0.025em | — | h2 — measured live at 72px |
| h1 | Suisse Intl | 56 | 600 | 1.04 | -0.02em | — | Major section heads |
| h2 | Suisse Intl | 40 | 600 | 1.08 | -0.015em | — | Sub-section heads |
| h3 | Suisse Intl | 28 | 500 | 1.15 | -0.01em | — | Card / feature titles |
| h4 | Suisse Intl | 22 | 500 | 1.2 | 0 | — | Small headings |
| title-mono | Suisse Intl Mono | 18 | 500 | 1.4 | 0 | — | Mono sub-head / spec-card title |
| body-lg | Suisse Intl Mono | 18 | 400 | 1.55 | 0 | — | Hero subhead, lead paragraphs |
| body | Suisse Intl Mono | 16 | 400 | 1.55 | 0 | — | Default running-text — measured live |
| body-sm | Suisse Intl Mono | 14 | 400 | 1.5 | 0 | — | Footer body, fine-print |
| label | Suisse Intl Mono | 13 | 500 | 1.4 | 0.02em | — | Form labels, list labels |
| cta-label | Suisse Intl Mono | 14 | 500 | 1.0 | 0.06em | uppercase | CTA / button label |
| eyebrow | Suisse Intl Mono | 12 | 500 | 1.4 | 0.12em | uppercase | Section eyebrows |
| badge | Suisse Intl Mono | 12 | 500 | 1.4 | 0.08em | uppercase | Tags, region / GPU badges |
| caption | Suisse Intl Mono | 12 | 400 | 1.4 | 0.02em | — | Captions |
| code | Suisse Intl Mono | 14 | 400 | 1.6 | 0 | — | Code blocks, terminal output |

### Principles
- **Suisse Intl Mono carries the body, not just code.** This is the brand's defining typographic decision — every paragraph reads with terminal cadence and spec-sheet precision.
- **Display weight stays at 600; sub-heads at 500.** Suisse Intl never goes bolder than 600, even at 117px.
- **Negative tracking is essential at display sizes** (-0.03em at hero, easing toward 0 as size drops).
- **Uppercase + positive tracking carries structure.** CTA labels (0.06em), eyebrows (0.12em), and badges (0.08em) all uppercase — Swiss-style labeling.
- **Body line-height stays at 1.55.** Generous for a monospace face so the fixed-width body stays readable.
- **Two temperatures only.** Cream `#e7e6d9` for headlines, warm-grey `#b0afa6` for body. No third text color except muted captions.
- **The 117px hero is load-bearing.** It's the largest single element on the page and the brand's signature scale moment — don't shrink it below ~96px even on smaller desktops.
- **Mono everywhere technical.** Region codes, GPU model numbers, hourly rates, and CLI snippets all share the body face — there's no separate "code font" because the body *is* the code font.

## 4. Component Stylings

### Buttons (4 variants)

**`button-primary`** — The cream self-serve CTA. Background `#e7e6d9`, text `#0b0b0b`, Suisse Intl Mono 14px / 500 / uppercase / 0.06em tracking, padding 14px × 24px, height 48px, **0px radius**. Carries "LAUNCH GPU INSTANCE." Hover: subtle dim to ~92% opacity over 150ms; no lift, no shadow. The highest-contrast element on the page (15.67 on bg).

**`button-brand`** — The signature indigo enterprise CTA. Background `#6236f4`, text `#e7e6d9` cream, same typography and 0px radius as primary. Carries "TALK TO OUR TEAM." Hover: brightens a step over 150ms. This is the only place the indigo appears as a solid fill — spend it nowhere else.

**`button-outline`** — Secondary action on near-black. Transparent background, cream `#e7e6d9` text, 1px solid `#42413e` border, 0px radius, same padding. Hover: border brightens to `#565552`, text stays cream.

**`button-text`** — Inline text-link CTA with a trailing chevron. No background, lightened-indigo `#815ef8` text, uppercase. Hover: underline appears; chevron nudges 2px right.

### Cards

**`card`** — Standard feature / content card. Background `#141414` (lifted one step off canvas), 1px solid `#42413e` hairline border, **0px radius**, 32px padding. Title in Suisse Intl h3 cream, body in Suisse Intl Mono `#b0afa6`. Hover: border brightens to `#565552`; surface lifts to `#1f1f1f`. No shadow — the hairline does the work.

**`card-spec`** — GPU / cluster spec card. Background `#0b0b0b` (sits flush on canvas), 1px solid `#42413e` border, 0px radius, 24px padding. Contents are mono data rows — `H100 SXM · 80GB HBM3 · $2.49/hr` — label-left in `#82817e`, value-right in cream. Region/availability shown via a `badge-live`.

### Badges & Tags

**`badge`** — Square mono tag. Transparent background, `#82817e` text, 1px solid `#42413e` border, **0px radius**, padding 4px × 10px, Suisse Intl Mono 12px / 500 / uppercase / 0.08em. Used for region codes ("US-EAST-1"), GPU types ("H100"), and categories. No pill rounding — square corners on every tag.

**`badge-live`** — Status badge. Transparent background, `#37cd8f` green text + leading green dot, 1px solid `#42413e` border, 0px radius. Carries "AVAILABLE" / "LIVE" / "ONLINE." The single place green appears.

### Inputs / Forms

**`input`** — Square text input. Background `#0b0b0b`, text `#b0afa6`, 1px solid `#42413e` border, **0px radius**, padding 12px × 14px, height 48px. Placeholder in `#82817e`. Focus: border switches to `#815ef8` lightened-indigo + 2px ring.

**`input-focused`** — 2px solid `#815ef8` ring with 2px offset; border brightens to indigo. No glow, no rounding.

### Navigation

**`top-nav`** — Near-black nav bar pinned to top, 64px tall, background `#0b0b0b`, 1px solid `#42413e` bottom hairline. Lambda wordmark left (cream), horizontal menu center in Suisse Intl Mono 14px / 500 / uppercase `#b0afa6` (Products, Pricing, Research, Company, Docs), right side: cream `button-primary` ("LAUNCH GPU INSTANCE") + indigo `button-brand` ("TALK TO OUR TEAM"). Mobile: hamburger right-aligned.

### Decorative

**`spec-table`** — Dense GPU / cluster spec table. Header row in Suisse Intl Mono 12px / 500 / uppercase / `#82817e`; body rows mono with cream values and warm-grey labels. 1px `#42413e` row dividers, 0px radius, no zebra striping — the hairlines carry the structure.

**`hairline-divider`** — 1px `#42413e` horizontal rule between bands. The brand's primary section-separation device in place of shadow or background-shift.

## 5. Layout Principles

### Spacing System
Base unit **4px**. Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`. Section vertical rhythm runs 96–128px on the near-black canvas; card padding 32px (feature) and 24px (spec). The generous section spacing lets the 117px hero breathe.

### Grid & Container
Max content width **1280px** centered, with a 720px prose measure for body-heavy passages. Hero typically uses a single full-bleed column for the 117px headline; feature grids run 3-up at desktop, spec/GPU grids 4-up. The grid is strict and rational — Swiss-style — with everything aligning to the 4px base.

### Whitespace Philosophy
Lambda runs moderately generous whitespace around dense technical content. The near-black canvas does a lot of the "breathing room" work — empty space *is* dark space, and the eye rests on it. Headlines get extra air; spec tables get tight, scannable rows.

### Section Cadence
Near-black hero band (117px headline + dual CTA) → hairline divider → product/feature grid → GPU pricing / spec band → research or benchmark band → customer-logo strip (monochrome) → pre-footer dual-CTA band → near-black footer. Every transition is a hairline, not a color shift — the page stays one continuous near-black surface top to bottom.

## 6. Shapes & Radius Scale

| Tier | Token | Value | Use |
|---|---|---|---|
| None | none | 0px | Everything — the system's default and only corner |
| Micro | micro | 0px | Reserved — kept at 0 for system consistency |
| Standard | sm | 0px | Buttons, inputs |
| Comfortable | md | 0px | Cards |
| Large | lg | 0px | Featured panels |
| Featured | xl | 0px | Hero shells |
| Pill | pill | 0px | Badges — square, not rounded |

Lambda is a **fully sharp-cornered system**: every radius token resolves to 0px. There is no rounding anywhere — buttons, cards, inputs, badges, and avatars all terminate in 90-degree corners. This is a deliberate brand stance: square geometry reads as hardware, infra, and precision; rounding would soften the "raw compute" register into consumer SaaS friendliness. When building for Lambda, treat any radius > 0 as off-brand.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No border, no shadow | Body text, hero, top nav, footer |
| 1 — Hairline | 1px `#42413e` border | Cards, inputs, badges, spec tables, dividers |
| 2 — Lifted surface | `#141414` background + hairline | Feature cards |
| 3 — Elevated | `#1f1f1f` background + hairline | Nested cards, hover states |
| 4 — Modal | True-black backdrop + `rgba(0,0,0,0.45)` shadow | Dialogs, dropdowns (the only shadow use) |

### Shadow Philosophy
Lambda is a **hairline-depth system, not a shadow system.** On a near-black canvas, drop shadows barely register, so the brand uses 1px warm-grey `#42413e` borders to define every panel edge and a one-step background lift (`#141414` → `#1f1f1f`) for hover. Shadow appears only on true-modal layers (dialogs, dropdowns) at low alpha against a black backdrop. The result is flat, gridded, and console-like — depth is implied by borders and tonal steps, never by blur. Avoid adding shadows to cards or buttons; it breaks the flat-infra register.

## 8. Interaction & Motion

### Easing Curves
- **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for color, opacity, border transitions.
- **Emphasized ease**: `cubic-bezier(0.16, 1, 0.3, 1)` — scroll reveals, modal entrances.

### Duration Buckets
- **Fast (150ms)**: Color, opacity, border-color transitions; button hover dim.
- **Standard (240ms)**: Surface lifts, dropdown opens, hover state changes.
- **Slow (320ms)**: Modal entrance, scroll-in reveals.

### Per-Component Micro-States
- **Cream button hover**: Dims to ~92% opacity over 150ms — no lift, no shadow.
- **Indigo button hover**: Brightens one step over 150ms.
- **Outline button hover**: Border `#42413e` → `#565552`; text stays cream.
- **Card hover**: Border brightens to `#565552`; surface lifts `#141414` → `#1f1f1f` over 240ms. No transform.
- **Text-link hover**: Underline appears; chevron nudges 2px right.
- **Input focus**: 2px `#815ef8` ring expands; border switches to indigo.
- **Badge**: Static — no hover state (informational).

### Page Transitions
Standard browser navigation. Section-on-scroll reveals are 320ms fade-in-up with emphasized ease, kept subtle to preserve the static-console feel.

### Reduced Motion
Honored — all transforms and chevron nudges removed, transitions reduced to 100ms opacity-only, scroll reveals disabled (content appears immediately).

## 9. Accessibility & A11y

### Contrast Pairs
- **Text on bg**: `#b0afa6` on `#0b0b0b` = **8.93** — AAA at every size (body running-text).
- **Cream on bg**: `#e7e6d9` on `#0b0b0b` = **15.67** — AAA (headlines).
- **Text-strong on bg**: `#d3d2c5` on `#0b0b0b` = **12.93** — AAA (emphasised body).
- **On-cream on cream CTA**: `#0b0b0b` on `#e7e6d9` = **15.67** — AAA (cream button label).
- **On-brand on indigo CTA**: `#e7e6d9` on `#6236f4` = **4.99** — AA at normal text / AAA at large.
- **Link on bg**: `#815ef8` on `#0b0b0b` = **4.58** — AA (lightened indigo for inline links).
- **Green on bg**: `#37cd8f` on `#0b0b0b` = **9.65** — AAA (status badges).
- **Brand-fill caution**: `#6236f4` on `#0b0b0b` = **3.14** — passes AA only for large text / non-text UI. Never use raw `#6236f4` for small body text on the canvas; use `#815ef8` for links instead.

### Focus Indicators
2px solid `#815ef8` lightened-indigo ring with 2px offset. The lightened indigo (4.58 on bg) registers on near-black where the raw `#6236f4` would not. Square ring — no rounding — to match the sharp-corner system.

### ARIA Patterns
- **Buttons**: Native `<button>`; icon-only carry `aria-label`.
- **Dual CTAs**: Both have descriptive labels; the cream and indigo distinction is reinforced by text, not color alone ("LAUNCH GPU INSTANCE" vs "TALK TO OUR TEAM").
- **Spec table**: `<table>` with `<thead>`, `<th scope="col">`, and `<th scope="row">` for GPU names. Hourly rates use `aria-label` for correct pronunciation.
- **Status badges**: Green is reinforced with the text "AVAILABLE" / "LIVE" — never color-only.
- **Navigation**: `<nav aria-label="Primary">`.
- **Code blocks**: `<pre><code>` with `aria-label`.

### Keyboard Navigation
Tab order follows reading order. Skip-link to `<main>`. Both CTAs are reachable and visibly focused (indigo ring). Modal traps focus + Escape closes.

### Screen Reader Hints
Hourly rates use `aria-label="two dollars forty-nine per hour"`. Region/GPU badges read their literal text. The cream-vs-indigo CTA distinction is conveyed through label text, never relying on color perception.

### Reduced Motion Handling
Honored — transforms removed, transitions to 100ms opacity-only, scroll reveals disabled.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hamburger nav (right-aligned); hero h1 117 → ~44px; dual CTAs stack full-width; spec tables horizontal-scroll; grids 1-up |
| Tablet | 640–1024px | Top nav tightens; feature grids 2-up; spec grids 2-up; hero h1 ~72px |
| Desktop | 1024–1280px | Full top-nav with both CTAs; 3-up feature grids; 4-up spec grids; hero h1 96–117px |
| Wide | > 1280px | Same as desktop with more breathing room; max content 1280px |

### Touch Targets
Both CTAs min 48 × 48px (already 48px tall). Spec-table rows extend to 56px touch height on mobile. Inputs 48px.

### Collapsing Strategy
Top nav collapses to a right-aligned hamburger below 1024px; the dual CTAs move into the menu sheet, stacked full-width with cream above indigo. The 117px hero scales down aggressively (toward ~44px on mobile) while preserving the 600 weight and negative tracking. Spec tables retain font-size and gain horizontal scroll with a sticky first column.

### Image Behavior
Code blocks and spec tables stay at fixed font-size with horizontal scroll on mobile. Customer logos render monochrome (`#82817e`) and retain native widths. No corner-rounding on any image container — square crops only.

## 11. Content & Voice

### Tone
**Technical, infra-forward, performance-obsessed.** Lambda writes for ML engineers and research teams buying GPU compute at scale. The voice is precise and unsoftened — "The Superintelligence Cloud," "LAUNCH GPU INSTANCE," concrete specs and hourly rates over marketing fluff. Closer to NVIDIA's hardware register than to a friendly consumer SaaS. Headlines state the compute value prop; body copy supports with GPU models, cluster sizes, regions, and per-hour pricing.

### Microcopy Patterns
- **CTA verbs (uppercase)**: "LAUNCH GPU INSTANCE", "TALK TO OUR TEAM", "VIEW PRICING", "READ THE DOCS", "RESERVE A CLUSTER". Imperative, all-caps, no exclamation.
- **Eyebrows (uppercase)**: "ON-DEMAND GPUS", "RESERVED CLUSTERS", "INFERENCE", "RESEARCH", "PRICING".
- **Spec callouts**: Model-first — "H100 SXM · 80GB HBM3", "8× H100 · 3.2Tbps", "$2.49/hr".
- **Feature copy**: Performance-first ("Spin up an H100 in seconds", "Multi-node clusters with InfiniBand", "Pay by the hour").

### Empty States
Instance dashboard: "No active instances — launch your first GPU instance to get started" with an indigo text link. Plain and functional, never whimsical.

### Error Messages
**Pattern**: status text + what-to-try, in `#815ef8` (the brand keeps even errors on-palette — no red). Example: "GPU type unavailable in this region — try US-EAST-1 or reserve a cluster."

### Success Confirmations
Toast in cream over `#141414` surface with a green `#37cd8f` status dot. "Instance launched — connect with `ssh ubuntu@<ip>`." Mono throughout. Auto-dismiss 4s.

## 12. Dark Mode & Theming

Lambda is **dark-only** — there is no light variant. The near-black `#0b0b0b` canvas is the brand's single, permanent surface; the marketing site, the console, and the docs all share it. This is not a "dark mode" in the toggle sense — it is *the* mode. The two-temperature monochrome (warm-grey body, cream headlines) and the single indigo accent are calibrated specifically for near-black, and there is no corresponding light palette to switch to.

If a light surface is ever required (rare — e.g. a printable invoice), invert to cream `#e7e6d9` background with `#0b0b0b` text and keep the indigo `#6236f4` unchanged for CTAs. But the marketing and product surfaces never leave the near-black canvas.

## 13. Lineage & Influences

Lambda's marketing aesthetic sits squarely in the **performance-infra** lineage — the near-black-canvas, mono-bodied, square-cornered register that signals raw compute rather than friendly developer onboarding. Where RunPod dresses GPU cloud in approachable purple-on-slate chrome and Modal leans bright and illustrative, Lambda strips the surface to a near-black `#0b0b0b` console and lets a single signature indigo `#6236f4` carry every chromatic event. The brand reads as the thing you see when you SSH into a cluster: dark, gridded, exact.

The Suisse family is the defining typographic choice. Suisse Intl — the Swiss neo-grotesque from Swiss Typefaces — runs the display register at 117px / 600 with tight negative tracking, while Suisse Intl Mono runs the *entire body*, not just code. That single decision (mono body, not mono-code) is what most distinguishes Lambda's type voice: every paragraph reads with terminal cadence. The cream `#e7e6d9` is the only warm-white in the palette and the only voice that shouts; the sharp 0px corners on every surface reject consumer-SaaS rounding and align the brand with the hardware-and-infra severity of a company selling H100 clusters and "the superintelligence cloud." The visual ancestry is International Typographic Style — uppercase labels, square geometry, type-as-structure — translated to a dark GPU-cloud control panel.

- **Swiss Typefaces (Suisse Intl)** — The Suisse Intl + Suisse Intl Mono superfamily defines the display-and-mono identity. https://www.swisstypefaces.com
- **Vercel** — Near-black monolithic marketing canvas with single-accent discipline and sharp geometry. https://vercel.com
- **Linear** — Near-black-on-near-black surface discipline; hairline borders over shadow. https://linear.app
- **NVIDIA** — Hardware-infra severity and GPU-cluster performance register. https://www.nvidia.com
- **International Typographic Style** — Swiss-grid rationalism: uppercase labels, square geometry, type-as-structure. https://en.wikipedia.org/wiki/International_Typographic_Style

## 14. Do's and Don'ts

### Do
- Anchor every surface on near-black `#0b0b0b` — warmed a hair off pure black, never lighter.
- Run the **body in Suisse Intl Mono** — paragraphs, not just code. This is the brand's signature.
- Set the hero h1 in Suisse Intl at ~117px / 600 with tight negative tracking.
- Use cream `#e7e6d9` for headlines and the self-serve "LAUNCH GPU INSTANCE" solid CTA.
- Use warm-grey `#b0afa6` for all running body text.
- Reserve the indigo `#6236f4` for the enterprise "TALK TO OUR TEAM" CTA — the one place it appears solid.
- Keep **0px corners on everything** — buttons, cards, inputs, badges.
- Use 1px `#42413e` hairlines for depth and section division, not shadow.
- Uppercase CTA labels, eyebrows, and badges with positive letter-spacing.
- Use lightened indigo `#815ef8` for inline links and focus rings (legibility on near-black).
- Run the dual-CTA pairing (cream self-serve + indigo enterprise) on hero and pre-footer bands.
- Keep the page one continuous near-black surface — separate bands with hairlines, not color shifts.

### Don't
- Don't lighten the canvas off near-black or switch to a light marketing band. Lambda is one dark surface top to bottom.
- Don't round any corner. Radius is 0 across the entire system — square geometry is the brand.
- Don't use a proportional sans for the body — Suisse Intl Mono runs the body; proportional type breaks the terminal cadence.
- Don't introduce a second accent color. The indigo is the only chromatic event (green is functional status only).
- Don't use raw `#6236f4` for small body text on the canvas — it fails contrast (3.14). Use `#815ef8` for links.
- Don't add drop shadows to cards or buttons — hairlines carry depth; shadow breaks the flat-infra register.
- Don't bold Suisse Intl beyond 600, even at hero scale.
- Don't add amber or red for warnings/errors — Lambda keeps semantics on-palette (cream / lightened-indigo, plus green for success).
- Don't shrink the hero h1 below ~96px on desktop — the 117px scale is a signature brand moment.
- Don't use sentence-case or title-case for CTA labels — they are uppercase with tracking.
- Don't swap the cream CTA and indigo CTA roles — cream = self-serve, indigo = enterprise; the pairing tells the business model.

## 15. Agent Prompt Guide

### Quick Color Reference
```
Bg / Canvas:     #0b0b0b (near-black, warmed off pure black)
Surface:         #141414 (lifted card)
Surface Elevated:#1f1f1f (nested card / hover)
Border:          #42413e (1px warm-grey hairline)
Text:            #b0afa6 (warm-grey running body — Suisse Intl Mono)
Text Strong:     #d3d2c5 (emphasised body)
Text Muted:      #82817e (captions, fine-print)
Cream:           #e7e6d9 (headlines + cream solid CTA)
On-Cream:        #0b0b0b (near-black text on cream CTA)
Brand / Indigo:  #6236f4 (signature — enterprise "TALK TO OUR TEAM" CTA)
On-Brand:        #e7e6d9 (cream text on indigo CTA)
Link:            #815ef8 (lightened indigo — inline links, focus ring)
Status Green:    #37cd8f (rare "AVAILABLE" / "LIVE" badge)
```

### Example Component Prompts

1. "Create a Lambda hero band on a near-black `#0b0b0b` canvas. Set a giant cream `#e7e6d9` headline in Suisse Intl at 117px / 600 with -0.03em tracking ('The Superintelligence Cloud'), a warm-grey `#b0afa6` Suisse Intl Mono subhead at 18px, and a dual-CTA row: a cream `#e7e6d9` solid button with near-black text ('LAUNCH GPU INSTANCE') next to an indigo `#6236f4` button with cream text ('TALK TO OUR TEAM'). Both uppercase, 0px corners, 48px tall."

2. "Design a GPU spec card on `#0b0b0b`. 1px solid `#42413e` border, 0px radius, 24px padding. Title 'H100 SXM' in Suisse Intl h3 cream `#e7e6d9`. Below it, three mono data rows in Suisse Intl Mono: label-left in `#82817e`, value-right in cream — '80GB HBM3', '3.35 TB/s', '$2.49/hr'. Top-right: a square 'AVAILABLE' badge with a green `#37cd8f` dot, 1px `#42413e` border, 0px corners."

3. "Build a dense GPU pricing table on near-black `#0b0b0b`. Header row in Suisse Intl Mono 12px / 500 / uppercase / `#82817e` (GPU, VRAM, INTERCONNECT, $/HR, REGION). Body rows in Suisse Intl Mono: GPU model and rate in cream `#e7e6d9`, secondary cells in warm-grey `#b0afa6`. 1px `#42413e` row dividers, no zebra striping, 0px corners throughout."

4. "Compose a top nav: 64px tall `#0b0b0b` bar with a 1px solid `#42413e` bottom hairline. Cream 'Lambda' wordmark left, horizontal menu center in Suisse Intl Mono 14px / 500 / uppercase `#b0afa6` ('PRODUCTS', 'PRICING', 'RESEARCH', 'DOCS'), and right side: a cream `#e7e6d9` 'LAUNCH GPU INSTANCE' button beside an indigo `#6236f4` 'TALK TO OUR TEAM' button."

5. "Design a 3-up feature grid on `#0b0b0b`. Each card: `#141414` surface, 1px solid `#42413e` border, 0px radius, 32px padding. Title in Suisse Intl h3 cream `#e7e6d9`, body in Suisse Intl Mono 16px `#b0afa6`. Hover: border brightens to `#565552`, surface lifts to `#1f1f1f`. No shadow, no rounding."

6. "Compose a pre-footer CTA band on `#0b0b0b`. Centered Suisse Intl h2 cream headline at 56px ('Reserve a cluster.'), a warm-grey `#b0afa6` mono subhead, and the dual-CTA pairing — cream `#e7e6d9` 'LAUNCH GPU INSTANCE' + indigo `#6236f4` 'TALK TO OUR TEAM', both uppercase with 0px corners. Separate from the section above with a single 1px `#42413e` hairline."

### Iteration Guide
1. Start with near-black `#0b0b0b` — warmed a hair off pure black. Everything sits on this one surface.
2. Set the **body in Suisse Intl Mono**, not a proportional sans. If paragraphs don't read terminal-cadenced, you've missed the brand's core move.
3. Make the hero h1 enormous — ~117px Suisse Intl / 600 with tight negative tracking. This is the signature scale moment.
4. Run the dual CTAs together: cream solid (self-serve) + indigo (enterprise). The pairing tells the business model.
5. Keep every corner at 0px. If you find a radius, remove it — square geometry is non-negotiable.
6. Use hairlines, not shadows. Depth comes from 1px `#42413e` borders and one-step surface lifts.
7. Spend the indigo `#6236f4` once per band, on the enterprise CTA. Use `#815ef8` for links — raw indigo fails contrast as body text.
8. Keep semantics on-palette — no amber, no red. Green `#37cd8f` for status; cream and lightened-indigo for everything else.

---

*Theme-toggle audit: score=0, signals=[dark-only — single near-black surface, no light variant]*