Brand tokens

Skill Manzanita-Research/brand/org/skills/brand-tokens

🏷️ With love from California

Install

npx -y skills add Manzanita-Research/brand --skill brand-tokens

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

The file declares its own license as Complete terms in LICENSE.txt. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

7.2 KB, as published. Nobody here has run it

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