The Brand Report — Design System

A publication, not a product dashboard.

Tokens, typography, and a small set of reference components for editorial surfaces in outdoor sport and lifestyle. Tight on purpose — the constraints are the brand.

v0.1.0Newsreader · InterParchment · One orangegithub.com/dcoe-tbr/tbr-design-system
Browse

The system

Three surfaces hold everything together: a small palette, a strict type system, and a handful of components built on both.

01 — Palette

Color

Four ramps, one accent. Parchment is the page; orange does the highlighting.

02 — Voice

Typography

Newsreader for editorial, Inter for functional. The full type scale, side by side.

03 — Library

Components

Button, Card, Tag, Input, Divider, ArticleHeader — the reference implementations.

The two rules

If you only remember two things

  1. Only one orange element per view does real work. Everything else is neutral.
  2. Editorial pages live on parchment (--tbr-bg-02) — never pure white.