---
version: alpha
name: Salt and Bits
description: Quiet studio minimalism — near-black canvas, off-white ink, a single warm-salt accent, and a clean grotesque sans paired with a monospace for labels. Restraint over decoration; depth from hairline borders, not shadows.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#111111"
  surface-soft: "#161616"
  ink: "#f5f5f3"
  ink-secondary: "#a3a3a0"
  ink-muted: "#6b6b68"

  # Accent — warm salt
  primary: "#e8e6e0"
  accent: "#d9c8a9"
  accent-soft: "#2a261d"

  # Borders / hairlines
  border: "#222222"
  border-strong: "#333333"

  # On-color
  on-primary: "#0a0a0a"
  on-accent: "#0a0a0a"

  # Neutral scale
  gray-900: "#141414"
  gray-700: "#2b2b2b"
  gray-500: "#6b6b68"
  gray-300: "#a3a3a0"
  gray-100: "#d4d4d1"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.08px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.19px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.6px
  mono-body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 3px 10px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 20px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
---

# Salt and Bits Design System

## Overview

Salt and Bits presents itself as a quiet, confident studio — the kind of dark, gallery-like interface that lets the work speak and keeps the chrome out of the way. The canvas is a deep near-black (`{colors.background}`), one notch warmer and softer than pure `#000`, with off-white ink (`{colors.ink}`) that reads as paper rather than glare. The whole system trades decoration for restraint: there are no loud gradients, no heavy shadows, and only a single warm "salt" accent reserved for the moments that genuinely deserve emphasis.

Depth comes from hairline borders, not elevation. Surfaces step up in tiny luminance increments — `{colors.surface}` and `{colors.surface-soft}` sit barely above the canvas — and are separated by thin `{colors.border}` lines rather than drop shadows. This produces a layered, almost architectural feel where structure is implied by edges and spacing instead of glow. Cards feel etched into the page.

Typography carries the brand. A clean grotesque sans (Inter as the closest widely-available stand-in) handles display and body with mild negative tracking at large sizes, while a monospace (`{typography.mono-label}`) does the "studio" work — eyebrow labels, section indices, technical captions — in spaced uppercase. The salt/bits duality (craft + code) lives in this sans-plus-mono pairing.

**Key Characteristics:**
- Warm near-black canvas (`{colors.background}`) with off-white ink — never pure black-on-white
- Single warm "salt" accent (`{colors.accent}`) used sparingly; everything else is achromatic
- Hairline borders (`{colors.border}`) carry depth instead of shadows
- Stepped surfaces in micro-luminance increments
- Grotesque sans for reading, monospace for labels and technical voice
- Mild negative tracking at display sizes, neutral tracking in body
- Generous whitespace; gallery rhythm between sections

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): Page background. Warm near-black, softer than pure black.
- **Off-white Ink** (`{colors.ink}`): Headings and primary body text.
- **Salt** (`{colors.accent}`): The single warm accent — labels, highlights, hover marks.

### Surfaces
- **Surface** (`{colors.surface}`): Card and panel fills, one step above canvas.
- **Surface Soft** (`{colors.surface-soft}`): Nested or secondary panels.
- **Light Primary** (`{colors.primary}`): Fill for the primary (light) button on the dark canvas.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, captions, disabled text.

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

### Accent Support
- **Accent Soft** (`{colors.accent-soft}`): Tinted background behind salt badges.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a neutral grotesque standing in for the studio's custom grotesque.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — eyebrows, indices, technical labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 56px hero statement |
| `section-heading` | Section titles |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and links |
| `caption` | Metadata |
| `mono-label` | Uppercase eyebrow labels, indices |
| `mono-body` | Code and technical strings |

### Principles
- **Sans reads, mono labels**: the grotesque carries all prose; the monospace marks technical/structural moments.
- **Tracking scales with size**: mild negative tracking at display (-1.68px), neutral by body, slightly positive on mono labels.
- **Restrained weights**: 400 for reading, 500 for UI, 600 for headings. No heavy black weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) used for gallery-like section breaks.

### Grid & Container
- Max content width: roughly 1100–1200px, centered.
- Hero: single column, generous top padding.
- Work / feature sections: 2–3 column grids of bordered cards.
- Section dividers: full-width 1px `{colors.border}` lines.

### Whitespace Philosophy
- **Gallery emptiness**: large vertical gaps between sections; the dark canvas does the framing.
- **Edges over shadows**: separation comes from hairline borders and spacing, never elevation.
- **One accent**: salt appears rarely, so it always registers.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No border, canvas only | Background, text blocks |
| Hairline | 1px `{colors.border}` | Cards, panels, dividers |
| Strong edge | 1px `{colors.border-strong}` | Inputs, secondary buttons |
| Stepped surface | `{colors.surface}` / `{colors.surface-soft}` fills | Nested panels |

Depth is entirely border- and luminance-driven. There is no meaningful shadow language; the system reads as flat, etched layers.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed |
| `xs` | 4px | Inline chips |
| `sm` | 6px | Buttons, inputs |
| `md` | 8px | Soft cards, code blocks |
| `lg` | 12px | Cards, panels |
| `pill` | 9999px | Badges, tags |

## Components

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

### Buttons
- **`button-primary`** — light fill (`{colors.primary}`) on dark, near-black text. The main CTA.
- **`button-secondary`** — dark surface with `{colors.border-strong}` outline.
- **`button-ghost`** — borderless, muted ink, for tertiary actions.

### Badges
- **`badge`** — salt-tinted background, salt text, pill, monospace label.

### Cards
- **`card`** — surface fill, hairline border, 12px radius.
- **`card-soft`** — softer nested surface, 8px radius.

### Inputs
- **`input`** — surface fill, strong hairline border, 6px radius.

### Navigation
- **`nav-bar`** — canvas background with a bottom hairline border, monospace-adjacent label voice.

### Code
- **`code-block`** — surface fill, monospace body, hairline border.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black (`{colors.background}`), not pure `#000`.
- Use hairline borders for depth instead of shadows.
- Reserve the salt accent (`{colors.accent}`) for genuine emphasis only.
- Pair grotesque sans for prose with monospace for labels.
- Let whitespace frame the content.

### Don't
- Don't introduce heavy drop shadows or glows.
- Don't add a second accent color — the palette is achromatic plus salt.
- Don't use pure white ink on pure black; the warmth matters.
- Don't crowd sections; the gallery rhythm is the brand.
- Don't set body text in monospace — mono is for labels and code.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tighter padding |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full multi-column layout |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px scales down, negative tracking preserved proportionally.
- Work grids: 3-column → 2-column → single column.
- Navigation: inline links → compact menu.
- Section spacing: 120px → ~48px on mobile.

### Touch Targets
- Buttons use comfortable 10px vertical padding.
- Nav links spaced for tap; badges keep 10px horizontal padding.

---

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