---
version: alpha
name: Sabertooth
description: Editorial venture-capital minimalism — a near-white paper canvas, near-black ink, and a single warm brown accent drawn from the firm's striped-line motif. Generous whitespace, large aspirational display headings, and restrained sans-serif typography that reads as premium and patient rather than loud.

colors:
  # Canvas + ink
  background: "#faf8f4"
  surface: "#ffffff"
  surface-soft: "#f3efe8"
  ink: "#1a1816"
  ink-pure: "#000000"

  # Warm brown accent (the striped-line motif)
  primary: "#8b6f4e"
  primary-deep: "#6f573a"
  primary-soft: "#efe6d8"

  # Neutral scale
  gray-900: "#1a1816"
  gray-700: "#403a32"
  gray-600: "#5c5448"
  gray-500: "#857b6c"
  gray-300: "#cfc7b8"
  gray-100: "#e7e1d6"

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

  # Borders
  border: "#e0d8ca"
  border-strong: "#cfc7b8"

typography:
  display-hero:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.6px
  display:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1.2px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  link-accent:
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"

  label-eyebrow:
    textColor: "{colors.primary}"
    typography: "{typography.label}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.border}"

  card-portfolio:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 28px
    borderColor: "{colors.border}"

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

  divider-rule:
    backgroundColor: "{colors.primary}"
    height: 2px
---

# Sabertooth Design System

## Overview

Sabertooth's site is venture-capital confidence expressed through restraint. The canvas is a warm near-white paper tone (`{colors.background}`) rather than clinical pure white, and the ink (`{colors.ink}`) is a soft near-black with the faintest brown warmth. The result feels like a printed thesis document — patient, premium, and built to be read, not skimmed. This is a firm that says "Backing the Inevitable" and lets the whitespace carry the conviction.

The single signature color is a warm brown (`{colors.primary}`), pulled directly from the firm's recurring motif of brown striped-line dividers that punctuate the page. Color is used sparingly and deliberately — never as decoration. It marks eyebrow labels, the divider rules, and accent links. Everything else lives in a warm grayscale, so the one accent reads as an editorial signature rather than a brand splash.

Typography pairs a serif display voice with a clean sans body. Large aspirational headings (`{typography.display-hero}` at 64px) set in a refined serif give the marketing language its gravity, while Inter carries the body, navigation, and UI for clarity. Uppercase tracked-out labels (`{typography.label}`) act as the connective tissue between sections, lending the structure a curated, gallery-catalog rhythm.

Layout is built on generous whitespace and a grid-based portfolio showcase. Sections are separated by air and thin brown rules rather than heavy chrome. Imagery is image-forward and high-fidelity (chips, satellites, abstract tech), framed simply so the photography does the talking.

**Key Characteristics:**
- Warm paper canvas (`{colors.background}`) instead of pure white — premium, printed feel
- Single warm brown accent (`{colors.primary}`) from the striped-line motif, used only for labels, rules, and links
- Serif display headings (`{typography.display-hero}`) paired with Inter body/UI
- Uppercase tracked-out eyebrow labels as section connective tissue
- Generous whitespace; sections separated by air and thin brown rules
- Image-forward sections; restrained chrome around high-fidelity photography
- Pill-shaped CTAs in near-black ink

## Colors

### Canvas + Ink
- **Paper** (`{colors.background}`): Page background — warm near-white, not clinical.
- **Surface** (`{colors.surface}`): Pure white for cards and portfolio tiles that need to lift off the paper.
- **Surface Soft** (`{colors.surface-soft}`): Subtle warm tint for alternating bands.
- **Ink** (`{colors.ink}`): Primary text and headings — soft near-black with micro-warmth.

### Accent
- **Sabertooth Brown** (`{colors.primary}`): The signature — eyebrow labels, divider rules, accent links.
- **Brown Deep** (`{colors.primary-deep}`): Hover/pressed accent states.
- **Brown Soft** (`{colors.primary-soft}`): Tinted accent surface for quiet highlights.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text, headings.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Body description copy.
- **Gray 500** (`{colors.gray-500}`): Muted/tertiary text, captions.
- **Gray 300** (`{colors.gray-300}`): Stronger dividers, placeholders.
- **Gray 100** (`{colors.gray-100}`): Hairline separation.

### Borders
- **Border** (`{colors.border}`): Card and section outlines.
- **Border Strong** (`{colors.border-strong}`): Secondary button outline, emphasized edges.

## Typography

### Font Family
- **Display**: `Spectral` (refined serif) with fallbacks `Georgia, serif`
- **Body / UI**: `Inter` with fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — "Backing the Inevitable" |
| `display` | Large section openers |
| `section-heading` | Section titles |
| `card-title` | Portfolio / card headings (sans) |
| `body-large` | Lead paragraphs, thesis copy |
| `body` | Standard reading text |
| `body-small` | Secondary detail |
| `label` | Uppercase tracked eyebrow labels |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, fine print |

### Principles
- **Serif gravity, sans clarity**: Serif for aspirational display language; Inter for everything functional.
- **Tracked-out labels**: Uppercase eyebrows at +1.2–1.5px tracking provide editorial rhythm.
- **Patient hierarchy**: Few sizes, lots of air — contrast comes from scale and whitespace, not weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Whitespace is the primary structural device — section padding reaches `{spacing.3xl}`–`{spacing.4xl}`.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column with generous top padding
- Portfolio: grid/carousel of consistent logo tiles
- Sections separated by air and thin brown rules (`{components.divider-rule}`)

### Whitespace Philosophy
- **Editorial emptiness**: Large vertical padding between sections; the air signals confidence.
- **Brown rules as punctuation**: Thin `{colors.primary}` lines mark section breaks instead of heavy chrome.
- **Image-forward**: Photography framed simply, letting the visuals carry weight.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, rules |
| `xs` | 2px | Inline accents |
| `sm` | 4px | Small containers |
| `md` | 8px | Cards, portfolio tiles |
| `lg` | 12px | Larger media containers |
| `pill` | 9999px | CTA buttons |

## Components

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

### Buttons
- **`button-primary`** — Near-black ink, paper text, pill radius. The default CTA; hovers to brown deep.
- **`button-secondary`** — White surface with `{colors.border-strong}` outline, pill radius.

### Labels & Links
- **`label-eyebrow`** — Uppercase tracked brown label introducing sections.
- **`link-accent`** — Brown accent text link.

### Cards
- **`card`** — White surface lifting off the paper canvas, hairline `{colors.border}`.
- **`card-portfolio`** — Portfolio logo tile, consistent padding and outline.

### Navigation
- **`nav-bar`** — Paper background, minimal Inter links, brown hairline bottom.

### Distinctive Components
- **`divider-rule`** — The signature brown striped-line motif rendered as a 2px `{colors.primary}` rule used as section punctuation.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`) instead of pure white
- Reserve brown (`{colors.primary}`) for labels, rules, and links — never as a fill splash
- Pair serif display with Inter body
- Let whitespace carry hierarchy; sections breathe at `{spacing.3xl}`+
- Use uppercase tracked eyebrow labels to open sections
- Frame photography simply with restrained chrome

### Don't
- Don't use clinical pure-white as the page background
- Don't over-apply the brown accent — it loses its editorial signature
- Don't crowd sections; air is the design
- Don't set body copy in the serif — Inter carries function
- Don't add heavy borders or drop shadows; thin rules and hairlines only
- Don't use bold weights to force hierarchy — scale and space do that

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, stacked portfolio |
| Tablet | 600–1024px | 2-column portfolio grid, reduced section padding |
| Desktop | 1024–1200px | Standard layout |
| Large | >1200px | Centered, maximum content width, generous margins |

### Collapsing Strategy
- Hero serif: 64px → scales down, keeps tight tracking
- Navigation: inline links → minimal mobile menu
- Portfolio: multi-column grid → single column / carousel
- Section spacing: 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Accent (labels/rules/links): Brown `{colors.primary}`
- Primary CTA: Ink `{colors.ink}`, pill radius

### Example Component Prompts
- "Create a hero on warm paper (`{colors.background}`). Headline 'Backing the Inevitable' at 64px Spectral weight 400, letter-spacing -1.6px, color `{colors.ink}`. Eyebrow label above it: uppercase Inter 13px weight 500, tracking 1.5px, color `{colors.primary}`. Lead paragraph 20px Inter `{colors.gray-600}`. Pill CTA in `{colors.ink}` with paper text."
- "Build a portfolio tile: white surface (`{colors.surface}`), hairline border `{colors.border}`, 8px radius, 28px padding, centered logo."
- "Add a section divider: 2px solid `{colors.primary}` rule with generous space above and below."

---

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