---
version: alpha
name: Skarlo
description: Studio-grade dark minimalism — near-black canvas with white Inter type, an Instrument Serif editorial accent, a single saturated crimson signal color, and a pastel spectrum reserved for decorative gradients. Tight negative tracking, soft 5px radii on chrome, full-pill CTAs.
colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0d0d0e"
  surface-soft: "#131415"
  ink: "#ffffff"
  ink-secondary: "#ababab"
  ink-muted: "#6b6b6b"

  # Signature signal
  primary: "#e11438"
  primary-deep: "#560319"
  on-primary: "#ffffff"

  # Light surface (inverted sections)
  surface-light: "#ffffff"
  surface-light-soft: "#e5e5e5"
  ink-on-light: "#000000"

  # Borders
  border: "#262626"
  border-soft: "#1a1a1c"

  # Decorative spectrum — gradient washes only, never UI chrome
  spectrum-yellow: "#fff18a"
  spectrum-amber: "#f2e26c"
  spectrum-orange: "#f9a574"
  spectrum-coral: "#f8b8ac"
  spectrum-pink: "#ff738c"
  spectrum-violet: "#b28dff"
  spectrum-lavender: "#b49beb"
  spectrum-sky: "#a1e6ff"
  spectrum-cyan: "#4fd0ff"
  spectrum-mint: "#58f5cb"
  spectrum-teal: "#23d3a4"

  # On-color
  on-ink: "#000000"

typography:
  display-hero:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -2px
  display-serif:
    fontFamily: "Instrument Serif, Georgia, serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
  card-title:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.6px
  card-title-serif:
    fontFamily: "Instrument Serif, Georgia, serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: -0.4px
  body:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    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: -0.2px
  button-ui:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.2px
  caption:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  label-mono:
    fontFamily: "Inter, Inter Placeholder, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 5px
  md: 6px
  lg: 15px
  xl: 24px
  pill: 100px

components:
  # Primary crimson CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — white pill on dark
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface-light-soft}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Ghost — outlined on dark
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Pill badge / tag
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  # Standard dark card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  # Soft inset card
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Inverted / light card
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 28px

  # Input
  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"
---

# Skarlo Design System

## Overview

Skarlo presents itself the way a high-end product studio wants to be read: confident, quiet, and uncompromisingly dark. The canvas is true black (`{colors.background}`) with white Inter type (`{colors.ink}`) floating on top, so the page reads like a gallery wall at night where the work, not the chrome, holds the light. There is no busy ornament. Hierarchy is built almost entirely from scale, weight, and the breathing room around each block.

The voice is set by a deliberate pairing of two typefaces. Inter does the structural work across navigation, body copy, and most headings, tuned with tight negative tracking that keeps large display lines compact and engineered. Against it, Instrument Serif appears as the editorial counter-voice, lending a single word or phrase a literary, hand-set quality that softens the otherwise mechanical sans. This sans-with-serif-accent move is the signature typographic gesture of the brand.

Color is rationed with discipline. The entire interface is achromatic, black to white, until a single saturated crimson (`{colors.primary}`) arrives to mark the one thing that matters on a screen, the primary call to action. A deeper maroon (`{colors.primary-deep}`) backs the hover state. Beyond that, Skarlo keeps a wide pastel spectrum (yellows, corals, violets, cyans, mints) in reserve strictly for decorative gradient washes and motion artwork, never for UI chrome. The result is restraint with a flash of heat exactly where attention is wanted.

Shape language is gentle. Functional chrome uses soft 5 to 6px radii, larger cards round to 15px, and every button is a full pill (`{rounded.pill}`) so the crimson and white CTAs read as soft, tactile capsules against the hard black field.

**Key Characteristics:**
- True-black canvas (`{colors.background}`) with white Inter type — gallery-at-night minimalism
- Instrument Serif editorial accent paired against Inter for a sans-with-serif signature
- Single saturated crimson signal color (`{colors.primary}`), maroon (`{colors.primary-deep}`) on hover
- Pastel spectrum reserved exclusively for decorative gradients, never UI chrome
- Tight negative letter-spacing on display Inter (-1px to -2px)
- Full-pill CTAs (`{rounded.pill}`); soft 5–6px radii on inputs and small chrome
- Inverted light sections (`{colors.surface-light}`) used for contrast breaks
- Hairline borders (`{colors.border}`) instead of heavy dividers

## Colors

### Primary
- **Black** (`{colors.background}`): The dominant canvas — true black, the foundation of the entire system.
- **White** (`{colors.ink}`): Primary text, headings, logo, and the secondary pill button surface.
- **Crimson** (`{colors.primary}`): The single signal color — primary CTA fill, focus rings, key highlights.
- **Deep Maroon** (`{colors.primary-deep}`): Crimson CTA hover/active state.

### Surfaces
- **Surface** (`{colors.surface}`): Standard dark card background, a hair above the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Inset panels, inputs, badges.
- **Surface Light** (`{colors.surface-light}`): Inverted bright sections and light cards.
- **Surface Light Soft** (`{colors.surface-light-soft}`): Light section secondary tint, secondary button hover.

### Ink
- **Ink** (`{colors.ink}`): Primary white text.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted descriptions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder, disabled, fine print.
- **Ink on Light** (`{colors.ink-on-light}`): Black text on inverted light sections.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers, ghost-button strokes.
- **Border Soft** (`{colors.border-soft}`): Hairline separators, nav underline.

### Decorative Spectrum (gradients only)
- **Spectrum** (`{colors.spectrum-pink}`, `{colors.spectrum-violet}`, `{colors.spectrum-cyan}`, `{colors.spectrum-mint}`, etc.): A pastel rainbow used solely for atmospheric gradient washes and motion artwork. Never applied to buttons, text, or functional chrome.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Inter Placeholder, sans-serif`
- **Editorial Accent**: `Instrument Serif`, with fallbacks `Georgia, serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 80px Inter hero — billboard impact |
| `display-serif` | 80px Instrument Serif accent within hero |
| `section-heading` | 60px section titles |
| `sub-heading` | 50px lighter sub-sections |
| `card-title` | 30px feature/card headings |
| `card-title-serif` | 30px serif accent in cards |
| `body-large` | 26px light intros |
| `body` | 20px standard reading text |
| `body-small` | 16px standard UI text |
| `body-medium` | 16px emphasized/nav text |
| `button-ui` | 14px button + UI labels |
| `caption` | 13px metadata, badges |
| `label-mono` | 12px uppercase eyebrow labels |

### Principles
- **Sans structure, serif soul**: Inter carries the system; Instrument Serif accents a single phrase to add editorial warmth.
- **Negative tracking at scale**: Display Inter compresses to -1px through -2px; body relaxes to 0.
- **Restrained weights**: 300 (light intros), 400 (body), 500 (headings/UI), 600 (tiny labels). 700 reserved for rare emphasis.
- **Light-weight largeness**: Big headings often sit at weight 400–500, not bold — confidence through scale, not heaviness.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous vertical rhythm: sections separate with `{spacing.4xl}`–`{spacing.5xl}` of breathing room.

### Grid & Container
- Max content width: approximately 1200–1280px
- Hero: centered single column with generous top padding
- Feature sections: 2–3 column grids on dark cards
- Inverted light sections used as deliberate contrast breaks

### Whitespace Philosophy
- **Darkness as space**: The black canvas does what whitespace does in light systems — it isolates and elevates each element.
- **Generous section rhythm**: Large vertical gaps; content never crowds.
- **Hairline separation**: Borders are whisper-thin (`{colors.border-soft}`), separation comes from space, not weight.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border | Page background, text blocks |
| Ring (Level 1) | `1px solid {colors.border}` | Standard dark cards |
| Soft Inset (Level 1b) | `{colors.surface-soft}` fill, `{colors.border-soft}` | Inputs, inset panels |
| Inverted (Level 2) | `{colors.surface-light}` fill | Light contrast cards |
| Focus | `2px {colors.primary}` ring | Keyboard/active focus on interactive elements |

**Depth Philosophy**: Skarlo avoids drop shadows almost entirely — depth comes from surface luminance steps (black → `{colors.surface}` → `{colors.surface-soft}`) and hairline borders, not from blur. Cards feel set into the canvas, not floating above it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved, full-bleed media |
| `sm` | 5px | Inputs, small chrome |
| `md` | 6px | Functional containers |
| `lg` | 15px | Cards, image containers |
| `xl` | 24px | Large panels |
| `pill` | 100px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Crimson fill, white text, full pill. The single high-signal CTA. Hover deepens to maroon.
- **`button-secondary`** — White pill with black text on the dark canvas. The neutral high-contrast action.
- **`button-ghost`** — Transparent with `{colors.border}` stroke, white text. Tertiary action.

### Pills & Badges
- **`badge`** — Soft dark surface, muted text, hairline border, full pill. Eyebrow labels and tags.

### Cards
- **`card`** — `{colors.surface}` fill, hairline border, 15px radius. The default container.
- **`card-soft`** — Deeper inset panel for nested content.
- **`card-light`** — Inverted white card for contrast-break sections.

### Inputs
- **`input`** — Soft dark surface, hairline border, 5px radius. Focus switches border to crimson (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Black sticky header, white Inter 14px links, hairline bottom border. Crimson or white pill CTA right-aligned.

### Decorative
- **Spectrum gradients** — Multi-stop pastel washes (`{colors.spectrum-pink}` → `{colors.spectrum-violet}` → `{colors.spectrum-cyan}` → `{colors.spectrum-mint}`) behind hero or motion artwork. Atmospheric only — never on functional chrome.

## Do's and Don'ts

### Do
- Keep the canvas true black (`{colors.background}`) with white Inter text
- Pair Instrument Serif as an accent against Inter for the signature voice
- Reserve crimson (`{colors.primary}`) for the single most important action per view
- Use full-pill radius on all buttons and badges
- Build depth from surface-luminance steps and hairline borders, not shadows
- Use light weights (400–500) on large headings — confidence through scale
- Keep the pastel spectrum decorative — gradients and motion only

### Don't
- Don't apply spectrum pastels to buttons, text, or UI chrome
- Don't use more than one crimson CTA in a single view — it loses its signal
- Don't add heavy drop shadows — depth is luminance-based
- Don't bold large headings to 700 — the system stays light
- Don't use positive letter-spacing on display Inter
- Don't introduce a second saturated accent — crimson is the only signal color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales 80px → ~40px |
| Tablet | 600–1024px | 2-column grids, reduced section padding |
| Desktop | 1024–1280px | Full layout, max content width |
| Large | >1280px | Centered, generous margins |

### Touch Targets
- Pill buttons use 14px vertical / 28px horizontal padding
- Nav links at 14px with comfortable spacing
- Badges have 6px vertical padding for tap comfort

### Collapsing Strategy
- Hero: 80px → ~40px, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: 140px → ~64px on mobile
- Spectrum gradients simplify on mobile to preserve performance

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Black `{colors.background}`
- Heading/body text: White `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Primary CTA: Crimson `{colors.primary}` (hover `{colors.primary-deep}`)
- Card surface: `{colors.surface}` with `1px solid {colors.border}`
- Focus ring: Crimson `{colors.primary}`

### Example Component Prompts
- "Hero on black. Headline at 80px Inter weight 500, line-height 1.05, letter-spacing -2px, color `{colors.ink}`, with one word in Instrument Serif 80px weight 400. Subtitle at 26px Inter weight 300, `{colors.ink-secondary}`. Crimson pill CTA (`{colors.primary}`, 100px radius, 14px 28px padding) plus a white pill (`{colors.ink}`, black text)."
- "Dark card: `{colors.surface}` fill, `1px solid {colors.border}`, 15px radius, 28px padding. Title 30px Inter weight 500, letter-spacing -0.6px. Body 16px weight 400, `{colors.ink-secondary}`."
- "Badge: `{colors.surface-soft}` background, `{colors.ink-secondary}` text, `1px solid {colors.border}`, full pill, 6px 14px padding, 13px weight 500."
- "Input: `{colors.surface-soft}` fill, `1px solid {colors.border}`, 5px radius, white text. On focus, border becomes `{colors.primary}`."

### Iteration Guide
1. Black canvas first — everything is subtraction from black, not addition to white
2. One crimson CTA per view; if you need a second action, use the white pill or ghost button
3. Instrument Serif accents exactly one phrase — never set whole paragraphs in it
4. Depth = surface luminance step + hairline border; resist drop shadows
5. Pastel spectrum is decoration only — keep it out of functional UI
6. Large headings stay light (400–500) with tight negative tracking

---

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