---
version: alpha
name: Selected
description: Curated marketplace minimalism — a near-white editorial canvas with charcoal ink, a single laurel-green accent reserved for rankings and badges, hairline neutral dividers, and a clean geometric sans set at tight tracking. Content-first, gallery-quiet, leaderboard-structured.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  ink: "#16181c"
  ink-secondary: "#5b616e"
  ink-muted: "#8a9099"

  # Accent — laurel/badge green, used only for ranks, awards, highlights
  primary: "#1f7a4d"
  accent-soft: "#e7f3ec"
  accent-text: "#166b41"

  # Featured / sponsor highlight
  featured-bg: "#fbf6ea"
  featured-text: "#8a6d2f"

  # Neutral scale
  gray-900: "#16181c"
  gray-600: "#5b616e"
  gray-500: "#8a9099"
  gray-200: "#e6e8eb"
  gray-100: "#eef0f2"
  gray-50: "#fafafa"

  # Borders + dividers
  border: "#e6e8eb"
  border-strong: "#d6d9dd"

  # Interactive
  link: "#16181c"
  focus-ring: "#1f7a4d"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.9px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  rank-number:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  price:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  badge-rank:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px
  badge-featured:
    backgroundColor: "{colors.featured-bg}"
    textColor: "{colors.featured-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px
  badge-category:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 12px 16px
    borderColor: "{colors.border}"

  price-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.price}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
    borderColor: "{colors.border}"

  avatar:
    backgroundColor: "{colors.gray-100}"
    rounded: "{rounded.pill}"
    size: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 14px 24px
    borderColor: "{colors.border}"
---

# Selected Design System

## Overview

Selected is a curated marketplace presented as a leaderboard — a ranked gallery of design templates and the people who make them. The visual system follows the content: it gets out of the way. The canvas is pure white (`{colors.background}`), the ink is a soft near-black charcoal (`{colors.ink}`), and the only saturated color in the entire chrome is a single laurel green (`{colors.primary}`) reserved for ranks, awards, and "best of" badges. Everything else is built from a tight neutral gray scale and hairline dividers.

The structural metaphor is the leaderboard row. Content is organized as ranked lists — a rank number, a creator avatar, a name and title, a category tag, and a price — repeated down the page with hairline `{colors.border}` separators rather than heavy card chrome. Where cards do appear, they are quiet: white surface, 1px neutral border, generous internal padding, gentle `{rounded.lg}` corners. The density is intentional; this is a marketplace that wants you to scan and compare, so it favors information clarity over decoration.

Typography is a clean geometric sans (Inter or a close cousin) carrying the whole identity. Headings use moderate negative tracking (-0.9px to -1.5px) for a compressed, editorial feel, while body and label text sit at a comfortable, legible scale. There is no display serif, no ornament — the restraint is the point. The laurel-green accent and the warm "featured" gold are the system's only chromatic moments, and both are tinted soft so they read as quiet status markers, not loud calls to action.

**Key Characteristics:**
- Pure white canvas with soft-charcoal ink (`{colors.ink}`), never harsh black
- Single laurel-green accent (`{colors.primary}`) reserved for ranks, awards, and badges
- Leaderboard-row structure with hairline `{colors.border}` dividers over heavy cards
- Inter-class geometric sans with tight heading tracking (-0.9px to -1.5px)
- Tinted-soft status badges: laurel-green for rank, warm gold for featured, neutral gray for category
- Dark `{colors.ink}` primary button; white bordered secondary — minimal, functional
- Information-dense but whitespace-disciplined; content leads, chrome recedes

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill, links. Soft charcoal, not pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark.
- **Laurel Green** (`{colors.primary}`): The signature accent — ranks, awards, "best of" markers. Never used as a page fill.

### Accent Tints
- **Accent Soft** (`{colors.accent-soft}`): Background for rank/award badges.
- **Accent Text** (`{colors.accent-text}`): Text on the soft accent badge.
- **Featured Bg** (`{colors.featured-bg}`): Warm gold tint behind sponsored/featured items.
- **Featured Text** (`{colors.featured-text}`): Text on the featured badge.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text, equal to ink.
- **Gray 600** (`{colors.ink-secondary}`): Secondary text, titles, descriptions.
- **Gray 500** (`{colors.ink-muted}`): Tertiary/muted text, placeholders.
- **Gray 200 / Border** (`{colors.border}`): Hairline dividers, card outlines.
- **Gray 100** (`{colors.gray-100}`): Category badge fills, avatar placeholders.
- **Gray 50** (`{colors.surface-soft}`): Subtle input/surface tint.

### Borders
- **Border** (`{colors.border}`): The default hairline separator throughout.
- **Border Strong** (`{colors.border-strong}`): Outline on secondary buttons.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `-apple-system, Segoe UI, Helvetica, Arial, sans-serif`
- A single geometric sans carries headings, body, labels, ranks, and prices alike.

### 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` | 44px page hero — leaderboard title |
| `section-heading` | Section titles |
| `card-title` | Template / creator card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading and row text |
| `body-medium` | Nav, emphasized labels |
| `label` | Buttons, UI labels |
| `caption` | Tags, badges, metadata |
| `rank-number` | Leaderboard rank numerals |
| `price` | Price tags |

### Principles
- **Tracking scales with size**: -1.5px at the 44px hero, easing to near-zero at body. Headings feel compressed and editorial.
- **One family, strict weights**: 400 (read), 500 (UI/labels), 600 (headings/ranks/prices). No 700.
- **Content first**: type never decorates — it organizes a scannable marketplace.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro step and large jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for section breathing room.

### Grid & Container
- Max content width: approximately 1100px, centered
- Leaderboard: single-column ranked list with hairline row dividers
- Card grids: 2–3 columns on desktop, collapsing to single column
- Sections separated by whitespace and 1px `{colors.border}` rules, not background shifts

### Whitespace Philosophy
- **Quiet by default**: white sections separated by hairlines and spacing alone — no alternating fills.
- **Density with air**: rows are information-dense but padded generously (`{spacing.md}`–`{spacing.lg}`) so scanning stays comfortable.
- **Accent as punctuation**: the laurel-green appears rarely and small, marking status rather than filling space.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Tiny chips, inline spans |
| `sm` | 6px | Price tags, small functional elements |
| `md` | 8px | Buttons, inputs |
| `lg` | 12px | Cards |
| `xl` | 16px | Large feature containers |
| `pill` | 9999px | Badges, avatars, tags |

## Components

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

### Buttons
- **`button-primary`** — Soft-charcoal `{colors.ink}` fill, white text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — White surface with a `{colors.border-strong}` outline.

### Badges
- **`badge-rank`** — Soft laurel-green tint, green text, full pill. Rank/award markers.
- **`badge-featured`** — Warm gold tint for sponsored/featured items.
- **`badge-category`** — Neutral gray pill for category tags.

### Cards & Rows
- **`card`** — White, 1px `{colors.border}`, `{rounded.lg}`, padded. No heavy shadow.
- **`list-row`** — Leaderboard row: rank, avatar, name/title, category, price, separated by hairline borders.
- **`price-tag`** — Small bordered tag showing the template price.

### Inputs
- **`input`** — Soft-gray surface, hairline border; focus shifts to white with a laurel-green `{colors.focus-ring}` border.

### Navigation
- **`nav-bar`** — White header, 15px medium links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas white and the ink soft-charcoal, never pure black
- Reserve laurel green for ranks, awards, and status — never as a fill or generic CTA
- Use hairline `{colors.border}` dividers to structure leaderboard rows
- Keep badges tinted-soft so they read as quiet status markers
- Use Inter-class sans with tight heading tracking and a 400/500/600 weight system

### Don't
- Don't make the green a loud primary CTA color — the dark button is the action
- Don't add heavy shadows or alternating section fills — separation comes from hairlines and space
- Don't use weight 700 anywhere — 600 is the ceiling
- Don't let badges shout — they punctuate, they don't dominate
- Don't add display serifs or ornament — the restraint is the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column rows, compact padding, hidden secondary metadata |
| Tablet | 600–1024px | 2-column card grids, full row metadata |
| Desktop | 1024–1200px | Centered ~1100px container, full leaderboard |
| Large | >1200px | Generous side margins, content stays centered |

### Collapsing Strategy
- Leaderboard rows: drop category/price metadata to a second line on mobile
- Card grids: 3 → 2 → 1 column
- Hero: 44px scales down, retains negative tracking proportionally
- Navigation: links collapse to a menu toggle

### Touch Targets
- Buttons use comfortable 10px vertical padding
- Avatars and badges keep adequate tap spacing in dense rows

---

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