---
version: alpha
name: Make Presentable
description: Crafted darkroom editorial — a near-black ink canvas (#0b0a0e) lit by an electric magenta accent (#ff00bf) and a warm cream paper tone (#e6e0c4). Outfit Variable for geometric display warmth, Fragment Mono for the studio's technical labels, generous negative space and oversized headings that feel personal and hand-made.

colors:
  # Canvas + ink
  background: "#0b0a0e"
  surface: "#131316"
  surface-raised: "#181818"
  ink: "#fafafa"
  ink-secondary: "#c9c8c2"
  ink-muted: "#88878a"

  # Brand accent
  primary: "#ff00bf"        # electric magenta — the signature
  on-primary: "#fafafa"
  primary-soft: "#ffccd5"   # soft pink wash
  primary-tint: "#ffeef2"   # faintest pink tint

  # Warm paper tone (light sections / cream cards)
  cream: "#e6e0c4"
  cream-ink: "#222227"      # ink used on cream surfaces

  # Editorial neutrals
  paper: "#fafafa"
  paper-ink: "#0f100b"
  border: "#2a2a30"
  border-soft: "#1f1f24"

  # On-color
  on-cream: "#222227"
  on-paper: "#0f100b"

typography:
  display-hero:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -2.16px
  display:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  heading:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Outfit, Outfit Variable, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  mono-label:
    fontFamily: "Fragment Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  mono-caption:
    fontFamily: "Fragment Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.5px

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

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

components:
  # Primary CTA — magenta
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.cream-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary — cream paper button on dark
  button-secondary:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.cream-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

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

  # Mono tag/label — studio voice
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  # Accent badge
  badge-accent:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  # Dark card / surface block
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  # Cream editorial card — warm paper feature
  card-cream:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.cream-ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 28px

  # Project / portfolio tile
  card-project:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border-soft}"

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

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

# Make Presentable Design System

## Overview

Make Presentable is a brand identity and design studio, and its site behaves like a darkroom for that craft — a deep, near-black canvas (`{colors.background}`) where every element is lit deliberately. This is not the cold minimalism of a tech company; it is warm, editorial, and tactile, built to feel "personal, sensorial, and unmistakably crafted." The darkness is a stage, not a void: oversized Outfit headings, soft cream paper tones, and a single electric magenta accent give the page the intimacy of a printed lookbook rendered in light.

The defining gesture is the collision of two temperatures. The canvas and ink are cool and almost monochrome — `{colors.ink}` off-white on `{colors.background}` charcoal — while two warm anchors break through: the cream paper tone (`{colors.cream}`) used for feature cards and light sections, and the signature electric magenta (`{colors.primary}`) reserved for the studio's most assertive moments. The magenta is loud on purpose; against the muted dark field it reads as a highlighter stroke on a contact sheet.

Typography carries the "clarity and craft" thesis. Outfit (used here as a variable font) is a geometric humanist sans that stays friendly even at billboard sizes — its rounded terminals keep the big headings from feeling corporate. Negative letter-spacing tightens the display sizes into confident, hand-set headlines, while Fragment Mono appears as the studio's technical voice: small uppercase-feeling labels, captions, and tags that read like darkroom annotations or a project ledger. The pairing of a warm display sans with a precise mono is the whole identity in two typefaces.

Layout is generous and unhurried. Sections breathe with large vertical rhythm (`{spacing.4xl}`–`{spacing.5xl}`), portfolio tiles sit on subtly raised surfaces, and chrome stays quiet so the work and the headlines hold the eye. Borders are whisper-soft (`{colors.border}`), never structural, because separation comes from the cream/dark contrast and the spacing rather than from boxes.

**Key Characteristics:**
- Near-black editorial canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — a darkroom, not flat dark mode
- Single loud accent: electric magenta (`{colors.primary}`) used sparingly as the studio's signature
- Warm cream paper tone (`{colors.cream}`) for feature cards and light breaks — the second temperature
- Outfit Variable for warm geometric display headings with tightened negative tracking
- Fragment Mono for technical labels, captions, and tags — the studio's annotation voice
- Pill-radius buttons and tags; soft, mostly invisible borders
- Generous vertical rhythm and gallery-like negative space
- Personal, crafted, editorial feel over corporate minimalism

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): The near-black charcoal page background — warm-leaning, not pure black.
- **Surface** (`{colors.surface}`): Slightly raised dark blocks and cards.
- **Surface Raised** (`{colors.surface-raised}`): Portfolio tiles and elevated panels.
- **Ink** (`{colors.ink}`): Primary off-white text on the dark canvas.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, muted descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, the quietest text.

### Brand Accent
- **Magenta** (`{colors.primary}`): The signature electric pink — CTAs, highlights, key marks. Used sparingly.
- **Primary Soft** (`{colors.primary-soft}`): Soft pink for hover states and gentle washes.
- **Primary Tint** (`{colors.primary-tint}`): Faintest pink, for accent badge backgrounds.

### Warm Paper
- **Cream** (`{colors.cream}`): Warm paper tone for feature cards and light sections — the second temperature.
- **Cream Ink** (`{colors.cream-ink}`): Near-black ink used on cream surfaces for legibility.
- **Paper** (`{colors.paper}`): Bright off-white for the lightest blocks.

### Structure
- **Border** (`{colors.border}`): Soft separator on dark surfaces — barely there.
- **Border Soft** (`{colors.border-soft}`): The faintest divider, for nav and quiet edges.

## Typography

### Font Family
- **Display & Body**: `Outfit` (Outfit Variable), with fallback `sans-serif` — a warm geometric humanist sans.
- **Monospace**: `Fragment Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — the studio's technical/annotation voice.

### 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` | 72px hero — billboard headline |
| `display` | Large section openers |
| `heading` | Section titles |
| `sub-heading` | Sub-sections, intros |
| `card-title` | Project / feature card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Compact UI copy |
| `button-ui` | Buttons and links |
| `mono-label` | Fragment Mono tags and labels |
| `mono-caption` | Fragment Mono metadata, captions |

### Principles
- **Warm geometry**: Outfit's rounded terminals keep even 72px headlines approachable — craft over corporate.
- **Tightened display**: Negative letter-spacing (-2.16px at 72px, easing to 0 at body) gives headlines a hand-set, editorial density.
- **Mono as signature**: Fragment Mono carries the studio voice — small technical labels that read like darkroom annotations. Never use it for long-form body copy.
- **Restrained weights**: 400 for reading, 500 for headings and UI, 600 for the biggest display moments. No heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Built on a roughly 8px rhythm that expands dramatically for section breaks (`{spacing.4xl}`–`{spacing.5xl}`).

### Grid & Container
- Max content width: approximately 1200–1280px
- Hero: large single-column headline with generous top padding
- Portfolio: 2–3 column tile grids on raised dark surfaces
- Feature breaks: cream paper cards interrupting the dark flow

### Whitespace Philosophy
- **Gallery rhythm**: Large vertical gaps between sections let oversized headlines and work breathe.
- **Quiet chrome**: Borders are nearly invisible (`{colors.border}`); separation comes from spacing and the cream/dark temperature shift.
- **Accent restraint**: Magenta appears in small, deliberate doses against the dark field — never as a fill across large areas.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas, no border | Page background, text blocks |
| Surface (Level 1) | `{colors.surface}` block, soft `{colors.border}` | Dark cards, panels |
| Raised (Level 2) | `{colors.surface-raised}` block | Portfolio tiles |
| Paper Break (Level 2b) | `{colors.cream}` card on dark | Warm feature breaks |
| Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Depth is achieved by lightening the surface tone within the dark family (canvas → surface → raised), not by heavy shadows. Cream cards create the strongest figure-ground separation. The magenta accent never participates in elevation — it stays a flat highlight.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, sharp editorial blocks |
| `xs` | 4px | Tiny chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Project tiles |
| `lg` | 16px | Cards, cream feature blocks |
| `xl` | 24px | Large panels |
| `pill` | 9999px | Buttons, tags, badges |

## Components

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

### Buttons
- **`button-primary`** — Electric magenta fill, off-white text, full pill. The signature CTA.
- **`button-secondary`** — Cream paper fill with dark ink — warm contrast against the canvas.
- **`button-ghost`** — Transparent on canvas with a soft `{colors.border}` outline.

### Tags & Badges
- **`badge`** — Dark surface with Fragment Mono label — the studio annotation chip.
- **`badge-accent`** — Faint pink tint with magenta mono text.

### Cards
- **`card`** — Dark raised surface with soft border for content blocks.
- **`card-cream`** — Warm cream paper card — the editorial feature break.
- **`card-project`** — Raised dark portfolio tile.

### Inputs
- **`input`** — Dark surface, soft border. Focus shifts the border to `{colors.primary}` magenta.

### Navigation
- **`nav-bar`** — Quiet dark header with Outfit links and the faintest bottom divider.

## Do's and Don'ts

### Do
- Use the near-black canvas (`{colors.background}`) as a lit stage, not flat dark mode
- Reserve magenta (`{colors.primary}`) for small, deliberate accents
- Use cream (`{colors.cream}`) paper cards to break the dark flow warmly
- Use Outfit with tightened negative tracking on large headlines
- Use Fragment Mono for labels, tags, and captions only
- Keep borders whisper-soft; let spacing and temperature do the separating

### Don't
- Don't fill large areas with magenta — it's a highlighter, not a wall
- Don't use Fragment Mono for long body copy
- Don't add heavy shadows — lighten the surface tone for depth instead
- Don't introduce other saturated hues; the palette is dark + cream + one pink
- Don't use sharp 0px radius on buttons or tags — those are pills
- Don't tighten body text tracking — negative tracking belongs to display sizes only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, tighter padding |
| Tablet | 600–1024px | 2-column tile grids begin |
| Desktop | 1024–1280px | Full multi-column layout, max content width |
| Large | >1280px | Centered with generous side margins |

### Collapsing Strategy
- Hero: 72px → scales down while keeping proportional negative tracking
- Navigation: inline links → menu toggle on mobile
- Portfolio tiles: 3-column → 2-column → single column
- Cream feature cards: side-by-side → stacked
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Primary text: off-white `{colors.ink}`
- Accent / CTA: electric magenta `{colors.primary}`
- Warm break: cream `{colors.cream}`
- Border: soft `{colors.border}`
- Focus ring: magenta `{colors.primary}`

### Example Component Prompts
- "Create a hero on the near-black canvas (`{colors.background}`). Headline at 72px Outfit weight 600, line-height 1.02, letter-spacing -2.16px, color `{colors.ink}`. Lead paragraph at 20px Outfit weight 400, `{colors.ink-secondary}`. Magenta pill CTA (`{colors.primary}`, full pill, 12px 24px padding) plus a cream secondary button (`{colors.cream}`, `{colors.cream-ink}` text)."
- "Design a cream feature card: `{colors.cream}` background, `{colors.cream-ink}` ink, 16px radius, 28px padding. Title at 22px Outfit weight 500, body at 17px weight 400."
- "Build a Fragment Mono tag: `{colors.surface}` background, `{colors.ink-secondary}` text, full pill, 6px 14px padding, 13px Fragment Mono, soft `{colors.border}` outline."
- "Create a dark portfolio tile: `{colors.surface-raised}` background, 12px radius, off-white Outfit title, magenta accent only on hover."

### Iteration Guide
1. Start dark — the canvas is the stage; lighten surfaces for depth, never add heavy shadow
2. Use magenta in tiny, deliberate doses against the dark field
3. Bring in cream paper cards for warmth and figure-ground contrast
4. Outfit for everything visible; Fragment Mono only for technical labels and captions
5. Negative tracking scales with size: -2.16px at 72px, easing to 0px at body
6. Keep borders nearly invisible — spacing and temperature carry the layout

---

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