---
version: alpha
name: Forrm
description: Logic-before-pixels minimalism — near-black canvas (#050505) with white ink and a single muted sage-green accent, Plus Jakarta Sans across the board with tight negative tracking, oversized clamp-scaled display type, and a restrained radius set (10/20/100px) where nothing exists unless it serves a purpose.

colors:
  # Canvas + ink
  background: "#050505"
  background-pure: "#020202"
  surface: "#1e1e1e"
  ink: "#ffffff"
  ink-secondary: "#cccccc"
  ink-muted: "#aaaaaa"
  ink-faint: "#888888"
  ink-disabled: "#555555"

  # Accent — the only chromatic note
  primary: "#90a389"        # muted sage green
  on-primary: "#050505"

  # Borders / dividers
  border: "#1e1e1e"
  border-soft: "#dddddd"

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

typography:
  display-hero:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -4.8px
  display-mega:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -3.6px
  section-heading:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -3.2px
  sub-heading:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -2.0px
  card-title:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.78px
  body-large:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-caps:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 1.95px
  eyebrow:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 1.12px
  caption-light:
    fontFamily: "Plus Jakarta Sans, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: 0px

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

rounded:
  none: 0px
  md: 10px
  lg: 20px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
    borderColor: "{colors.border-soft}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
    borderColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.background-pure}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 40px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 6px 16px

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Forrm Design System

## Overview

Forrm is a design studio whose website is the literal proof of its own thesis: "Logic before pixels." The page sits on a near-black canvas (`{colors.background}`) and treats the screen as a void to be earned into, not filled. White (`{colors.ink}`) text carries almost all the meaning, and the only chromatic event in the entire system is a single muted sage green (`{colors.primary}`) — a desaturated, almost herbal accent that reads as considered rather than loud. The studio's stated rule, "If it does not serve a purpose, it does not belong," is enforced visually: no gradients, no shadows-as-decoration, no secondary palette competing for attention.

The typographic system is monolithic on purpose. Both the display and body roles resolve to the same family — Plus Jakarta Sans — so the identity comes from scale and tracking, not from font mixing. At display sizes the type goes enormous (clamped up toward 96px and beyond) and is pulled tight with aggressive negative letter-spacing (-3.6px to -4.8px), so headlines feel compressed, structural, and engineered. The weight range is deliberately narrow (300–600), with 400 and 500 doing most of the work; bold is essentially absent. The result is calm authority rather than shouting.

Where Forrm differs from generic dark minimalism is its restraint with shape. There are exactly three meaningful radii: a 10px (`{rounded.md}`) for inputs and small containers, a 20px (`{rounded.lg}`) for cards and surfaces, and a full 100px (`{rounded.pill}`) reserved for buttons and badges. Borders are hairline and dark (`{colors.border}`, a charcoal that barely separates from the canvas), so structure is implied more than drawn. Surfaces lift only slightly, via a near-black charcoal (`{colors.surface}`) over the pure-black base — depth by tonal whisper, never by drop shadow.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with white (`{colors.ink}`) ink — gallery-void minimalism
- One single accent: muted sage green (`{colors.primary}`), used sparingly as the only chromatic note
- Plus Jakarta Sans for everything — identity from scale and tracking, not font mixing
- Oversized clamp-scaled display type with aggressive negative tracking (-3.6px to -4.8px)
- Narrow weight range (300–600); 400/500 carry most of the work, bold avoided
- Three-radius shape language: 10px containers, 20px cards, 100px pills
- Hairline charcoal borders that imply structure rather than draw it
- Wide uppercase label tracking (`{typography.label-caps}`) for nav and buttons — the "console" voice

## Colors

### Primary
- **Void Black** (`{colors.background}`): The page canvas. Near-black, not pure, for micro-softness.
- **Pure Black** (`{colors.background-pure}`): Deepest feature panels and inset surfaces.
- **White** (`{colors.ink}`): Primary text, headlines, logo.

### Accent
- **Sage Green** (`{colors.primary}`): The single accent — CTAs, active states, badge text. Muted and herbal, never neon.
- **On Primary** (`{colors.on-primary}`): Dark text placed on the sage fill.

### Surfaces & Borders
- **Charcoal Surface** (`{colors.surface}`): Cards and lifted panels — a tonal step above the canvas.
- **Border** (`{colors.border}`): Hairline charcoal dividers and card outlines.
- **Border Soft** (`{colors.border-soft}`): Light hairline for ghost-button outlines and rare light contexts.

### Neutral / Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Description copy, secondary text.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary text, captions.
- **Ink Faint** (`{colors.ink-faint}`): Metadata, fine print.
- **Ink Disabled** (`{colors.ink-disabled}`): Disabled and placeholder states.

## Typography

### Font Family
- **Primary**: `Plus Jakarta Sans`, with fallback `sans-serif`
- Used for both display and body roles — no second family.

### 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` | Oversized hero headline — maximum compression |
| `display-mega` | Large statement headlines |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, lighter weight |
| `card-title` | Card and feature headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `label-caps` | Uppercase nav, buttons, badges — wide tracking |
| `eyebrow` | Section eyebrows / kickers |
| `caption-light` | Fine print at weight 300 |

### Principles
- **One family, scaled hard**: Identity comes from size and tracking, not from mixing typefaces.
- **Compression at scale**: Display type uses -3.6px to -4.8px tracking; it relaxes toward 0 at body sizes.
- **Wide tracking for labels**: Uppercase labels invert the rule — positive tracking (~1.1–1.95px) for the "console" voice.
- **Narrow weights**: 300 (fine print), 400 (body), 500 (UI/headings), 600 (display). No 700.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous vertical rhythm — sections separated by `{spacing.3xl}`–`{spacing.4xl}` so the void does the work.

### Grid & Container
- Centered single-column hero with enormous top space
- Feature sections in restrained 2–3 column grids
- Hairline charcoal dividers (`{colors.border}`) for separation, never heavy rules

### Whitespace Philosophy
- **Earned space**: Empty canvas is the default; elements appear only when they serve a purpose
- **Compressed text, expanded space**: Tight display tracking is counterbalanced by large surrounding margins
- **Tonal depth**: Surfaces lift via charcoal-over-black, never via shadow

## Components

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

### Buttons
- **`button-primary`** — Sage fill, dark text, full pill, uppercase wide-tracked label. Inverts to white on hover.
- **`button-ghost`** — Transparent on canvas, hairline outline, white label. Sage border on hover.

### Cards
- **`card`** — Charcoal surface, 20px radius, hairline border.
- **`card-feature`** — Pure-black inset panel, larger padding, card-title type.

### Inputs
- **`input`** — Canvas background, 10px radius, hairline border; sage border on focus.

### Navigation
- **`nav-bar`** — Transparent over canvas, uppercase wide-tracked links, hairline bottom border.

### Badges
- **`badge`** — Charcoal surface, sage text, full pill — the one place accent meets label.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and let white text carry meaning
- Use the single sage accent (`{colors.primary}`) sparingly — CTAs, active states, badge text
- Use Plus Jakarta Sans for everything; vary scale and tracking, not family
- Apply aggressive negative tracking at display sizes (-3.6px to -4.8px)
- Reserve the 100px pill radius for buttons and badges only
- Imply structure with hairline charcoal borders

### Don't
- Don't introduce a second accent color — sage is the only chromatic note
- Don't use drop shadows for depth — lift with charcoal-over-black instead
- Don't use weight 700; 600 is the ceiling
- Don't add positive tracking to display headlines (only uppercase labels get it)
- Don't mix in a second typeface
- Don't fill the void for its own sake — if it doesn't serve a purpose, cut it

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type clamps down to ~140px floor |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1400px | Full multi-column layout |
| Large Desktop | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero: clamp-scaled type shrinks fluidly while preserving negative tracking
- Navigation: horizontal uppercase links → compact menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: `{spacing.4xl}` → tightened on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Void Black `{colors.background}`
- Heading / body text: White `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent / CTA: Sage Green `{colors.primary}`
- Border: hairline `{colors.border}`
- Card surface: Charcoal `{colors.surface}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline in Plus Jakarta Sans, ~96px, weight 600, line-height 1.00, letter-spacing -4.8px, white. Sub in `{colors.ink-secondary}` at 20px weight 400."
- "Design a pill CTA: `{colors.primary}` sage fill, `{colors.on-primary}` dark text, 100px radius, 14px/32px padding, uppercase 13px label weight 500 with 1.95px tracking. Hover inverts to white fill."
- "Build a card: charcoal `{colors.surface}`, 20px radius, hairline `{colors.border}`, 32px padding. Title 26px weight 500, body 17px weight 400 in `{colors.ink-secondary}`."
- "Create nav: transparent over canvas, uppercase wide-tracked links in white, hairline bottom border `{colors.border}`."

### Iteration Guide
1. One accent only — sage green marks action and active state, nothing else
2. Depth is tonal (charcoal over black), never shadow
3. Tracking scales with size: very tight at display, neutral at body, wide at uppercase labels
4. Three radii total — 10px containers, 20px cards, 100px pills
5. If an element doesn't serve a purpose, remove it

---

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