---
version: alpha
name: Netlify
description: Dark-canvas developer platform with a signature aqua-teal accent, Figtree at heavy weight for display, Martian Mono for code-voice sections, and full-pill buttons throughout — warm at scale, precise in detail.

colors:
  # Canvas / surface
  background: "#181a1c"          # near-black with a blue-grey undertone — the page canvas
  surface: "#0d1818"             # the deepest dark-teal section well (gradient stop)
  surface-dark: "#0c2a2a"        # gradient alt well (linear-gradient second stop)
  surface-mid: "#1d1f22"         # hover lift on the dark canvas (extracted from nav hover)

  # Ink / text
  ink: "#ffffff"                 # primary headings and body on the dark canvas
  ink-secondary: "#7e8792"       # muted supporting copy — the mid-grey
  ink-tertiary: "#545a61"        # low-emphasis labels, captions

  # Brand accent — signature aqua-teal
  primary: "#32e6e2"             # was color(srgb 0.196078 0.901961 0.886275) — Netlify teal, the sole chromatic stamp
  on-primary: "#181a1c"          # dark canvas on the teal CTA — was color(srgb 0.0941176 0.101961 0.109804)
  primary-container: "#c2f0ed"   # tinted teal surface for highlights — flattened from rgba(194,240,236,0.4) over white
  primary-ghost-bg: "#2e3232"    # was color(srgb 1 1 1 / 0.0980392) over dark — ghost button rest state

  # Semantic
  success: "#64d87f"             # --color-border-success
  error: "#d62740"               # --color-text-invalid
  warning: "#fbb13d"             # --color-border-warning
  info: "#2e51ed"                # blue accent from code/CLI contexts

  # Borders
  border: "#778089"              # 1px solid from input default state — visible mid-grey
  border-faint: "#545a61"        # hairline dividers, lower emphasis

  # Shadow tints
  shadow-soft: "#000000"         # was color(srgb 0 0 0 / 0.07–0.10) — Google format requires hex
  highlight-teal: "#8efbf7"      # --color-highlight, the near-white teal glow token

typography:
  display-hero:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.10
    letterSpacing: 0px
  display:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.10
    letterSpacing: 0px
  heading-section:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.10
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0px
  body-large:
    fontFamily: "Instrument Sans, system-ui, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Instrument Sans, system-ui, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "Instrument Sans, system-ui, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  label:
    fontFamily: "Figtree, system-ui, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Instrument Sans, system-ui, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  mono-label:
    fontFamily: "Martian Mono, ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, monospace"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: 0.2px
  mono-body:
    fontFamily: "Martian Mono, ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Martian Mono, ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  2xl: 16px
  pill: 9999px

components:
  # Primary teal CTA — the signature "Start building"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 17px
  button-primary-hover:
    backgroundColor: "{colors.highlight-teal}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 10px 17px

  # Ghost pill — "Talk to sales" / secondary action
  button-ghost:
    backgroundColor: "{colors.primary-ghost-bg}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 17px
  button-ghost-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 10px 17px

  # CLI fetch bar — inline code prompt pill
  button-cli:
    backgroundColor: "{colors.primary-ghost-bg}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.pill}"
    padding: 10px 17px

  # Standard card on dark canvas
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px

  # Input — light surface (forms, email capture)
  input:
    backgroundColor: "#ffffff"
    textColor: "{colors.background}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "#ffffff"
    borderColor: "{colors.background}"

  # Navigation bar — dark sticky header
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px

  # Inline code chip / CLI label
  code-chip:
    backgroundColor: "{colors.primary-ghost-bg}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.sm}"
    padding: 2px 8px

  # Badge / tag
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Netlify Design System

## Overview

Netlify's site is the rare developer brand that manages to feel simultaneously dark and warm. The canvas is a near-black with a blue-grey undertone (`{colors.background}`, `#181a1c`) — not dead flat black, not pure navy, but something in between that reads as a quiet control room. Against it, a single signature aqua-teal (`{colors.primary}`) does almost all the chromatic work: it fills the primary CTAs, lights up the CLI fetch-bar pills, glows through illustrated characters, and anchors every interactive affordance on the page. Every other element is greyscale or white. The discipline is remarkable given how busy developer-platform sites usually are.

The typography choice is equally deliberate. Display headlines use **Figtree** at weight 800 — a rounded, soft geometric sans that plays against the dark with just enough warmth to keep it from feeling cold. At 64px, "Push your apps to the world" reads as confident encouragement, not technical intimidation. **Instrument Sans** handles body and supporting copy, lending a neutral, legible sans voice to the prose. And **Martian Mono** appears as the code-voice: in CLI prompts, inline labels, and the technology-layer sections where Netlify signals its engineering depth. The three-family system cleanly separates emotional presence (Figtree), informational reading (Instrument Sans), and technical credibility (Martian Mono).

Shapes lean heavily on the full pill (`{rounded.pill}`). Every button — primary, ghost, CLI prompt — is pill-shaped at `360px` border-radius. This isn't a rounding system with multiple tiers in active use; it's a deliberate binary: near-square for code chips and inputs (2–6px), full pill for anything that invites a click. The gradient hero wells push even further into the brand: teal-tinted dark gradients (`surface` → `surface-dark`) give the hero and feature sections a sense of depth that feels atmospheric rather than decorative.

**Key Characteristics:**
- Near-black blue-grey canvas (`{colors.background}`) — warm enough to feel designed, dark enough for the teal to pop
- Signature aqua-teal (`{colors.primary}`) as the single chromatic accent — CTAs, CLI bars, interactive fills, logo spark
- Figtree weight 800 for all display and heading text — rounded geometric sans that keeps dark from reading cold
- Instrument Sans for body and supporting copy — clean, neutral reading voice
- Martian Mono for CLI prompts, code labels, and tech-layer captions
- Full-pill buttons at 360px radius — no mid-range radii on interactive elements
- `{colors.on-primary}` is the dark canvas itself — teal buttons wear the dark canvas as text, a clever loop
- Multi-layer dark gradients in hero/feature wells for atmospheric depth
- Ghost buttons use a translucent dark fill (`{colors.primary-ghost-bg}`) with teal text, not an outline
- Social proof logo bar in greyscale against the canvas — brand color stays reserved for Netlify's own elements

## Colors

### Surface & Canvas
- **Page Canvas** (`{colors.background}`): The primary background. A deliberate blue-grey near-black — `#181a1c`. Not flat, not cold.
- **Teal Well** (`{colors.surface}`): The deepest section background, used in feature wells and the hero gradient start.
- **Gradient Alt** (`{colors.surface-dark}`): The second stop in the dark-teal hero gradients.
- **Hover Lift** (`{colors.surface-mid}`): Ghost button hover fill — the canvas lifted one step.

### Brand Accent
- **Netlify Teal** (`{colors.primary}`): The singular brand color. Fills primary CTAs, CLI bars, and every interactive accent. Originally `color(srgb 0.196078 0.901961 0.886275)` in the source — converted to `#32e6e2` for this spec.
- **Teal Highlight** (`{colors.highlight-teal}`): The near-white teal glow (`--color-highlight`, `#8efbf7`) — used for hover brightening and ambient glow.
- **Teal Container** (`{colors.primary-container}`): A soft tinted teal for badge fills and light-mode callouts.

### Ink / Text
- **Near-White** (`{colors.ink}`): Primary headings, body on dark.
- **Mid Grey** (`{colors.ink-secondary}`): Muted supporting copy, `#7e8792`.
- **Low-Emphasis** (`{colors.ink-tertiary}`): Faintest captions and metadata.

### On-Color
- **On-Teal** (`{colors.on-primary}`): Dark canvas text on teal fills — the teal CTA text is the background color itself.

### Semantic
- **Success** (`{colors.success}`): Positive feedback, success borders.
- **Error** (`{colors.error}`): Invalid state, destructive actions.
- **Warning** (`{colors.warning}`): Warning borders and highlights.
- **Info** (`{colors.info}`): Informational blue, CLI copy contexts.

### Borders & Shadows
- **Input Border** (`{colors.border}`): Mid-grey hairline for input strokes and dividers.
- **Hairline** (`{colors.border-faint}`): The softest dividers.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for multi-layer box shadows (original `color(srgb 0 0 0 / 0.07–0.10)`).

## Typography

### Font Family
- **Display**: `Figtree` — a self-hosted rounded geometric sans, with fallbacks `system-ui, Helvetica, sans-serif`. Runs weight 700–800 for headings.
- **Body**: `Instrument Sans` — clean, variable-width humanist sans, with fallbacks `system-ui, Helvetica, sans-serif`. All reading copy.
- **Monospace**: `Martian Mono` — a distinctive mono with a medium-weight variant, fallbacks `ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, monospace`. CLI prompts and code labels.
- All three families are self-hosted (Figtree variable, Instrument Sans variable, Martian Mono statics) — no Google Fonts dependency.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 64px / Figtree 800 — hero billboard headline |
| `display` | 48px / Figtree 800 — section marquee heads |
| `heading-section` | 36px / Figtree 800 — feature section headings |
| `heading-sub` | 24px / Figtree 700 — card titles, sub-sections |
| `body-large` | 18px / Instrument Sans — lead paragraphs and hero descriptions |
| `body` | 16px / Instrument Sans 400 — standard reading copy |
| `body-medium` | 16px / Instrument Sans 500 — emphasized inline copy |
| `button-ui` | 16px / Figtree 700 — button labels |
| `label` | 14px / Figtree 600 — nav links, small UI labels |
| `caption` | 14px / Instrument Sans — metadata, footer copy |
| `mono-label` | 12px / Martian Mono 600 — uppercase code-voice labels |
| `mono-body` | 16px / Martian Mono 400 — CLI prompt body |
| `mono-caption` | 14px / Martian Mono 400 — inline code references |

### Principles
- **Display weight is absolute**: Figtree runs 800 for all marquee display sizes — no mixing 700 and 800 in the same heading tier.
- **Mono for machine context**: Martian Mono appears only where the product is speaking, not the marketing copy.
- **No letter-spacing manipulation**: unlike many dark dev brands, Netlify doesn't rely on tracking compression. The rounded Figtree shapes carry the personality at 0px tracking.
- **Two-family prose stack**: Figtree handles weight and presence; Instrument Sans handles neutrality and readability — never mixed at the same hierarchy level.

## Layout

### Spacing System
The full scale is in the `spacing:` token block above. Base unit: 8px. The site uses 24px (`{spacing.xl}`) and 12px (`{spacing.md}`) as the most frequent spacing stops, with generous 48–96px section breaks. The compactness at component level (10px button padding) contrasts the breathing room between sections — density for interaction, space for presence.

### Grid & Container
- Max content width: approximately 1085px (the widest detected breakpoint as container edge)
- Hero: centered, large serif display with CTAs below, illustrated graphic right
- Feature sections: single-column alternating + two-column grids for comparison
- Trust bar: horizontal logo scroll in greyscale on the canvas

### Whitespace Philosophy
- **Dark as rest**: the near-black canvas reads as breathing room, not heaviness. White sections (partnership logos, light-mode docs) punctuate but don't dominate.
- **Pill buttons need air**: the full-pill shape wants horizontal space — 10px vertical + 17px horizontal lets the pill read cleanly at 16px type.
- **Section rhythm at scale**: hero → trust bar → "Build your way" → feature grid. Each section has a distinct depth-gradient treatment separating it from the next.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, canvas fill | Page sections, text blocks |
| Tinted Well (Level 1) | Dark-teal gradient (`{colors.surface}` → `{colors.surface-dark}`) | Hero sections, feature wells |
| Raised Card (Level 2) | Lighter surface fill (`{colors.surface}`) + hairline | Feature cards and panels |
| Floating (Level 3) | Multi-layer soft shadow: `color(srgb 0 0 0 / 0.1) 0 8px 10px`, `0 16px 24px`, `0 6px 30px` | Product screenshots, popovers |
| Focus Ring | `{colors.primary}` outline | Keyboard focus on all interactive |

**Shadow Philosophy**: Netlify uses shadows sparingly on the dark canvas — luminance separation (lighter fill = raised) is the primary depth language. Actual box shadows appear mainly on floating product screenshots and menus, using a three-layer soft dark stack. The distinctive depth move is gradient-as-depth: the hero and feature wells use dark-teal linear gradients that create a sense of receding space without any explicit shadow at all.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, hard-edge sections |
| `xs` | 2px | Inline code chips, progress bar fills |
| `sm` | 4px | Inputs, small interactive elements, tab corners |
| `md` | 6px | Standard cards, select dropdowns |
| `lg` | 8px | Elevated cards, region containers |
| `xl` | 12px | Feature image corners, large cards |
| `2xl` | 16px | Hero panels, large feature wells |
| `pill` | 9999px | All buttons, CLI prompt bars, badges |

The system is strongly binary in practice: chips and structural containers use 2–6px, everything clickable is a full pill. There's no in-between radius on interactive elements. This binary discipline gives every button an unmistakable pill silhouette and prevents radius drift.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Netlify teal fill (`{colors.primary}`), dark-canvas text (`{colors.on-primary}`), full pill. The "Start building" CTA. Hover brightens to `{colors.highlight-teal}`.
- **`button-ghost`** — Translucent dark fill (`{colors.primary-ghost-bg}`) with teal text, full pill. Used for "Talk to sales", secondary actions. Not a border/outline button.
- **`button-cli`** — The CLI fetch-bar pill: same ghost treatment but using `{typography.mono-body}` — renders the `fetch https://netlify.ai` prompt.

### Cards
- **`card`** — Dark teal well, `{rounded.xl}` radius (12px), 24px padding. Feature grid units.
- **`card-elevated`** — Slightly larger radius (`{rounded.2xl}`) for hero panels.

### Inputs
- **`input`** — White surface, dark canvas text, 4px radius, `{colors.border}` stroke. Stands out from the dark canvas intentionally. Focus tightens the border to near-black.

### Navigation
- **`nav-bar`** — Sticky dark canvas, white Figtree 600 nav links, teal "Sign up" CTA (pill).

### Code & Labels
- **`code-chip`** — Ghost-dark fill, teal Martian Mono text, 4px radius. Inline technical references.
- **`mono-label`** — Uppercase Martian Mono 600 for section-tech labels like "HOW IT WORKS".

### Trust Elements
- Partner logos rendered in greyscale (`{colors.ink-secondary}`) against the canvas — brand color never extends to third-party logos.

## Do's and Don'ts

### Do
- Keep the canvas `{colors.background}` — the blue-grey undertone of `#181a1c` is intentional. Flat `#000` or warm `#111` lose the brand quality.
- Reserve `{colors.primary}` exclusively for interactive and brand-owned elements — CTAs, CLI bars, Netlify's own logo spark.
- Use full pill (`{rounded.pill}`) for all clickable elements. The binary shape system is what makes the UI recognizable.
- Render `{colors.on-primary}` (the canvas dark) as text on teal buttons — the teal-on-dark loop is the brand's signature interaction moment.
- Use Figtree weight 800 for display — weight 700 for sub-headings only. No 400-weight Figtree in the headline tier.
- Use dark-teal gradients (`{colors.surface}` to `{colors.surface-dark}`) as depth rather than explicit shadows for section wells.
- Apply Martian Mono only for machine-voice content: CLI prompts, code references, tech-layer labels.

### Don't
- Don't add a secondary accent color. Netlify's power comes from teal as the only chromatic note — a second color dilutes the stamp.
- Don't use pill radius on structural containers or cards — the binary distinction (pill = clickable, small = chip, medium = structural) is load-bearing.
- Don't mix Figtree and Instrument Sans in the same hierarchy level — Figtree is display/UI, Instrument Sans is prose.
- Don't apply `{colors.primary}` to third-party logos, customer quotes, or social proof elements — keep it brand-owned.
- Don't run display text smaller than 36px in Figtree 800 — below this size the rounded weight 800 reads as heavy rather than bold.
- Don't use positive letter-spacing on Figtree — the rounded geometry works at 0px tracking and goes wrong with added space.
- Don't replicate the ghost button as a full outline button — the translucent fill (`{colors.primary-ghost-bg}`) over teal text is the system, not a border.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; hero text scales; CLI pill truncates |
| Mobile | 400–550px | Standard single column; illustrations crop |
| Tablet Small | 550–750px | 2-column feature pairs begin |
| Tablet | 750–896px | Full two-column, nav dropdowns collapse |
| Desktop | 896–1085px | Max container, full hero side-by-side |
| Large Desktop | >1085px | Centered, generous margins; max ~1085px container |

### Touch Targets
- Pill buttons run `10px 17px` padding at 16px type — adequate touch height (~36px)
- Nav links at 14px with generous horizontal spacing
- The CLI fetch-bar pill is tappable and opens a full prompt interaction

### Collapsing Strategy
- Hero headline: 64px → scales down proportionally, Figtree maintains weight at any size
- Navigation: horizontal with dropdown menus → hamburger toggle on mobile
- Feature grids: 2-column → single column, cards restack
- Trust bar logos: horizontal row → 2-column grid on mobile
- Section padding: 96px → 48px on mobile, 64px → 32px for inner spacing

### Image Behavior
- Illustrated hero character (cart + mascot) is a contained image that crops on narrow viewports
- Product screenshots maintain border treatment at all sizes
- Logo trust bar: horizontal scroll on narrow viewports

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black Blue-Grey `{colors.background}`
- Text: Near-White `{colors.ink}`
- Brand accent: Netlify Teal `{colors.primary}`
- Secondary text: Mid-Grey `{colors.ink-secondary}`
- Border: Input Border `{colors.border}`
- Primary CTA: Teal fill `{colors.primary}`, text `{colors.on-primary}`

### Example Component Prompts

- "Create a hero section on `{colors.background}` (#181a1c). Headline 64px Figtree weight 800 in `{colors.ink}`. Body description in 18px Instrument Sans `{colors.ink-secondary}`. Primary CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, 16px Figtree 700, full pill (9999px), 10px 17px padding. Ghost CTA: `{colors.primary-ghost-bg}` fill, `{colors.primary}` text, same pill. Below both: a CLI bar pill with Martian Mono 16px 'fetch https://netlify.ai' in `{colors.primary}` on `{colors.primary-ghost-bg}` fill."
- "Build the primary button: `{colors.primary}` fill, `{colors.on-primary}` dark text, 16px Figtree weight 700, `{rounded.pill}` radius, 10px 17px padding. Hover brightens to `{colors.highlight-teal}` fill."
- "Build a ghost button: `{colors.primary-ghost-bg}` fill (translucent dark), `{colors.primary}` teal text, 16px Figtree 700, `{rounded.pill}` radius, 10px 17px padding. Hover fill: `{colors.surface-mid}`. Not a border-outline button."
- "Create a feature card: dark teal well background `{colors.surface}`, white text `{colors.ink}`, `{rounded.xl}` (12px) radius, 24px padding. Multi-layer soft shadow for float effect."
- "Design a navigation bar: sticky `{colors.background}` canvas, white Figtree 14px 600 nav links, Netlify teal 'Sign up' pill button right-aligned. No border — sticky bar separates by the dark fill alone."
- "Build an inline code chip: `{colors.primary-ghost-bg}` fill, `{colors.primary}` Martian Mono text at 14px weight 400, `{rounded.sm}` (4px) radius, 2px 8px padding."

### Iteration Guide

1. Start on `{colors.background}` (#181a1c) — the blue-grey undertone is what makes the teal vibrant. Flat black or warm dark loses the contrast quality.
2. Add `{colors.primary}` only to owned interactive elements. One teal per screen is the rule — CTAs, the CLI bar, the logo spark.
3. `{colors.on-primary}` is the dark canvas itself — teal buttons render in the background color. This loop is the brand's signature interaction.
4. All buttons and interactive pills use `{rounded.pill}` (9999px). No mid-range radius on clickable elements.
5. Display headlines run Figtree 800 with 0px letter-spacing. Never reduce weight below 700 in the display tier.
6. Prose and descriptions use Instrument Sans — never Figtree for reading copy.
7. Technical/CLI contexts get Martian Mono; use it sparingly so the "machine voice" reads as distinct.

---

## 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 Netlify. Brand names and trademarks belong to their respective owners.