---
version: alpha
name: Slate Brief
description: A mid-dark charcoal that is neither night nor paper, one bronze, and a serif that expects to be quoted.
meta:
  id: "theme-slate-brief"
  model: "Claude Fable 5.1"
  author: "Claude Code"
  createdAt: "2026-09-02T16:47:55+09:00"
  updatedAt: "2026-09-02T16:52:36+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Not a dark theme — a slate one
  bestFor: Research and analysis, policy and strategy, investor reporting, internal memos
  avoidFor: Consumer commerce, playful products, anything with heavy imagery
  defaultMode: dark
  surfaceStyle: ruled
  accentUse: underline
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: duotone
  motion:
    intensity: 2
    duration: 190ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Rules extend and retract. Text never moves."
  displayFont: Source Serif 4
  displayKind: serif
  bodyFont: Libre Franklin
  monoFont: IBM Plex Mono
colors:
  background: "#EAEDF0"
  foreground: "#20252C"
  card: "#E1E5E9"
  card-foreground: "#20252C"
  popover: "#E1E5E9"
  popover-foreground: "#20252C"
  primary: "#B56700"
  primary-foreground: "#0A0E12"
  secondary: "#D6DBE1"
  secondary-foreground: "#20252C"
  muted: "#D6DBE1"
  muted-foreground: "#575F69"
  accent: "#155D78"
  accent-foreground: "#F7FBFF"
  destructive: "#B6322D"
  destructive-foreground: "#F7FBFF"
  border: "#C5C9CE"
  input: "#C5C9CE"
  ring: "#B56700"
  chart-1: "#A55D00"
  chart-2: "#B67536"
  chart-3: "#814D16"
  chart-4: "#C2946B"
  chart-5: "#604022"
colorsDark:
  background: "#21262B"
  foreground: "#FFFFFF"
  card: "#2C3137"
  card-foreground: "#FFFFFF"
  popover: "#2C3137"
  popover-foreground: "#FFFFFF"
  primary: "#FDA856"
  primary-foreground: "#070E15"
  secondary: "#373E46"
  secondary-foreground: "#FFFFFF"
  muted: "#373E46"
  muted-foreground: "#A1AAB4"
  accent: "#69B6D8"
  accent-foreground: "#070E15"
  destructive: "#FFA096"
  destructive-foreground: "#070E15"
  border: "#484E55"
  input: "#484E55"
  ring: "#FDA856"
  chart-1: "#DE9046"
  chart-2: "#B97839"
  chart-3: "#EBB07C"
  chart-4: "#93673F"
  chart-5: "#F0C9A8"
typography:
  display-lg:
    fontFamily: Source Serif 4
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Source Serif 4
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Source Serif 4
    fontSize: 21px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Libre Franklin
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Libre Franklin
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Libre Franklin
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Libre Franklin
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: IBM Plex Mono
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 8px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 56px
  gutter: 24px
  margin: 36px
  measure: 68ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 11px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 11px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Slate Brief

## Overview

Slate Brief's dark mode is not black. The ground sits at 26.5% lightness — a
mid-dark charcoal that reads as slate rather than as night, which means text can
be set at a comfortable weight instead of being thinned to survive a black
background. It is the register a long analytical document actually needs.

Structure comes from hairline rules and a persistent margin column. The single
warm colour is a bronze used as an underline and a section marker, never as a
large fill.

Personality: considered, senior, quotable. Confident without being loud.

## Colors

Slate, bronze, one cool blue for citations.

- **Ground (#21262B in dark, #EAEDF0 in light):** Mid-dark slate. Deliberately
  not black — a black ground would force the body text lighter than it should be.
- **Primary (#FDA856):** Bronze. Section markers, the underline beneath a
  heading, the current item in a contents list.
- **Accent (#69B6D8):** Citation blue. Footnote markers, external links, source
  attributions. It is a text colour and never a fill.
- **Cards** are one step up from the slate, ruled rather than shadowed.
- Charts are monochrome in the bronze hue, because a brief usually plots one
  quantity over time.

## Typography

Source Serif 4 for headings and pull quotes, Libre Franklin for body, IBM Plex
Mono for figures and references.

- **Display:** Source Serif at 58px, weight 600. It is a screen-first serif, so
  it holds together on the slate where a print didone would not.
- **Body:** Libre Franklin at 16.5px, 1.58 line height, 68ch measure.
- **Labels:** uppercase Libre Franklin at 11px with 0.14em tracking, in
  muted-foreground. Section numbers are labels.
- **Figures and references:** IBM Plex Mono at 12.5px.

## Layout

A document layout: a 68ch measure in a 1180px frame with a persistent 220px left
margin column carrying section numbers, dates and source references. Pull quotes
break into that margin; body text never does.

Vertical rhythm is 8px. Sections are separated by 56px and a hairline rule that
runs only across the measure, with the section number sitting in the margin
beside it.

## Elevation & Depth

Hairline rules and one tonal step. Nothing is shadowed. A card is a region one
step lighter than the slate with a hairline border; a callout is the same region
with a 3px bronze bar on its left edge.

## Shapes

Nearly square: 6px on cards, 4px on buttons, 2px on badges. Enough to look
drawn, not enough to look soft.

Images are duotoned into slate and bronze, sized to the measure, and captioned
in the margin column rather than beneath.

## Components

- **Buttons:** hairline border, card fill, 4px radius, 11px padding. The primary
  is a bronze fill with slate text and is used once per screen.
- **Section blocks:** number in the margin, heading in Source Serif with a 2px
  bronze underline that extends on hover, body at 68ch.
- **Pull quotes:** Source Serif italic at 26px, breaking one column into the
  margin, with a bronze rule above.
- **Footnotes:** 12.5px, citation blue marker, hairline rule above the block.
- **Badges:** hairline outline, uppercase, no fill.

## Do's and Don'ts

- Do keep the ground mid-dark; this theme breaks if you push it to black.
- Do put numbers, dates and captions in the margin column.
- Do use the bronze as a rule or an underline, not as a fill.
- Don't set body text lighter than the palette's foreground — it is already
  tuned for this ground.
- Don't shadow anything.
- Don't let a pull quote exceed three lines.
- Don't use the citation blue for anything that is not a reference.