--- version: alpha name: Photon description: Dark developer-infrastructure minimalism — near-black canvas with pure-white Inter text, a single electric-blue accent for links and CTAs, generous 16px radii, and monospace voices (Geist Mono / IBM Plex Mono) reserved for code and unified-API specimens. colors: # Canvas + ink background: "#101010" background-pure: "#000000" surface: "#1a1a1a" surface-soft: "#202020" ink: "#ffffff" ink-secondary: "#c5c5c5" ink-muted: "#999999" ink-faint: "#666666" # Accent — electric blue primary: "#0099ff" primary-bright: "#00bbff" link-blue: "#0099ff" cta-blue: "#487ff7" # Secondary accents — used sparingly in specimens / pills green: "#29d242" amber: "#ffcc66" coral: "#ff8866" # On-color on-primary: "#ffffff" on-ink: "#000000" # Neutral / chrome border: "#2f2f2f" border-soft: "#252525" divider: "#202020" gray-300: "#cccccc" gray-500: "#666666" gray-600: "#4d4d4d" typography: display-hero: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 56px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.6px section-heading: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.2px sub-heading: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.6px card-title: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.4px body-large: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px body: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body-medium: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.2px caption: fontFamily: "Inter, 'Inter Placeholder', sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px mono-body: fontFamily: "'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px mono-label: fontFamily: "'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.4px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px 4xl: 96px rounded: none: 0px xs: 4px sm: 8px md: 10px lg: 12px xl: 16px 2xl: 28px pill: 9999px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.on-ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px borderColor: "{colors.border}" button-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.border}" card-feature: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px borderColor: "{colors.border-soft}" code-block: backgroundColor: "{colors.background-pure}" textColor: "{colors.ink-secondary}" typography: "{typography.mono-body}" rounded: "{rounded.lg}" padding: 16px 20px borderColor: "{colors.border}" badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink-muted}" typography: "{typography.mono-label}" rounded: "{rounded.pill}" padding: 4px 12px borderColor: "{colors.border}" input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.surface}" borderColor: "{colors.primary}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 16px 24px borderColor: "{colors.divider}" link: textColor: "{colors.link-blue}" typography: "{typography.body}" --- # Photon Design System ## Overview Photon's site (the Spectrum framework — infrastructure that connects AI agents to messaging platforms like iMessage, WhatsApp, and Slack) is dark-mode developer minimalism done with restraint. The canvas is a near-black `{colors.background}` rather than pure black, softening the contrast just enough to keep long technical reading comfortable, while pure-white `{colors.ink}` headlines and Inter body copy carry the message. It reads like a terminal that learned typography — confident, quiet, and engineered. Color is used as signal, not decoration. The palette is overwhelmingly achromatic — black canvas, white and gray text scale — punctuated by a single electric-blue accent (`{colors.primary}`, `#0099ff`) that marks links, active states, and the occasional CTA. A small reserve of secondary hues (green, amber, coral) appears only inside product specimens: the multi-platform message bubbles, latency comparison charts, and unified-API examples that demonstrate what the framework actually does. Typography splits cleanly into two voices. Inter (with the Framer `Inter Placeholder` fallback) handles all marketing prose, from the compressed negative-tracked hero down to captions. The monospace family — Geist Mono and IBM Plex Mono — is reserved for code blocks, API specimens, and technical labels, reinforcing the developer-tool positioning every time the page shows real syntax. The shift from sans to mono is the system's way of saying "this part is the product." Shapes are generous and consistent. The site leans heavily on a 16px radius (`{rounded.xl}`) for cards and a full pill (`{rounded.pill}`) for buttons and badges, giving the dark surfaces a soft, modern, almost messaging-app roundness that quietly echoes the chat bubbles the product is built around. **Key Characteristics:** - Near-black `{colors.background}` (#101010) canvas, not pure black — softened contrast for technical reading - Pure-white `{colors.ink}` headlines + Inter body; achromatic gray text scale - Single electric-blue accent (`{colors.primary}`) for links and active states — color as signal - Secondary hues (green/amber/coral) confined to product specimens and chat-bubble demos - Dual typographic voice: Inter for prose, Geist Mono / IBM Plex Mono for code and labels - Generous radii — 16px cards (`{rounded.xl}`), pill buttons and badges (`{rounded.pill}`) - Dark surfaces (`{colors.surface}`) layered with hairline `{colors.border}` chrome ## Colors ### Canvas & Ink - **Canvas** (`{colors.background}`): Page background. Near-black, not pure — the micro-softness keeps dark reading comfortable. - **Pure Black** (`{colors.background-pure}`): Code-block and terminal backgrounds for maximum specimen contrast. - **Surface** (`{colors.surface}`): Card and control fills, one step up from the canvas. - **White** (`{colors.ink}`): Primary headings, body emphasis, button text on accent. - **Ink Secondary** (`{colors.ink-secondary}`): Body copy, code text. - **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, badge text. - **Ink Faint** (`{colors.ink-faint}`): Disabled and lowest-priority text. ### Accent - **Electric Blue** (`{colors.primary}`): Links, active nav, accent CTAs — the one chromatic constant. - **Bright Blue** (`{colors.primary-bright}`): Hover/glow variant of the accent. - **CTA Blue** (`{colors.cta-blue}`): Saturated button-fill blue used on select call-to-action surfaces. ### Specimen Accents - **Green** (`{colors.green}`): Success / "online" states inside product demos. - **Amber** (`{colors.amber}`): Highlight inside latency and comparison charts. - **Coral** (`{colors.coral}`): Secondary platform marker in message-bubble specimens. ### Chrome - **Border** (`{colors.border}`): Hairline outlines on cards, inputs, and badges. - **Border Soft** (`{colors.border-soft}`): Lighter dividers on nested surfaces. - **Divider** (`{colors.divider}`): Section and nav separators. ## Typography ### Font Family - **Primary**: `Inter`, with the Framer fallback `'Inter Placeholder', sans-serif` - **Monospace**: `Geist Mono` → `IBM Plex Mono` → `ui-monospace, SFMono-Regular, Menlo, monospace` - Inter carries all prose; the mono stack is reserved for code, API specimens, and technical labels. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`). | Token | Use | |---|---| | `display-hero` | 56px hero — compressed negative tracking, billboard impact | | `section-heading` | Feature section titles | | `sub-heading` | Sub-sections, large card headings | | `card-title` | Feature / pricing cards | | `body-large` | Hero subtitle, feature intros | | `body` | Standard reading text | | `body-medium` | Emphasized UI text, nav | | `button-ui` | Buttons and CTAs | | `caption` | Metadata, small labels | | `mono-body` | Code blocks, API specimens | | `mono-label` | Uppercase-ish technical labels, eyebrows | ### Principles - **Two voices, strict roles**: Inter for everything marketing; monospace only where the product (code, API, latency specs) appears. - **Negative tracking at scale**: Headlines compress to roughly -1.6px at hero size, relaxing to neutral by body. - **Weight discipline**: 400 for reading, 500 for UI/nav, 600 for headings — no heavier. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) separate sections. ### Grid & Container - Max content width ~1200px, centered. - Hero: centered single column with generous top padding. - Feature areas: 2–3 column card grids over the dark canvas. - Sections separated by spacing and `{colors.divider}` hairlines, not background shifts. ### Whitespace Philosophy - **Dark gallery emptiness**: The near-black canvas does the work of separation; cards float as slightly-lighter `{colors.surface}` panels with hairline borders. - **Color as punctuation**: Long achromatic stretches make the single blue accent and the colored product specimens read as deliberate events. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No border, canvas only | Page background, prose blocks | | Hairline (Level 1) | `1px solid {colors.border}` on `{colors.surface}` | Cards, inputs, badges | | Nested (Level 1b) | `1px solid {colors.border-soft}` on `{colors.surface-soft}` | Feature panels inside cards | | Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements | **Depth Philosophy**: Depth comes from layered dark values and hairline borders rather than heavy shadows. A card is just a fractionally lighter surface ringed by `{colors.border}` — the same logic a code editor uses to separate panels. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved / full-bleed media | | `xs` | 4px | Inline code, small chips | | `sm` | 8px | Compact controls | | `md` | 10px | Inputs, small containers | | `lg` | 12px | Code blocks, secondary cards | | `xl` | 16px | Primary cards — the signature radius | | `2xl` | 28px | Large rounded panels | | `pill` | 9999px | Buttons, badges, status pills | ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Buttons - **`button-primary`** — White fill, black text, pill radius. The default high-contrast CTA on the dark canvas. - **`button-secondary`** — Dark `{colors.surface}` fill with hairline `{colors.border}`, white text. - **`button-accent`** — Electric-blue fill for select calls to action. ### Cards - **`card`** — `{colors.surface}` fill, 16px radius, hairline border. The workhorse panel. - **`card-feature`** — Slightly darker `{colors.surface-soft}`, larger padding for feature spotlights. ### Code & Specimens - **`code-block`** — Pure-black fill, mono body text, 12px radius — the terminal voice. - **`badge`** — Pill, mono label, muted text on `{colors.surface}` — used for eyebrows and platform tags. ### Inputs - **`input`** — Dark surface, white text, 10px radius. Focus swaps the border to `{colors.primary}`. ### Navigation - **`nav-bar`** — Dark sticky header on `{colors.background}` with a `{colors.divider}` bottom hairline; Inter 15px weight 500 links. ### Links - **`link`** — Electric-blue (`{colors.link-blue}`) text — the consistent interactive color. ## Do's and Don'ts ### Do - Keep the canvas near-black `{colors.background}`, not pure black, for comfortable reading. - Reserve the blue accent (`{colors.primary}`) for links and genuine interaction. - Use monospace ONLY for code, API specimens, and technical labels. - Confine the secondary hues (green/amber/coral) to product specimens and chat demos. - Use 16px radius for cards and full pills for buttons/badges. - Separate sections with spacing and hairline borders, not background-color shifts. ### Don't - Don't scatter the blue accent decoratively — it's a signal color. - Don't set body text in monospace — that voice belongs to the product. - Don't use heavy drop shadows; depth is layered dark surfaces + hairline borders. - Don't introduce a second marketing typeface — Inter carries all prose. - Don't drop below `{colors.ink-faint}` for text on the dark canvas (contrast floor). --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, stacked cards, reduced section padding | | Tablet | 600–1024px | 2-column grids begin | | Desktop | 1024–1200px | Full multi-column layout | | Large Desktop | >1200px | Centered, generous side margins | ### Touch Targets - Pill buttons use comfortable 12px vertical padding. - Nav links at 15px with adequate spacing. ### Collapsing Strategy - Hero: 56px headline scales down while keeping negative tracking proportional. - Navigation: horizontal links collapse to a menu toggle. - Feature cards: 3-column → 2-column → single column. - Code blocks: maintain mono sizing, scroll horizontally if needed. --- ## Agent Prompt Guide ### Quick Color Reference - Canvas: near-black `{colors.background}` - Heading text: white `{colors.ink}` - Body text: `{colors.ink-secondary}` - Accent / links: electric blue `{colors.primary}` - Card surface: `{colors.surface}` with `1px solid {colors.border}` - Focus ring: `{colors.primary}` ### Example Component Prompts - "Create a hero on near-black `{colors.background}`. Headline 56px Inter weight 600, letter-spacing -1.6px, white. Subtitle 18px Inter weight 400, `{colors.ink-secondary}`. White pill CTA (`{colors.ink}` fill, black text) plus a dark secondary pill with `1px solid {colors.border}`." - "Design a card: `{colors.surface}` fill, 16px radius, `1px solid {colors.border}`, 24px padding. Title 20px Inter weight 600, body 16px `{colors.ink-secondary}`." - "Build a code block: pure-black background, Geist Mono 14px `{colors.ink-secondary}`, 12px radius, `1px solid {colors.border}`." - "Create a badge: pill, `{colors.surface}` fill, mono 12px label in `{colors.ink-muted}`, `1px solid {colors.border}`." ### Iteration Guide 1. Dark first — every surface derives from the near-black canvas plus a hairline border, not a shadow. 2. One accent — `{colors.primary}` marks interaction; product specimens may add green/amber/coral. 3. Two voices — Inter for prose, mono only for the product (code, API, specs). 4. Round generously — 16px cards, pill buttons and badges. 5. Weight discipline — 400 read, 500 UI, 600 headings. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Photon. Brand names and trademarks belong to their respective owners.