brand-tokens

name	brand-tokens
description	Manzanita Research visual identity tokens — colors, typography, and texture direction. Apply these whenever building any visual interface (web, terminal, print, slides) for a Manzanita project. Other design skills (frontend-design, tui-design) reference this as their brand layer. Use this skill when you need the specific color values, font settings, or visual identity rules for Manzanita Research, even if you're not using one of the design skills.
license	Complete terms in LICENSE.txt

Manzanita Research — Visual Identity Tokens

This is the single source of truth for Manzanita's visual identity. Colors, typography, and texture direction live here. Design skills (frontend-design, tui-design) reference this file for brand-specific values — the craft guidance lives in those skills, not here.

The Manzanita Look

Whole Earth Catalog meets Laurel Canyon. Analog warmth in digital spaces. Sun-faded, textured, unhurried. Like a workshop with good light and interesting tools on the walls.

What it is: Warm, editorial, handmade-feeling. Film stock over digital. Dense information presented with care. Calm confidence.

What it is not: Startup templates. Purple gradients. Glassmorphism. Neon accents. Pure black-on-white. Rainbow ANSI vomit. Anything built to impress in a demo GIF rather than to use every day.

Color Palette

These are the canonical Manzanita colors. Use the semantic names, not raw hex — it makes intent clear.

Token	Hex	Role
cream	#FAF9F6	Page backgrounds, canvas
warm-black	#2C2C2C	Primary text
bark	#6B3A2A	Deep accent, manzanita bark. Borders, emphasis
terracotta	#C2714F	Primary warm accent. CTAs, active states
sage	#8B9E7E	Success, healthy, linked, good states
ochre	#C49A3C	Highlights, warnings, gold accent
rust	#A0522D	Tertiary accent, error states
lavender-dried	#9B8EA8	Subtle accent, tags, metadata
fog	#E8E5DF	Borders, dividers, subtle separators
dusk	#5C5C5C	Muted/secondary text

Color rules

• Use color sparingly. Most of the interface should be cream, warm-black, fog, and dusk. Color draws attention — use it where attention belongs.
• Status uses the landscape palette: sage for good, ochre for caution, rust for problems, terracotta for active/selected. These map to natural states (green growth, golden warning, red-brown danger) without the aggressive pure-red/green/blue of most UIs.
• Never use pure red, green, or blue. Everything is warm and muted.
• Respect system preferences. Support prefers-color-scheme on web, NO_COLOR in terminals. The palette works on both light and dark backgrounds — on dark, swap cream and warm-black roles.

Tailwind config (web)

colors: {
  cream: '#FAF9F6',
  'warm-black': '#2C2C2C',
  bark: '#6B3A2A',
  terracotta: '#C2714F',
  sage: '#8B9E7E',
  ochre: '#C49A3C',
  rust: '#A0522D',
  'lavender-dried': '#9B8EA8',
  fog: '#E8E5DF',
  dusk: '#5C5C5C',
}

Lip Gloss constants (terminal)

const (
    colorCream      = lipgloss.Color("#FAF9F6")
    colorWarmBlack  = lipgloss.Color("#2C2C2C")
    colorBark       = lipgloss.Color("#6B3A2A")
    colorTerracotta = lipgloss.Color("#C2714F")
    colorSage       = lipgloss.Color("#8B9E7E")
    colorOchre      = lipgloss.Color("#C49A3C")
    colorRust       = lipgloss.Color("#A0522D")
    colorLavender   = lipgloss.Color("#9B8EA8")
    colorFog        = lipgloss.Color("#E8E5DF")
    colorDusk       = lipgloss.Color("#5C5C5C")
)

Typography

Three typefaces. Each has a specific job.

Display: Fraunces

Variable font from Google Fonts. Warm, expressive, slightly wonky — the brand voice in type.

Critical settings — always apply both:

font-variation-settings:
  "WONK" 1,
  "SOFT" 100;

Never use Fraunces without wonk and full soft. Without these it looks like a different font entirely.

Loading from Google Fonts (include all variable axes):

family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1

Optical sizing (opsz) is automatic — don't set it manually.

Use for: Headlines, hero text, feature titles, anything that needs personality. Set large, with negative letter-spacing (-0.02em) and tight line-height (1.1).

Body: Literata

Warm, bookish variable serif. Designed for long reading — looks best at 16px. Load weights 400 and 600 from Google Fonts.

Alternatives (if Literata isn't available): Lora, Crimson Pro, Libre Baskerville. All are warm serifs that pair well with Fraunces.

Use for: Body text, documentation, long-form reading. Set at font-size: 16px with generous line-height (1.7–1.8), comfortable measure (max-width: 38rem), and text-wrap: pretty where supported.

Monospace: Commit Mono

Custom Manzanita build, self-hosted from org/fonts/CommitMono-Variable.woff2.

OpenType features — always enable:

font-feature-settings:
  "cv01" 1,
  "cv03" 1,
  "cv04" 1,
  "cv06" 1,
  "cv11" 1,
  "ss01" 1,
  "ss02" 1,
  "ss03" 1,
  "ss04" 1,
  "ss05" 1;

Use for: Code blocks, UI labels in tool interfaces, terminal output, data tables. Anywhere precision matters.

Fonts to avoid

Never use as primary typefaces: Inter, Roboto, Arial, Space Grotesk, Poppins, Geist Mono, system defaults. These are fine fonts — they're just not Manzanita. The whole point of the type system is warmth and character over geometric neutrality.

Texture & Atmosphere

The Manzanita look has physical presence. It shouldn't feel like a flat digital surface.

• Film grain overlays: Subtle noise at 0.03–0.08 opacity. Adds warmth and breaks up flat color fields. On web, use a CSS pseudo-element or SVG filter. In image prompts, specify film stock.
• Warm gradients: Cream to fog, terracotta to rust. Always warm-to-warm, never cool tones.
• Material surfaces: Paper-like textures on containers. Slight off-white variation rather than perfectly uniform backgrounds.
• Warm-tinted shadows: Never pure black shadows. Use warm-black at low opacity, or bark-tinted shadows for colored elements.
• Photography feel: Candid, natural-light, slightly grainy. Film stock over digital. If generating images, specify: "Kodak Eastman 100T 5247 35mm film, grain, halation, faded warm colors."

When to Use This Skill

This skill provides the raw tokens. How to apply them depends on the medium:

• Building a web interface? Use this + the frontend-design skill (React + Tailwind craft guidance)
• Building a terminal UI? Use this + the tui-design skill (Go + Bubble Tea craft guidance)
• Writing copy? Use the brand-voice skill instead — that's about language, not visuals
• Generating images? Use the generate-hero-prompt skill — it has its own visual language built in
• Just need the hex codes or font names? This skill is all you need