---
version: alpha
name: Flesh and Bones
description: Editorial creative-studio identity — a warm cream canvas paired with near-black ink, a single molten-orange accent, and Tomarik Brush hand-painted display type that gives marketing-grade swagger over an otherwise restrained Helvetica-class sans body.
colors:
  # Canvas + ink
  background: "#faeed9"      # warm cream paper canvas
  surface: "#faeed9"
  surface-dark: "#1a1a1a"    # inverted near-black section
  ink: "#1a1a1a"             # near-black text on cream
  ink-pure: "#000000"
  on-dark: "#faeed9"         # cream text on the dark inverted sections
  on-dark-pure: "#ffffff"

  # Accent
  primary: "#f25f36"         # molten orange — CTAs, hover, highlights
  on-primary: "#1a1a1a"      # near-black text on the orange fill

  # Interactive
  link-blue: "#007aff"       # system blue links

  # Muted / overlay (flattened over cream where translucent)
  ink-muted: "#8d877f"       # was #1a1a1a80 over cream — secondary text
  overlay-scrim: "#808080"   # was rgba(0,0,0,.5) — media scrims (mid-gray approximation)
  border-soft: "#e6dcc8"     # was #00000026 over cream — hairline dividers

typography:
  display-hero:
    fontFamily: "tomarik-brush, Georgia, serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1px
  display-section:
    fontFamily: "tomarik-brush, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.5px
  display-card:
    fontFamily: "tomarik-brush, Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  # Primary orange CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Ghost / outline on cream
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Inverted button on dark section
  button-on-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Work grid item (project tile)
  card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 0px

  # Card heading in brush display
  card-title:
    textColor: "{colors.on-dark}"
    typography: "{typography.display-card}"

  # Pill tag / category chip
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

  # Inverted full-bleed CTA section
  section-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-section}"
    padding: 96px 32px

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

  # Avatar / circular media
  avatar:
    backgroundColor: "{colors.surface-dark}"
    rounded: "{rounded.pill}"
    size: 48px

  # Footer
  footer:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-small}"
    padding: 64px 32px
---

# Flesh and Bones Design System

## Overview

Flesh and Bones is a creative production studio, and its site behaves like one — the design system is a piece of art direction, not an engineering spec. The dominant move is a warm cream paper canvas (`{colors.background}`) that reads like primed gallery stock, set against near-black ink (`{colors.ink}`) for type. Where most studios reach for stark white, this one chooses warmth: the cream gives every page a tactile, almost printed-poster feeling that immediately separates the brand from the cool blue-grey defaults of tech.

The signature is the typography. Headlines are set in **Tomarik Brush**, a hand-painted brush-script display face loaded via Adobe Typekit. Brush type at billboard scale (up to ~96px) gives the studio its swagger — every hero title looks like it was lettered by hand on a film poster. This expressive display layer is deliberately counterbalanced by a quiet, neutral Helvetica-class sans (`{typography.body}`) for all running copy, so the brush never has to work as a reading font. The contrast between painted display and clinical body is the entire personality.

The third pillar is a single, uncompromising accent: molten orange (`{colors.primary}`). It is the only chromatic color in the system — used for CTAs, hover states, category tags, and highlights. Nothing competes with it. Inverted sections flip the palette to a near-black ground (`{colors.surface-dark}`) with cream type, used for full-bleed CTA breaks and the footer. The result is a three-tone editorial system — cream, near-black, orange — with brush type as the brand's voice and Helvetica as its narrator.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of white — printed-poster warmth
- Tomarik Brush hand-painted display type for all headlines, up to ~96px
- Neutral Helvetica-class sans for body — quiet narrator under an expressive display
- A single accent color: molten orange (`{colors.primary}`), used sparingly and decisively
- Inverted near-black sections (`{colors.surface-dark}`) for CTA breaks and footer
- Pill-shaped buttons with hover that flips orange → near-black
- Minimal radius vocabulary: sharp 4px tiles, full pills, perfect circles
- System blue (`{colors.link-blue}`) reserved for inline text links

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): The paper canvas — page background and most surfaces. Warm, not white.
- **Near-Black** (`{colors.ink}`): Primary text on cream; also the inverted section ground.
- **Surface Dark** (`{colors.surface-dark}`): Full-bleed inverted sections, project tiles, footer.
- **On Dark** (`{colors.on-dark}`): Cream type used on the dark sections.

### Accent
- **Molten Orange** (`{colors.primary}`): The only chromatic color — CTAs, tags, highlights, hover. Text on it is near-black (`{colors.on-primary}`).

### Interactive & Muted
- **Link Blue** (`{colors.link-blue}`): Inline system-blue text links.
- **Ink Muted** (`{colors.ink-muted}`): Secondary copy — flattened 50% near-black over cream.
- **Border Soft** (`{colors.border-soft}`): Hairline dividers — flattened 15% black over cream.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Mid-gray media scrim over imagery.

## Typography

### Font Family
- **Display**: `tomarik-brush` (Adobe Typekit), with fallbacks `Georgia, serif` — hand-painted brush script for all headlines.
- **Body**: `Helvetica Neue, Helvetica, Arial, sans-serif` — neutral grotesque for running copy, labels, captions.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | ~96px brush hero — film-poster scale |
| `display-section` | Section titles in brush |
| `display-card` | Project / card titles in brush |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading copy |
| `body-small` | Footer, fine print |
| `label` | Buttons, nav — slightly tracked uppercase-leaning |
| `caption` | Tags, metadata |

### Principles
- **Painted display, neutral body**: Tomarik Brush carries 100% of the brand expression; the sans never tries to emote.
- **Scale is the drama**: Headlines go large (64–96px) — brush type needs room to breathe and show its strokes.
- **One weight body**: The site ships a single 400 weight on the sans; hierarchy comes from size and the brush, not from bold.
- **Tracking on labels only**: Slight positive letter-spacing on small labels/captions for legibility; display stays tight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening to large 96–160px section gaps for the gallery cadence.

### Grid & Container
- Full-bleed work grid of project tiles on the dark ground
- Generous gutters; tiles use minimal 4px radius so imagery stays sharp
- Inverted CTA sections break the cream flow at full width

### Whitespace Philosophy
- **Cream as breathing room**: The warm canvas does the work white usually does — sections separated by space, not lines.
- **Section inversion for rhythm**: Cream → near-black → cream alternation paces the page.
- **Brush headlines anchor**: Large painted titles act as the visual landmarks between content blocks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, sections |
| `sm` | 4px | Project tiles, image containers |
| `pill` | 9999px | Buttons, tags |
| `circle` | — | (use pill on equal-sized box) |

## Components

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

### Buttons
- **`button-primary`** — Orange pill, near-black text. Hover flips to near-black fill with cream text.
- **`button-ghost`** — Cream with near-black outline, full pill.

### Cards / Tiles
- **`card`** — Project tile on the dark ground, minimal 4px radius, brush title overlaid.

### Tags & Nav
- **`badge`** — Orange pill category chip.
- **`nav-bar`** — Cream header, tracked labels, hairline bottom divider.

### Distinctive
- **`section-dark`** — Full-bleed inverted CTA break, brush section title in cream over near-black.
- **`footer`** — Near-black ground, cream copy, studio + location info.

## Do's and Don'ts

### Do
- Use the warm cream (`{colors.background}`) as the default canvas — never plain white
- Set all headlines in Tomarik Brush at large scale
- Keep orange (`{colors.primary}`) as the only accent, used decisively
- Pair painted display with a quiet Helvetica-class body
- Use inverted near-black sections for CTA breaks and footer
- Keep project tiles sharp (4px) so imagery dominates

### Don't
- Don't set body or reading copy in the brush face
- Don't introduce a second accent color — orange stands alone
- Don't add bold weights to the sans; hierarchy comes from scale + brush
- Don't round project tiles heavily — keep media edges crisp
- Don't use cool greys; the warmth of cream is the brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, brush hero scales down, stacked tiles |
| Tablet | 600–1024px | 2-column work grid |
| Desktop | >1024px | Full multi-column grid, max display scale |

### Collapsing Strategy
- Hero brush title scales down proportionally; tight tracking maintained
- Work grid: multi-column → single column on mobile
- Nav: tracked links → menu toggle
- Section padding: 96–160px → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Cream `{colors.background}`
- Text: Near-Black `{colors.ink}`
- Accent / CTA: Molten Orange `{colors.primary}`
- Inverted ground: `{colors.surface-dark}` with cream text `{colors.on-dark}`
- Link: System Blue `{colors.link-blue}`

### Example Component Prompts
- "Hero on cream `{colors.background}`. Headline in Tomarik Brush at 96px, line-height 0.95, color `{colors.ink}`. Orange pill CTA (`{colors.primary}` fill, near-black text, 9999px radius, 14px 28px padding) that flips to near-black on hover."
- "Project tile: image on `{colors.surface-dark}`, 4px radius, brush title at 40px in cream `{colors.on-dark}` overlaid bottom-left."
- "Inverted CTA section: full-bleed `{colors.surface-dark}`, brush section title 64px in cream, orange pill button."

### Iteration Guide
1. Cream canvas first — warmth is the brand
2. Brush for headlines only; Helvetica for everything readable
3. Orange is the sole accent — never dilute it
4. Alternate cream and near-black sections for rhythm
5. Keep media edges sharp (4px), buttons fully pill

---

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