---
version: alpha
name: "108"
description: Editorial template-shop minimalism — a serif display face (GT Alpina) paired with Geist Mono running text, a near-white paper canvas with ink-black type, hairline borders, and catalog-style metadata (template IDs, format ratios, prices) treated as part of the visual grammar.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f3"
  ink: "#0a0a0a"
  ink-secondary: "#737373"
  ink-muted: "#a3a3a3"

  # Accent — single restrained signal
  primary: "#0a0a0a"
  accent: "#1a1a1a"
  promo: "#e8462a"

  # Borders / hairlines
  border: "#e5e5e3"
  border-strong: "#d4d4d2"

  # Tag / badge surfaces
  badge-bg: "#f5f5f3"
  badge-text: "#0a0a0a"

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

typography:
  display-hero:
    fontFamily: "GT Alpina, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -1.6px
  display:
    fontFamily: "GT Alpina, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1.0px
  heading:
    fontFamily: "GT Alpina, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-italic:
    fontFamily: "GT Alpina, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  card-title:
    fontFamily: "GT Alpina, Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  meta:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  label-caps:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 4px 0px

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  badge-promo:
    backgroundColor: "{colors.promo}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"

  card-product:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"

  meta-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.meta}"
    padding: 8px 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"

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

# 108 Design System

## Overview

108™ Supply is a template shop, and its interface is built like a printed catalog rendered for the screen. The system pairs an editorial serif display face (GT Alpina) with Geist Mono as the running and UI typeface, so every screen reads as part literary cover, part technical spec sheet. The canvas is paper-white (`{colors.background}`) with ink-black type (`{colors.ink}`), and structure is drawn almost entirely with hairline borders (`{colors.border}`) rather than fills or shadows.

The defining move is treating product metadata as design. Each template carries a catalog ID (108-###), a format ratio (4:3, 19.5:9, 1:1, Multi), a category tag, a release date, and a price — and all of these are set in Geist Mono and given equal typographic weight to the product itself. The monospace face turns this metadata into a grid-aligned data layer that feels precise and inventory-like, the visual equivalent of a parts list.

Color is held almost completely in reserve. The palette is achromatic — ink, grays, and paper — with a single warm promo red (`{colors.promo}`) reserved for the "15% off" banner and launch-drop signals. Nothing else competes. Restraint is the brand; the serif headlines and the monospace metadata do the expressive work, and color stays out of the way.

**Key Characteristics:**
- GT Alpina serif for all headlines and product titles — editorial, literary, slightly compressed tracking
- Geist Mono for body, UI, and all catalog metadata — the "spec sheet" voice
- Paper-white canvas with ink-black type, no decorative color in chrome
- Hairline borders (`{colors.border}`) instead of shadows or fills for structure
- Catalog metadata (ID, ratio, category, price) treated as a first-class visual layer
- Single reserved promo red (`{colors.promo}`) for discounts and launch drops only
- Tight, near-square radii (2–6px) — functional, not friendly
- Uppercase mono labels with positive letter-spacing for tags and categories

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Paper-white page and card surface.
- **Surface Soft** (`{colors.surface-soft}`): Product-tile backing, subtle section tint.
- **Ink** (`{colors.ink}`): Near-black primary text, headings, primary CTA fill.
- **Ink Secondary** (`{colors.ink-secondary}`): Metadata, captions, secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, disabled labels.

### Accent
- **Primary** (`{colors.primary}`): Ink-black — the only "brand" action color.
- **Promo** (`{colors.promo}`): Warm red reserved for discount banners and launch-drop tags.

### Borders
- **Border** (`{colors.border}`): Hairline dividers, card outlines, the structural workhorse.
- **Border Strong** (`{colors.border-strong}`): Inputs and secondary buttons.

### Tags
- **Badge Bg** (`{colors.badge-bg}`): Category-tag surface.
- **Badge Text** (`{colors.badge-text}`): Tag text.

## Typography

### Font Family
- **Display / Headings**: `GT Alpina`, with fallbacks `Georgia, serif` — closest open substitute for catalog rendering is a high-contrast serif (PT Serif-class).
- **Body / UI / Metadata**: `Geist Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

The full type scale lives in the `typography:` block above. Reference tokens directly (`{typography.display-hero}`, `{typography.meta}`).

| Token | Use |
|---|---|
| `display-hero` | Landing headline, serif, slight negative tracking |
| `display` | Section headlines |
| `heading` | Sub-section / drop titles |
| `heading-italic` | Editorial emphasis in serif |
| `card-title` | Product / template titles |
| `body-large` | Intro and lead paragraphs (mono) |
| `body` | Standard reading and UI text (mono) |
| `meta` | Catalog metadata: IDs, ratios, prices |
| `label-caps` | Uppercase category tags |
| `button-ui` | Buttons and links |

### Principles
- **Serif speaks, mono catalogs**: GT Alpina carries voice and title; Geist Mono carries every fact, label, and control. Never swap the roles.
- **Metadata is typeset, not hidden**: prices, IDs, and ratios are set with intent, in mono, aligned to the grid.
- **Positive tracking on caps only**: uppercase mono labels get +0.6px; serif display gets slight negative tracking; body mono stays at 0.
- **One weight, two faces**: serif stays at 400; mono stays at 400–500. No bold theatrics.

## Layout

### Spacing System
Base unit is 8px. The scale climbs to large editorial gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections, keeping the catalog airy.

### Grid & Container
- Catalog grid of product tiles, filterable by category and format ratio.
- Max content width ~1200px, generous side margins.
- Hero is a single serif headline over a mono sub-line and CTA.

### Whitespace Philosophy
- **Catalog air**: tiles breathe; metadata rows sit below each tile with consistent rhythm.
- **Hairline structure**: separation comes from `{colors.border}` lines and spacing, never shadow.
- **Print discipline**: alignment and tracking do the work color usually would.

## Components

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

### Buttons
- **`button-primary`** — Ink fill, white mono label, near-square `{rounded.sm}`.
- **`button-secondary`** — White with `{colors.border-strong}` hairline.
- **`button-text`** — Bare mono link ("Browse templates", "View template").

### Tags & Badges
- **`badge`** — Soft surface, uppercase mono category label.
- **`badge-promo`** — Promo red, for "15% off" and launch-drop signals only.

### Cards
- **`card`** — White, hairline border, mono metadata footer.
- **`card-product`** — Template tile on soft surface with a metadata row (ID, ratio, price) below.

### Inputs
- **`input`** — White, hairline `{colors.border-strong}`, mono text.

### Navigation
- **`nav-bar`** — White header, mono links, hairline bottom border, minimal CTAs.

## Do's and Don'ts

### Do
- Set headlines and titles in GT Alpina serif; set everything else in Geist Mono.
- Treat catalog metadata (IDs, ratios, prices) as typeset design elements.
- Draw structure with hairline `{colors.border}` lines.
- Reserve `{colors.promo}` strictly for discounts and launch drops.
- Use uppercase mono with +0.6px tracking for category tags.

### Don't
- Don't introduce decorative color into chrome — the system is achromatic plus one red.
- Don't use shadows where a hairline border will do.
- Don't set body or metadata in the serif — mono owns the data layer.
- Don't round corners past `{rounded.lg}` (8px); the language is near-square.
- Don't let the promo red appear outside discount/drop contexts.

---

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