DESIGN.md inspired by Black Forest Labs

---
name: Black Forest Labs
tagline: Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout.
updated_at: 2026-05-29T21:43:46.909Z
published_at: 2026-05-29T21:43:46.909Z
author: webdesignhot
source_url: https://bfl.ai
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [ai, saas]
tags: [light, minimal, sans, monochrome, technical]
preview_swatch: ['#ffffff', '#07130e', '#b9b5d0']
related: [vercel, linear, stripe]
description: 'Black Forest Labs — the research lab behind the FLUX image-generation models — wears the frontier-AI uniform: stark monochrome, near-zero chroma, and a single typeface carrying the entire identity. The canvas is pure white `#ffffff`, body and headline type is a near-black `#07130e` that carries the faintest green tint (a green-shifted ink rather than neutral black), and every glyph on the page is set in **Instrument Sans** — display and body alike — held at weight 500. The hero inverts: a dark band with the H1 rendered in white at 90px, a dramatic contrast moment against the otherwise white page. There is no colored CTA, no brand-colour button fill, no gradient wash — the brand identity is the *type itself* (big Instrument Sans at a confident medium weight) and the stark black-on-white / white-on-black contrast, full stop. Corners are sharp (0px radius across the production site), reinforcing the technical, restrained register of a frontier research lab that signals seriousness through reduction rather than decoration. Where consumer AI products lean into glow, gradient, and saturated accent, Black Forest Labs withholds all of it — the page reads like a research paper''s cover, not a product launch.'


# 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
  muted: text-secondary
  border: border
  ring: text

themes:
  default: light
  available: [light]
  switch-via: 'No theme switch shipped — light-only canvas with inverted dark hero/footer bands rendered inline, not as a toggleable theme'

colors:
  light:
    bg: '#ffffff'                  # page canvas — pure white, the dominant ground
    bg-ink: '#07130e'              # inverted dark band — hero, footer, feature spotlights; near-black green-tint
    bg-pure-black: '#000000'       # true black — borders, hairline rules, rare full-contrast edges
    surface: '#ffffff'             # card / panel surface — same as canvas; separation via border, not fill
    surface-ink: '#07130e'         # inverted card surface on dark bands
    surface-muted: '#f5f5f4'       # faintest off-white inset — quiet section bands, code fills
    text: '#07130e'                # primary text + headlines — near-black with a faint green cast
    text-on-ink: '#ffffff'         # text on the dark hero/footer band — pure white
    text-secondary: '#4a544f'      # supporting copy, captions — muted green-grey
    text-tertiary: '#7d847f'       # meta, timestamps, faint labels
    text-faint: '#a8ada9'          # placeholder, disabled
    text-on-ink-soft: '#b9b5d0'    # secondary text on dark band — the dusty lavender-grey accent
    brand: '#07130e'               # brand mark colour — near-black green-tint; the identity is contrast, not hue
    accent: '#b9b5d0'              # dusty lavender-grey — the single restrained accent (FLUX wordmark wash)
    accent-soft: 'rgba(185, 181, 208, 0.16)'   # soft lavender wash, rare
    on-brand: '#ffffff'            # white text/icon on near-black brand fill
    link: '#07130e'                # inline link — near-black, distinguished by underline not colour
    link-hover: '#000000'          # link hover deepens to true black; underline persists
    focus: '#07130e'               # keyboard focus outline — near-black ring
    cta-bg: '#07130e'              # primary CTA fill — near-black (inverted), never a colour
    cta-text: '#ffffff'            # CTA text on near-black
    cta-bg-secondary: '#ffffff'    # secondary CTA fill — white
    cta-text-secondary: '#07130e'  # secondary CTA text — near-black
    cta-bg-on-ink: '#ffffff'       # CTA on dark band inverts to white fill
    cta-text-on-ink: '#07130e'     # near-black text on white CTA over dark band
    border: '#000000'              # default border — true black hairline (probe-confirmed)
    border-soft: 'rgba(7, 19, 14, 0.12)'   # quieter separation, near-black at 12%
    border-on-ink: 'rgba(255, 255, 255, 0.16)'  # hairline on dark bands
    shadow-ambient: 'rgba(7, 19, 14, 0.04)'
    shadow-card: 'rgba(7, 19, 14, 0.06)'
    shadow-deep: 'rgba(7, 19, 14, 0.12)'
    scrim: 'rgba(7, 19, 14, 0.60)'
    success: '#1f6f4a'             # muted forest green — status/confirmation, kept low-chroma
    success-soft: 'rgba(31, 111, 74, 0.10)'
    warning: '#9a6a1f'             # muted amber — advisory, rare
    warning-soft: 'rgba(154, 106, 31, 0.10)'
    danger: '#9a2b2b'              # muted brick — errors, destructive actions
    danger-soft: 'rgba(154, 43, 43, 0.10)'

typography:
  display:
    family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [500, 600, 700]
    opentype-features: ['kern', 'liga']
  body:
    family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 500, 600]
    opentype-features: ['kern', 'liga']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
    opentype-features: ['liga', 'calt', 'tnum']
  scale:
    display-hero:    { size: 90, weight: 500, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-xl:      { size: 72, weight: 500, lineHeight: 1.02, tracking: '-0.028em', family: display }
    display-lg:      { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.024em', family: display }
    h1:              { size: 40, weight: 500, lineHeight: 1.10, tracking: '-0.02em',  family: display }
    h2:              { size: 32, weight: 500, lineHeight: 1.15, tracking: '-0.016em', family: display }
    h3:              { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.01em',  family: display }
    h4:              { size: 20, weight: 500, lineHeight: 1.30, tracking: '-0.005em', family: display }
    h5:              { size: 18, weight: 500, lineHeight: 1.40, tracking: '0',        family: display }
    eyebrow:         { size: 13, weight: 500, lineHeight: 1.40, tracking: '0.06em',   family: body, transform: uppercase }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-md:         { size: 16, weight: 500, lineHeight: 1.55, tracking: '0',        family: body }
    body-regular:    { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.50, tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.40, tracking: '0.02em',   family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.40, tracking: '0',        family: body }
    button:          { size: 16, weight: 500, lineHeight: 1.20, tracking: '0',        family: body }
    button-sm:       { size: 14, weight: 500, lineHeight: 1.20, tracking: '0',        family: body }
    nav-link:        { size: 15, weight: 500, lineHeight: 1.20, tracking: '0',        family: body }
    code-inline:     { size: 14, weight: 500, lineHeight: 1.40, tracking: '0',        family: mono }
    code-block:      { size: 14, weight: 400, lineHeight: 1.60, tracking: '0',        family: mono }

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

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:
    bg: '#07130e'
    color: '#ffffff'
    radius: 0
    padding: '12px 20px'
    height: 48
    font: 'Instrument Sans 16px / 500'
    hover-bg: '#000000'
    use: 'Primary action — near-black fill, white text, sharp corners. Get started, Try FLUX, Contact. Inverted contrast, never a colour.'
  button-secondary:
    bg: '#ffffff'
    color: '#07130e'
    border: '1px solid #000000'
    radius: 0
    padding: '12px 20px'
    height: 48
    font: 'Instrument Sans 16px / 500'
    hover-bg: '#07130e'
    hover-color: '#ffffff'
    use: 'Outlined twin — white fill, true-black border. Hover inverts to near-black fill. Read the paper, Documentation.'
  button-on-ink:
    bg: '#ffffff'
    color: '#07130e'
    radius: 0
    padding: '12px 20px'
    height: 48
    font: 'Instrument Sans 16px / 500'
    use: 'Primary CTA placed on the dark hero/footer band — inverts to white fill with near-black text.'
  button-ghost:
    bg: 'transparent'
    color: '#07130e'
    radius: 0
    padding: '12px 16px'
    height: 48
    font: 'Instrument Sans 16px / 500'
    hover-underline: true
    use: 'Quiet third action — nav links, footer secondaries, in-card actions. Underline on hover.'
  card:
    bg: '#ffffff'
    border: '1px solid #000000'
    radius: 0
    padding: '24px'
    shadow: 'none'
    use: 'Default panel — white fill, true-black hairline border, sharp corners, no shadow. Border alone carries separation.'
  card-ink:
    bg: '#07130e'
    color: '#ffffff'
    border: 'none'
    radius: 0
    padding: '32px'
    use: 'Inverted spotlight card on dark bands — near-black fill, white text. Model cards, feature highlights.'
  input:
    bg: '#ffffff'
    color: '#07130e'
    radius: 0
    height: 48
    padding: '12px'
    border: '1px solid #000000'
    font: 'Instrument Sans 16px / 400'
    placeholder-color: '#a8ada9'
    focus-border: '#07130e'
    focus-ring: '0 0 0 2px rgba(7, 19, 14, 0.25)'
    use: 'Form fields, prompt box — true-black border, sharp corners, near-black focus ring.'
  badge:
    bg: '#07130e'
    color: '#ffffff'
    radius: 0
    padding: '4px 10px'
    font: 'Instrument Sans 12px / 500 / 0.02em'
    use: 'Status / model tag — NEW, FLUX.1, BETA. Near-black fill, white caps, sharp corners.'
  badge-outline:
    bg: 'transparent'
    color: '#07130e'
    border: '1px solid #000000'
    radius: 0
    padding: '4px 10px'
    font: 'Instrument Sans 12px / 500'
    use: 'Outlined tag — version chips, category labels.'
  nav-top:
    bg: '#ffffff'
    height: 64
    border-bottom: '1px solid rgba(7, 19, 14, 0.12)'
    use: 'Sticky top nav — white fill, faint near-black bottom hairline, wordmark left, links + CTA right.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  link-hover: 'underline appears 150ms; colour holds near-black'
  button-hover: 'bg invert 240ms standard, no transform'
  card-hover: 'border deepens / faint shadow 240ms — no lift'
  reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppress, opacity-only fades'

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

shadows:
  none: 'none'
  ambient: 'rgba(7, 19, 14, 0.04) 0 1px 2px'
  card: 'rgba(7, 19, 14, 0.06) 0 2px 8px'
  deep: 'rgba(7, 19, 14, 0.12) 0 12px 32px -8px'
  scrim: 'rgba(7, 19, 14, 0.60)'

accessibility:
  contrast-text-on-bg: 16.9                  # #07130e on #ffffff — AAA at all sizes
  contrast-text-on-ink: 16.9                 # #ffffff on #07130e — AAA at all sizes
  contrast-text-secondary-on-bg: 8.1         # #4a544f on #ffffff — AAA at body sizes
  contrast-text-tertiary-on-bg: 4.6          # #7d847f on #ffffff — AA at body sizes
  contrast-accent-on-ink: 6.9                # #b9b5d0 on #07130e — AA / AAA-large for secondary copy on dark
  focus-ring: '2px near-black ring rgba(7, 19, 14, 0.25) + outline-offset; high contrast on white'
  reduced-motion-honored: true
  touch-target-min: 44
  prose-line-length: 'capped at 720px / ~70 characters'

dark-mode: none                              # Light-only canvas; the dark hero/footer bands are inline inversions, not a theme

lineage:
  summary: 'Black Forest Labs sits squarely in the **frontier-AI-lab monochrome** lineage — the visual register pioneered by research labs that signal seriousness through reduction. The DNA traces three sources: the **single-typeface, contrast-only identity** that Vercel and Linear made the developer-tool default (one face carrying the brand, accent colour withheld from action fills), the **research-paper-cover austerity** of academic AI labs (OpenAI''s early monochrome, Anthropic''s restraint, DeepMind''s technical sobriety) where the page reads like a publication rather than a product, and the **stark black-on-white / white-on-black inversion** of Swiss-International typographic tradition filtered through a modern grotesque. The single deliberate departure is the dusty lavender-grey `#b9b5d0` that washes the FLUX wordmark — the one chromatic concession in an otherwise zero-chroma system, and even that is desaturated almost to grey. The brand''s thesis: a frontier image-generation lab does not need to *show* colour to prove it can generate it; the restraint is the flex.'
  influences:
    - name: 'Instrument Sans (Google Fonts, open-source)'
      role: 'The single typeface carrying display and body — a modern grotesque with subtle warmth, held at weight 500 across the system'
      url: 'https://fonts.google.com/specimen/Instrument+Sans'
    - name: 'Vercel'
      role: 'Frontier dev-tool monochrome — single-family discipline, accent withheld from CTA fills, contrast-pill primary'
      url: 'https://vercel.com'
    - name: 'Linear'
      role: 'Contrast-only identity — inverted text-colour CTAs against canvas, near-zero chroma neutral system'
      url: 'https://linear.app'
    - name: 'Anthropic'
      role: 'Research-lab restraint — sober, publication-grade marketing surface for a frontier AI lab'
      url: 'https://www.anthropic.com'
    - name: 'OpenAI'
      role: 'Early monochrome research-lab aesthetic — black-on-white austerity, technical register over product gloss'
      url: 'https://openai.com'
    - name: 'Swiss International Typographic Style'
      role: 'Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected'
      url: 'https://en.wikipedia.org/wiki/International_Typographic_Style'
---

## 1. Visual Theme & Atmosphere

Black Forest Labs — the research group behind the FLUX family of image-generation models — presents itself with the visual austerity of a frontier AI lab rather than a consumer product. The page is overwhelmingly white `#ffffff`, the type is a near-black `#07130e` that carries the faintest green cast (a green-shifted ink, not a neutral black), and *every glyph on the site* is set in a single typeface: **Instrument Sans**, display and body alike, held at a confident medium weight of 500. There is no second face, no serif, no system fallback doing real work. The identity is carried by the type and by the stark black-on-white contrast — nothing else.

The signature move is the **inverted hero band**. Against the otherwise white page, the hero is a dark surface (`#07130e` near-black) with the H1 rendered in pure white at a dramatic 90px. This single inversion is the page's most charged moment: a black field with a giant white headline, the kind of contrast that reads as a statement of intent rather than a marketing flourish. The same inversion recurs in the footer and in occasional feature spotlights — dark bands punched into a white page, each one carrying white type. The page's rhythm is therefore *brightness-based*: white → dark → white, never colour-based.

What's most distinctive is the **near-total absence of colour**. There is no colored CTA — the primary button is near-black `#07130e` on white (or, on a dark band, inverted to white on near-black). There is no gradient wash, no glow, no saturated accent doing the consumer-AI thing of signalling "magic." The one chromatic concession is a dusty lavender-grey `#b9b5d0` that washes the FLUX wordmark and surfaces faintly as secondary text on dark bands — and even that is desaturated almost to neutral. For a lab whose entire product is *generating colour and image*, the marketing restraint is the flex: it doesn't need to show colour to prove it can make it.

The geometry reinforces the register. Corners are **sharp — 0px radius across the production site**. Buttons, cards, inputs, badges: all hard-edged rectangles. In a SaaS landscape where 8–12px rounded corners are the default friendliness signal, Black Forest Labs' square corners read as technical, exact, unsentimental — the geometry of a spec sheet or a research-paper figure rather than a marketing page. Combined with true-black `#000000` hairline borders and the absence of shadow, the surfaces feel *drawn* rather than *lifted*.

The atmospheric vocabulary that captures the feeling: *stark, monochrome, frontier-lab, research-paper-cover, near-zero-chroma, green-tint-ink, inverted-hero, white-on-black-on-white, single-face, Instrument-medium, sharp-cornered, hairline-ruled, shadowless, technical, restrained, austere, publication-grade.* Every surface lands like it was designed by a research lab that decided its website should look like the cover of a paper it would actually publish — confident through reduction, serious through subtraction.

**Key Characteristics**

- Pure white `#ffffff` canvas — the dominant ground; never cream, never warm, never tinted
- Near-black `#07130e` body and headline type — a green-shifted ink, not a neutral black
- Inverted dark hero band — `#07130e` field with the H1 in pure white at 90px, a dramatic contrast moment
- A single typeface — **Instrument Sans** for display *and* body, held at weight 500 throughout
- No colored CTA, no gradient, no glow — the primary action is near-black-on-white (or inverted on dark)
- Sharp 0px corners everywhere — buttons, cards, inputs, badges; the geometry of a spec sheet
- True-black `#000000` hairline borders carry separation; shadows are near-absent
- One restrained accent — dusty lavender-grey `#b9b5d0` on the FLUX wordmark; almost desaturated to grey
- Brightness-based section rhythm — white → dark → white, never colour-based alternation
- Frontier-AI-lab register — publication-grade austerity, technical and unsentimental

## 2. Color Palette & Roles

### Primary

- **Canvas** (`#ffffff`): the page background — pure white, the dominant ground. The single light tone; any cream or warm tint would break the frontier-lab austerity and shift the brand toward Notion/Mintlify territory.
- **Body Text** (`#07130e`): primary text and headlines — near-black with a faint green cast. Probe-confirmed as `rgb(7, 19, 14)`. The green tint is subtle but intentional: a green-shifted ink rather than a neutral `#000`, lending warmth-without-warmth to the otherwise cold page.
- **Ink Band** (`#07130e`): the inverted dark surface — hero, footer, feature spotlights. The same near-black value as the body text, used as a *field* that carries white type.
- **Pure Black** (`#000000`): true black — reserved for borders, hairline rules, and rare full-contrast edges. Distinct from the green-tinted `#07130e` ink, kept neutral for crisp geometric lines.

### Brand

- **Brand** (`#07130e`): the brand mark colour — near-black green-tint. The identity is built on *contrast*, not hue; the brand "colour" is functionally the near-black ink against white (and white against the near-black band). There is no saturated brand hue.
- **On-Brand** (`#ffffff`): white text or icon on a near-black brand fill — the inverted half of the contrast pair.

### Accent

- **Accent / Lavender-Grey** (`#b9b5d0`): the single chromatic concession — a dusty lavender-grey washing the FLUX wordmark and surfacing faintly as secondary text on dark bands. Desaturated almost to neutral; it reads as "barely violet" rather than as a colour with intent. Never fills a button, never grounds a section.
- **Accent Soft** (`rgba(185, 181, 208, 0.16)`): a soft lavender wash for the rare quiet emphasis — a highlight strip, a hover tint on a dark surface.

### Interactive

- **Link** (`#07130e`): inline links — near-black, *distinguished by underline rather than colour*. The page withholds blue entirely; links read as text with an underline affordance.
- **Link Hover** (`#000000`): hover deepens to true black; the underline persists. The colour shift is near-imperceptible — the underline is the real signal.
- **Focus** (`#07130e` ring): keyboard focus is a near-black outline ring — high contrast on white, no colour cue needed.
- **Disabled** (`#a8ada9` text): disabled controls drop to the faint neutral, no colour cue.

### Neutral Scale

A compact green-grey ramp does all hierarchy work without introducing a hue:

- **Pure White** (`#ffffff`) — canvas, card surface
- **Surface Muted** (`#f5f5f4`) — faintest off-white inset, quiet section bands, code fills
- **Text Faint** (`#a8ada9`) — placeholder, disabled
- **Text Tertiary** (`#7d847f`) — meta, timestamps, faint labels
- **Text Secondary** (`#4a544f`) — supporting copy, captions; a muted green-grey
- **Text** (`#07130e`) — primary text, headlines; near-black green-tint
- **Pure Black** (`#000000`) — borders, hairline rules

### Surface & Borders

- **Canvas / Surface** (`#ffffff`) — page and card share the same white; separation comes from the border, not a fill change
- **Surface Ink** (`#07130e`) — inverted card / band surface
- **Surface Muted** (`#f5f5f4`) — quiet inset band, code-block fill
- **Border Default** (`#000000`) — true-black hairline (probe-confirmed); the dominant separation device
- **Border Soft** (`rgba(7, 19, 14, 0.12)`) — quieter separation, near-black at 12%; used for the nav bottom rule
- **Border On-Ink** (`rgba(255, 255, 255, 0.16)`) — hairline on dark bands

### Shadow Colors

Shadows are near-absent. Where a faint lift is used at all, it's tinted with the green-black ink rather than neutral black:

- `rgba(7, 19, 14, 0.04) 0 1px 2px` — ambient (rare)
- `rgba(7, 19, 14, 0.06) 0 2px 8px` — card (rare; border usually does the work)
- `rgba(7, 19, 14, 0.12) 0 12px 32px -8px` — deep, reserved for overlay UI
- `rgba(7, 19, 14, 0.60)` — modal scrim

### Semantic

Semantic colours are kept low-chroma to preserve the monochrome register — muted, desaturated, never bright:

- **Success** (`#1f6f4a` on `rgba(31, 111, 74, 0.10)`): a muted forest green — status, confirmation. Tonally on-brand with the green-tint ink.
- **Warning** (`#9a6a1f` on `rgba(154, 106, 31, 0.10)`): a muted amber — advisory, rate limits. Rare.
- **Danger** (`#9a2b2b` on `rgba(154, 43, 43, 0.10)`): a muted brick red — errors, destructive actions. Desaturated to avoid a bright alarm against the austere page.

## 3. Typography Rules

### Font Family

**Primary (display + body)**: `"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Instrument Sans** is an open-source modern grotesque from Google Fonts — a clean, slightly warm sans with open apertures and a low-contrast monoline construction. Black Forest Labs uses it for *everything*: the 90px hero H1, the body copy, the nav links, the captions. The single-family discipline is the entire typographic identity — there is no display/body split, no serif, no system fallback carrying real weight.

**The weight-500 signature**: the probe confirms the page holds **weight 500** at both the H1 (90px / 500) and the body (16px / 500). This is the brand's most distinctive typographic decision. Most systems set body at 400 and push headlines to 600–800; Black Forest Labs flattens the system to a single confident medium weight. The result is a page that reads as *even-toned and deliberate* — no shouty bold, no thin elegance, just a steady 500 everywhere. (Display can climb to 600–700 for special emphasis, and body can drop to 400 for long-form prose, but the default register is 500.)

**Mono companion**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. A system monospace stack used only for code, API examples, model identifiers, and CLI references. Black Forest Labs does not ship a proprietary mono — the system stack is sufficient for the rare code context.

**OpenType features**: Instrument Sans renders with `kern` and `liga` on. The system is restrained — no stylistic alternates, no decorative ligatures. The type does its work through size, weight-500 consistency, and tight negative tracking on display sizes.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Instrument Sans | 90px | 500 | 1.0 | -0.03em | Hero H1 — probe-confirmed; white on dark band |
| display-xl | Instrument Sans | 72px | 500 | 1.02 | -0.028em | Major section opener |
| display-lg | Instrument Sans | 56px | 500 | 1.05 | -0.024em | Sub-section opener |
| h1 | Instrument Sans | 40px | 500 | 1.10 | -0.02em | Page title |
| h2 | Instrument Sans | 32px | 500 | 1.15 | -0.016em | Section H2 |
| h3 | Instrument Sans | 24px | 500 | 1.25 | -0.01em | Card / article H3 |
| h4 | Instrument Sans | 20px | 500 | 1.30 | -0.005em | Sub-card heading |
| h5 | Instrument Sans | 18px | 500 | 1.40 | 0 | Inline emphasis heading |
| eyebrow | Instrument Sans | 13px | 500 | 1.40 | 0.06em | Section pre-label, uppercase |
| body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph |
| body-md | Instrument Sans | 16px | 500 | 1.55 | 0 | Default body — probe-confirmed 16px / 500 |
| body-regular | Instrument Sans | 16px | 400 | 1.55 | 0 | Long-form prose body (lighter variant) |
| body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense copy |
| label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label |
| caption | Instrument Sans | 12px | 500 | 1.40 | 0.02em | Image caption, meta |
| nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav link |
| button | Instrument Sans | 16px | 500 | 1.20 | 0 | Default button copy |
| button-sm | Instrument Sans | 14px | 500 | 1.20 | 0 | Compact button |
| code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline `code` references |
| code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content |

### Principles

- **Single-family discipline.** Instrument Sans for display, body, captions, labels, nav, buttons. The mono stack appears only in code. There is no second face anywhere in the system.
- **Weight 500 is the system default.** The probe confirms 500 at both H1 (90px) and body (16px). This even medium weight is the brand's typographic signature — no thin/bold contrast, just a steady deliberate tone.
- **Hero scales enormous.** The H1 lands at 90px — among the largest in the catalog — and lives on the inverted dark band in white. The size *is* the drama; it doesn't need a heavier weight to land.
- **Negative tracking compresses with size.** `-0.03em` at 90px, tightening through the display range, easing to near-zero at body sizes.
- **Body holds at 16px.** Probe-confirmed default body; long-form prose drops to weight 400 for reading comfort, but UI body stays at 500.
- **Uppercase eyebrows with wide tracking.** Section pre-labels use 13px / 500 / 0.06em uppercase — the one place tracking opens up, providing a quiet structural signal.
- **No italic in display.** Instrument Sans is set roman across all hierarchy; italics carry quoted titles in body only.
- **Mono is system-only and rare.** Unlike Vercel's proprietary Geist Mono, Black Forest Labs uses the system mono stack for the occasional code context — the type identity is the sans, not the mono.

## 4. Component Stylings

### Buttons

**Primary** — `#07130e` near-black fill, white text at 16px / 500, **0px radius (sharp corners)**, 12×20px padding, ~48px height. Hover deepens to true `#000000`. **No transform, no scale** — the inversion-contrast carries the affordance. Use case: *Get started*, *Try FLUX*, *Contact us* — the dominant CTA. Never a colour; the action is the near-black-on-white contrast itself.

**Secondary (Outlined)** — `#ffffff` fill, near-black text at 16px / 500, 1px true-black `#000000` border, 0px radius, 12×20px padding. Hover *inverts* to a near-black `#07130e` fill with white text. Use case: *Read the paper*, *Documentation*, *Learn more* — paired adjacently with the primary.

**On-Ink (Primary on dark band)** — When a CTA sits on the dark hero or footer band, it inverts: `#ffffff` white fill, near-black `#07130e` text, 0px radius. The same contrast logic, flipped for the dark ground.

**Ghost (Quiet)** — Transparent fill, near-black text at 16px / 500, 0px radius, 12×16px padding. Hover reveals an underline. Use case: nav links, footer secondaries, in-card tertiary actions.

### Cards

**Default Card** — `#ffffff` white fill, 1px true-black `#000000` hairline border, **0px radius (sharp corners)**, 24px padding, **no shadow**. The border alone carries separation — the card reads as *drawn* on the page rather than *lifted* above it. Used across feature grids, model directories, research-paper listings.

**Ink Card** — `#07130e` near-black fill, white text, no border, 0px radius, 32px padding. The inverted spotlight card on dark bands — used for model cards (FLUX.1, FLUX.1.1), feature highlights, and any element that needs to read as a charged statement.

### Inputs / Forms

**Text Input / Prompt Box** — `#ffffff` fill, near-black text at 16px / 400, 1px true-black `#000000` border, **0px radius**, ~48px height, 12px padding. Placeholder at `#a8ada9` faint. On focus: border holds near-black and a 2px near-black ring appears (`rgba(7, 19, 14, 0.25) 0 0 0 2px`). No brand-colour focus — the focus signal is the high-contrast near-black ring on white.

**Select** — Same shape with a chevron at right at tertiary-text colour. Sharp corners throughout.

### Badges, Tags, Pills

**Status Badge (Filled)** — `#07130e` near-black fill, white caps at 12px / 500 / 0.02em, 0px radius, 4×10px padding. Use case: `NEW`, `FLUX.1`, `BETA`. Sharp-cornered rectangle, not a pill.

**Tag Chip (Outlined)** — Transparent fill, near-black text at 12px / 500, 1px true-black border, 0px radius, 4×10px padding. Use case: version chips, category labels, model variants.

### Navigation

**Top Nav** — `#ffffff` white fill, ~64px height, 1px bottom hairline at `rgba(7, 19, 14, 0.12)` (faint near-black). Wordmark left in Instrument Sans (with the lavender-grey `#b9b5d0` wash on the FLUX mark). Center/right: nav links (Models, Research, API, Company) at 15px / 500 ghost style. Far right: a single near-black primary CTA (*Get started* / *Try FLUX*). No mega-menu — the nav is flat and minimal.

**Footer** — `#07130e` near-black inverted band, white type, generous vertical padding. Multi-column link grid in 14px / 400 with the lavender-grey accent on the wordmark. The footer mirrors the hero's inversion — the page opens and closes on dark bands.

## 5. Layout Principles

### Spacing System

- Base unit: **4px**
- Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`
- Section padding (vertical): 96–128px for major bands; 48–64px between content sections; 24–32px between blocks
- Card internal padding: 24px on default cards; 32px on ink spotlight cards
- Inter-element gutters: 24px in 2-up grids; 16px in dense 3-up

### Grid & Container

- Page max width: **1280px** for marketing/editorial sections
- Reading column caps at **720px** even inside the 1280px container — line length calibrated for ~70 characters
- Inverted dark bands (hero, footer, spotlights) run full-bleed edge-to-edge with content centered inside the 1280px container
- Hero treatment: full-bleed `#07130e` dark band, 90px white H1 (often left-aligned or centered), generous vertical space above and below

### Whitespace Philosophy

The page leans editorial — generous whitespace, large type, room to breathe. The austerity is *spatial* as much as chromatic: the absence of colour and shadow is matched by an absence of clutter. Sections are spaced widely (96px+ vertical), the hero gives its 90px headline ample air, and dense data layouts are avoided in favour of clear, paper-like composition. The whitespace does what colour does on other sites — it directs attention.

### Section Cadence

A typical Black Forest Labs page runs on *brightness inversion* rather than colour:

1. **Hero** — full-bleed `#07130e` dark band, 90px / 500 white H1, body deck below, single near-black/white CTA
2. **Models Grid** — white background, sharp-cornered cards with true-black borders, model names + descriptions
3. **Spotlight Band** — inverted `#07130e` dark band with white ink-card highlighting a flagship model (FLUX.1.1)
4. **Research / Paper Listing** — white background, hairline-ruled rows or bordered cards, publication-grade layout
5. **API / Developer Band** — white or muted off-white with a code block in the system mono
6. **Closing CTA** — often on a dark band, single dominant action
7. **Footer** — `#07130e` inverted band, white type, multi-column links

The alternation is *brightness-based* (white → dark → white → dark), never colour-based — the page's entire dynamism comes from inverting black and white.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 0px | Dividers, focus indicators |
| Small | 0px | Badges, tag chips |
| Standard | 0px | Buttons, inputs, code chips |
| Comfortable | 0px | Cards, panels |
| Large | 0px | Large surfaces, spotlight cards |
| Featured | 0px | Modals, hero panels |
| Pill | 9999px | Reserved — used only if a fully-rounded chip is ever needed (rare/absent on production) |

Black Forest Labs' signature shape is **the sharp corner — 0px radius across the entire production site** (probe-confirmed). Buttons, cards, inputs, and badges are all hard-edged rectangles. In a SaaS world where 8–12px rounding is the default friendliness signal, the square corners read as technical, exact, and unsentimental — the geometry of a spec sheet, a research-paper figure, or a terminal window rather than a marketing page. The `pill: 9999` tier exists in the scale as a fallback but is effectively unused; the brand commits to sharp edges as an identity decision.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow, white bg | Page canvas, body sections |
| 1 — Hairline | 1px `#000000` border | Cards, panels, inputs, badges |
| 2 — Inversion | `#07130e` dark fill against white page | Hero band, footer, ink spotlight cards |
| 3 — Faint Card | 1px border + `rgba(7, 19, 14, 0.06) 0 2px 8px` | Rare hover lift; border usually suffices |
| 4 — Overlay | `rgba(7, 19, 14, 0.12) 0 12px 32px -8px` + scrim `rgba(7, 19, 14, 0.60)` | Modals, dropdowns |

### Shadow Philosophy

Black Forest Labs is a **borderless-shadow brand** — elevation is communicated almost entirely through the **true-black hairline border** and through **brightness inversion**, not through shadow. A card lifts because it has a sharp black outline on white, not because it casts a soft drop shadow. The most dramatic "elevation" on the page isn't a shadow at all — it's the inverted dark band, where a near-black field reads as a different *plane* from the white page purely through value contrast.

Where a faint shadow is used (a rare hover lift, a true overlay), it's tinted with the green-black ink `rgba(7, 19, 14, …)` rather than neutral black, keeping the whole system tonally coherent. The discipline is "if you can see a glow, it's wrong" — depth is geometric (border + inversion), not atmospheric (shadow + glow). This is the frontier-lab register: surfaces are drawn, not floated.

## 8. Interaction & Motion

### Easing Curves

- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour/inversion transitions
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier; modal entry, band reveals

### Duration Buckets

| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Link underline appear, focus ring fade-in |
| Standard | 240ms | Button inversion, card border deepen |
| Slow | 320ms | Section reveal, modal entry |

### Per-Component Recipes

- **Primary button hover**: bg deepens `#07130e` → `#000000` over 240ms standard. **No transform, no scale.**
- **Secondary button hover**: *inverts* — white fill → near-black `#07130e` fill, near-black text → white, over 240ms. The full inversion is the hover signal.
- **Link hover**: underline appears over 150ms; colour holds near-black (deepens imperceptibly to `#000000`). The underline is the entire signal.
- **Card hover**: border deepens / a faint green-black shadow appears over 240ms. **No translate, no lift.**
- **Input focus**: 2px near-black ring fades in over 150ms; border holds.
- **Section reveal**: dark/white bands fade in over 320ms ease-emphasized when entering viewport. One-shot per section.

### Page Transitions

Page navigation is a quiet cross-fade with the sticky nav holding static. Anchor scrolling uses smooth-scroll. The motion register matches the visual register: restrained, no flourish, nothing that calls attention to itself.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress entirely — replaced with instant render or opacity-only fades. Durations effectively halve. Section reveals become static on-mount. Link underline appears instantly rather than animating. The brand experience is fully preserved under reduced-motion — nothing breaks, because the brand was never motion-dependent.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| `#07130e` text on `#ffffff` canvas | 16.9 | AAA at all sizes |
| `#ffffff` text on `#07130e` ink band | 16.9 | AAA at all sizes |
| `#4a544f` secondary on `#ffffff` | 8.1 | AAA at body sizes |
| `#7d847f` tertiary on `#ffffff` | 4.6 | AA at body sizes |
| `#a8ada9` faint on `#ffffff` | 2.9 | Fails AA — placeholder/disabled only |
| `#b9b5d0` accent on `#07130e` ink | 6.9 | AA at body / AAA at large — secondary copy on dark band |
| `#000000` border on `#ffffff` | 21.0 | Maximum (border, not text) |

The near-black-on-white pairing sits at a comfortable 16.9:1 — well above AAA — and the inverted white-on-near-black band carries the same ratio, so the dramatic hero inversion costs nothing in legibility. The lavender-grey accent passes AA on the dark band for secondary copy; it is never used for primary text or for small text on white.

### Focus Indicators

Focus is a **2px near-black ring** (`rgba(7, 19, 14, 0.25)` with outline-offset) — high contrast on the white page, no colour cue needed. On the dark bands, the focus ring inverts to a white/translucent ring for visibility. The discipline matches the brand: focus is signalled by contrast, not by a brand colour.

### ARIA Patterns

- **Top nav**: `<nav aria-label="Primary">` landmark with skip-link to `<main>`.
- **Hero band**: the decorative inversion is purely visual; the H1 is a real `<h1>`, not an image.
- **Model cards**: `<article>` with `aria-labelledby` pointing to the model name.
- **Code blocks**: `<pre><code role="region" aria-label="API example" tabindex="0">` — focusable, language-labelled.
- **Modal**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Links**: rely on underline-on-hover plus the underline-at-rest in body prose so colour-blind users identify links without colour.

### Keyboard Navigation

- Tab order: skip-link → wordmark → primary nav → CTA → main content (document order) → footer
- `Esc` closes modals and dropdowns
- Code blocks are focusable (`tabindex="0"`)
- All interactive targets meet the 44px minimum effective tap area despite slim visual heights

### Screen Reader Hints

- Uppercase eyebrows use CSS `text-transform: uppercase` so screen readers announce natural case
- The lavender wordmark wash is decorative; the wordmark carries `aria-label="Black Forest Labs"`
- Decorative dark-band graphics carry `aria-hidden="true"`

### Reduced Motion

All transitions degrade to opacity-only or instant. Section reveals become static on-mount. Modal entry becomes instant. The brand preserves full visual consistency under reduced-motion.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Nav collapses to wordmark + hamburger; hero H1 drops 90→40px; cards 1-up; CTAs stack |
| Tablet | 640–1024px | Nav keeps inline links; hero H1 at ~56px; cards 2-up |
| Desktop | 1024–1280px | Full nav; hero H1 at 72–90px; cards 2/3-up; full layout |
| Wide | 1280–1536px | Content caps at 1280px; whitespace absorbs the rest |

### Touch Targets

- Buttons: ~48px height — comfortably above the 44px minimum on all viewports
- Nav links: 44×44px minimum tap area even at 15px text
- Badges/chips: padded to a 44px effective tap target where interactive

### Collapsing Strategy

- **Top nav** at <1024px: links collapse into a hamburger sheet; the single CTA remains visible
- **Hero** at <640px: the 90px H1 scales down to ~40px while preserving the dark-band inversion; the inversion never drops on mobile
- **Card grids**: 3 → 2 → 1 columns
- **CTA pairs** at <640px: stack vertically (primary above, secondary below)
- **Dark bands** stay full-bleed at every breakpoint — the inversion rhythm is mobile-preserved

### Image Behavior

Model-sample imagery (the one place colour appears — the generated images themselves) uses `aspect-ratio` to prevent layout shift and `srcset` for retina. Logos render in `currentColor` to inherit the near-black or white depending on the band. Below-fold images lazy-load; the hero is eager.

### Container Queries

Used sparingly inside model/sample cards: when a card crosses a width threshold, a sample-grid switches from stacked to side-by-side. The same component renders compactly in dense grids and expansively in spotlight contexts.

## 11. Content & Voice

### Tone

**Technical, sober, declarative — frontier-research register.** Black Forest Labs writes like a research lab announcing capability, not a startup selling a product. Headlines state the work ("FLUX.1 — frontier image generation"); subheads explain capability in precise technical terms; copy uses the vocabulary of ML research (model, weights, inference, diffusion, latent) without translating it down for general visitors. The voice is restrained and confident — it assumes a technical reader and declines to oversell. There is no exclamation-heavy enthusiasm and no consumer-magic framing; the seriousness is the pitch.

### Microcopy Patterns

- **Button verbs**: *Get started*, *Try FLUX*, *Read the paper*, *View documentation*, *Request access*, *Contact us*. Direct, outcome-focused.
- **Model framing**: *"FLUX.1 [pro] — state-of-the-art image generation."* — names the model, states the claim, no embellishment.
- **Error messages**: specific and accountable — *"Generation failed: prompt exceeds token limit. Shorten the prompt and retry."*
- **Empty states**: instruction-led — *"No generations yet. Enter a prompt to start."*
- **Field labels**: single-word where possible — *Prompt*, *Model*, *Seed*, *Aspect ratio*.
- **Loading states**: context-specific — *"Generating…"*, *"Loading model…"* — never bare "Loading…".

### Empty States

Empty states follow the research-tool convention: name the state, offer the next step, include the exact action. *"No API keys yet. Create a key to begin."* The tone is instructional, not encouraging — it tells the user what to do, not how to feel.

### CTA Verb Conventions

- Primary: *Get started*, *Try FLUX*, *Request access*, *Contact us*
- Secondary: *Read the paper*, *View documentation*, *Learn more*
- Tertiary: *See models*, *Read research*, *Browse the API*
- Avoided: *Click here*, *Submit*, *Buy now*, exclamation marks, consumer-magic language. The verbs match the research-peer register — direct, never marketing-template.

## 12. Dark Mode & Theming

**No toggleable dark mode is shipped.** Black Forest Labs is a **light-only canvas** — pure white `#ffffff` is the single ground. There is no `prefers-color-scheme: dark` variant and no theme switcher.

However, the brand achieves a dark-mode *feeling* through **inline inversion**: the hero band and footer are rendered on near-black `#07130e` fields with white type, punched into the white page. These dark bands are part of the page composition, not a switchable theme — the page is permanently light, with dark bands as deliberate contrast moments. The result is that the brand reads as having both light and dark surfaces without ever offering a toggle. (Theme-toggle audit confirmed: score=0, no theme-switch signals.)

If a true dark mode were ever added, the natural token swap would be: canvas `#ffffff` → `#07130e`, text `#07130e` → `#ffffff`, border `#000000` → `rgba(255,255,255,0.20)`, with the lavender-grey accent unchanged. But this is not currently shipped.

## 13. Lineage & Influences

Black Forest Labs sits squarely in the **frontier-AI-lab monochrome** lineage — the visual register adopted by serious research labs to signal capability through reduction rather than decoration. Its DNA traces three sources. First, the **single-typeface, contrast-only identity** that Vercel and Linear made the developer-tool default: one face carries the brand, the accent colour is withheld from action fills, and the primary CTA is an inverted contrast pill rather than a coloured button. Black Forest Labs takes this further — it commits to a *single weight* (500) and *sharp corners* (0px), pushing past Vercel's already-restrained system into near-total reduction.

Second, the **research-paper-cover austerity** of academic AI labs — the early monochrome of OpenAI, the sober restraint of Anthropic, the technical sobriety of DeepMind — where the marketing surface reads like a publication the lab would actually release. The page declines product gloss because the audience (researchers, developers, technical buyers) reads gloss as noise. Third, the **stark black-on-white / white-on-black inversion** of the Swiss International Typographic Style, filtered through a modern grotesque: grid discipline, sans-serif-as-content, and decoration rejected on principle.

The single deliberate chromatic departure is the dusty lavender-grey `#b9b5d0` washing the FLUX wordmark — the one colour in an otherwise zero-chroma system, and even it is desaturated almost to neutral. The brand's thesis is pointed: a frontier image-generation lab — a company whose *entire product is generating colour and image* — does not need to *show* colour on its website to prove it can make it. The marketing restraint is the flex. The colour lives in the generated samples; the brand chrome stays monochrome.

What Black Forest Labs rejects: gradient washes and glow (the consumer-AI signal), saturated brand colours on buttons, rounded "friendly" corners, drop shadows and atmospheric depth, multiple type families, and any enthusiasm-heavy consumer-product voice. The page is engineered to feel like a serious lab's serious page.

**Influences:**

- **Instrument Sans (Google Fonts, open-source)** — The single typeface carrying display and body; a modern grotesque held at weight 500 across the system. *https://fonts.google.com/specimen/Instrument+Sans*
- **Vercel** — Frontier dev-tool monochrome; single-family discipline, accent withheld from CTA fills, contrast-pill primary. *https://vercel.com*
- **Linear** — Contrast-only identity; inverted text-colour CTAs against canvas, near-zero-chroma neutral system. *https://linear.app*
- **Anthropic** — Research-lab restraint; sober, publication-grade marketing for a frontier AI lab. *https://www.anthropic.com*
- **OpenAI** — Early monochrome research-lab aesthetic; black-on-white austerity, technical register over product gloss. *https://openai.com*
- **Swiss International Typographic Style** — Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected. *https://en.wikipedia.org/wiki/International_Typographic_Style*

## 14. Do's and Don'ts

### Do

- **Do** use pure white `#ffffff` for the canvas — the single light ground. No cream, no warm tint.
- **Do** use near-black `#07130e` (a green-shifted ink, not neutral black) for body and headlines.
- **Do** set *everything* in **Instrument Sans** — display and body, one face, no second family.
- **Do** hold type at **weight 500** as the default. The even medium weight is the brand's typographic signature.
- **Do** invert the hero into a dark `#07130e` band with the H1 in white at a large size (90px is the production value).
- **Do** keep corners **sharp — 0px radius** on buttons, cards, inputs, and badges. Rounding breaks the technical register.
- **Do** carry separation with true-black `#000000` hairline borders; let the border do the elevation work.
- **Do** make the primary CTA a near-black-on-white contrast (or white-on-near-black on dark bands) — never a colour.
- **Do** keep the lavender-grey `#b9b5d0` accent rare and restrained — the FLUX wordmark wash, secondary copy on dark.
- **Do** alternate sections by *brightness* (white → dark → white), not by colour.
- **Do** keep semantic colours muted and low-chroma so they never break the monochrome austerity.
- **Do** write in a sober, technical, research-lab voice — declarative, no exclamation, no consumer-magic.

### Don't

- **Don't** use cream or any warm off-white. Pure white is the entry ticket.
- **Don't** add a colored CTA. The primary action is contrast (near-black/white), never a brand hue.
- **Don't** round the corners. 0px is the brand; 8–12px rounding shifts it into generic-SaaS friendliness.
- **Don't** introduce a second typeface or a serif. Instrument Sans is the entire system.
- **Don't** push display weight to 700–800 as the default. The brand lives at 500.
- **Don't** add gradients, glows, or atmospheric drop shadows. Depth is geometric (border + inversion), not atmospheric.
- **Don't** saturate the lavender accent or apply it to a button fill. It's a near-neutral wash, not a brand colour.
- **Don't** clutter the page. Whitespace does what colour does elsewhere — keep sections wide and airy.
- **Don't** drop the dark-band inversion on mobile. The white→dark rhythm is mobile-preserved.
- **Don't** use enthusiasm-heavy consumer copy or exclamation marks. The voice is frontier-research sober.
- **Don't** translate technical vocabulary down for general visitors — the audience is technical by design.
- **Don't** add bright semantic colours (vivid green/red/amber). Keep them desaturated to preserve the monochrome.

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:           #ffffff
Ink Band:         #07130e   (hero / footer / spotlight fill)
Text:             #07130e   (near-black, faint green tint)
Text on Ink:      #ffffff
Text Secondary:   #4a544f
Text Tertiary:    #7d847f
Brand:            #07130e   (identity is contrast, NOT a hue)
Accent:           #b9b5d0   (dusty lavender-grey — rare, near-neutral)
CTA Bg:           #07130e   (NEVER a colour)
CTA Text:         #ffffff
Border:           #000000   (true-black hairline)
Focus Ring:       rgba(7, 19, 14, 0.25) 0 0 0 2px
```

### Example Component Prompts

1. **"Create a Black Forest Labs hero: full-bleed dark band `#07130e` (near-black green-tint), a 90px Instrument Sans H1 at weight 500 in pure white `#ffffff` with `-0.03em` tracking, 18px / 400 Instrument Sans body deck below in white, and a single CTA — white fill `#ffffff`, near-black `#07130e` text, 0px radius (sharp corners), 16px / 500 label. No gradient, no glow, no rounding. The drama is the size and the black-on-white inversion."**

2. **"Design a Black Forest Labs card: pure white `#ffffff` background, 1px true-black `#000000` hairline border, **0px radius (sharp corners)**, 24px padding, **no shadow**. Inside: 24px / 500 Instrument Sans heading in `#07130e`, 16px / 400 body in `#4a544f` secondary. Hover: border deepens / faint green-black shadow — no lift, no translate. The border does the elevation work."**

3. **"Build a Black Forest Labs primary button: near-black `#07130e` fill, white `#ffffff` text at 16px / 500 Instrument Sans, **0px radius**, 12×20px padding, ~48px height. Hover deepens to true black `#000000` — no transform. Pair it with a secondary: white fill, true-black `#000000` border, near-black text, that *inverts* to near-black fill + white text on hover."**

4. **"Compose a Black Forest Labs model spotlight on a dark band: full-bleed `#07130e` background, an inverted ink card (`#07130e` fill, no border, 32px padding, 0px radius) with the model name in 32px / 500 Instrument Sans white, a description in 16px / 400 at `#b9b5d0` dusty lavender-grey, and a white-fill CTA. The whole section reads as a charged statement against the white page above and below it."**

5. **"Render a Black Forest Labs top nav: white `#ffffff` fill, 64px height, 1px faint bottom hairline `rgba(7, 19, 14, 0.12)`. Wordmark left in Instrument Sans 500 (FLUX mark washed in `#b9b5d0` lavender-grey). Center/right nav links (Models, Research, API, Company) at 15px / 500 ghost style with underline-on-hover. Far right: a single near-black primary CTA `Get started`. Flat, minimal — no mega-menu."**

6. **"Build a Black Forest Labs prompt input: white `#ffffff` fill, 1px true-black `#000000` border, **0px radius**, ~48px height, 12px padding, placeholder in `#a8ada9` faint, 16px / 400 Instrument Sans text in `#07130e`. On focus: a 2px near-black ring `rgba(7, 19, 14, 0.25)` — no brand-colour focus. Sharp corners throughout."**

### Iteration Guide

1. **Check the canvas.** It must be pure white `#ffffff`. Any cream/warm tint drifts toward Notion/Mintlify and breaks the frontier-lab austerity.
2. **Set everything in Instrument Sans at weight 500.** If your headings are 700+ and your body is 400, you've lost the brand's even-medium-weight signature. The 500-everywhere flatness is the tell.
3. **Square the corners.** If anything has 8–12px rounding, you've drifted into generic SaaS. Black Forest Labs is 0px radius — sharp, technical, spec-sheet geometry.
4. **Invert the hero.** A white hero is wrong. The hero is a near-black `#07130e` band with a giant white H1 (90px). The black-on-white inversion is the brand's most charged moment.
5. **Withhold colour from the CTA.** If your primary button is a colour, you've ported consumer-AI logic. The primary is near-black-on-white (or white-on-near-black on a dark band). Contrast, never hue.
6. **Use the green-black ink, not neutral black, for text.** `#07130e` carries a faint green cast — it's a green-shifted ink. Pure `#000` reads colder and loses the brand's subtle warmth.
7. **Let borders and inversion do the depth.** Kill the drop shadows and glows. A card lifts because it has a sharp true-black outline on white, not because it floats. Depth is geometric.
8. **Keep the lavender accent near-invisible.** `#b9b5d0` is a near-neutral wash on the FLUX wordmark and secondary copy on dark — never a button fill, never a section ground. If it reads as "a colour," you've over-applied it.

---

*Theme-toggle audit: score=0, signals=[none]*