ox™ — Brand Book

01

Essence

The ox does not decorate. It works.

Steady Ground, Not Gloss

The ox stands on solid earth. UI elements should feel the same way — geological layers, overlapping, opaque, organic. Depth comes from stacking flat shapes, the way terrain stacks against the horizon. A whisper of shadow lifts panels from the ground — barely there, like the ox's shadow at noon. Never gradients or chrome. The interface is ground you stand on, not glass you look through.

Seven Colors, No More

An ox is not a peacock. The palette is seven values and absolutely nothing else. Deep indigo, slate, vermillion, clay, warm amber, beige, white. No grays. No tints. No opacity tricks that produce off-palette colors. The mid-tones — slate and clay — are the shadow and path, bridging the extremes so no element needs to fake its weight. The ox carries what it needs and nothing extra. Constraint is strength.

Poster Clarity

The ox is legible from any distance — broad shoulders, unmistakable silhouette. Every screen should have that same immediate readability: bold forms, clear hierarchy, a sense of place. Like a mid-century travel poster, the composition does the work. No filigree. No footnotes.

02

Color Palette

Five primary colors plus two mid-tones. The earth the ox walks, the sky it works under, the sun that warms its back — and the shadow and path beneath its hooves.

#2B2D7C

Deep Indigo

--indigo

The bedrock. Backgrounds, deep surfaces, text, receding layers.

#6B6D8F

Slate

--slate

The ox's shadow on worn stone. Cool mid-tone for muted text.

#E8471B

Vermillion

--vermillion

The brand on the flank. Errors, emphasis. Rare because it means something.

#B8926E

Clay

--clay

Dry earth, the path under hooves. Warm mid-tone for muted text.

#F5A623

Warm Amber

--amber

The sun overhead. Interactive elements, highlights, active states.

#E8D5C0

Warm Beige

--beige

Dry earth. Page background, subtle borders, secondary surfaces.

#FFFFFF

White

--white

Open sky. Cards, panels, input fields. Space where content breathes.

Functional Aliases

--bg-primary:    var(--beige);
--bg-deep:       var(--indigo);
--bg-surface:    var(--white);
--text-primary:  var(--indigo);
--text-inverse:  var(--beige);
--text-muted:    var(--slate);    /* or var(--clay) on dark surfaces */
--text-faint:    var(--clay);     /* or var(--slate) on dark surfaces */
--accent-warm:   var(--amber);
--accent-hot:    var(--vermillion);

Color Rules

No gradients, ever. The ox is solid through and through. Flat fills only.
No opacity to blend colors. Each surface is one of the seven, fully opaque. No half-measures.
No derived shades (lighter indigo, darker beige). The seven are the seven. The ox does not carry optional accessories.
Depth comes from overlapping shapes, the way hills overlap at the horizon. Not from color manipulation.
Text on indigo/vermillion: beige, white, or clay.
Text on beige/white/amber: indigo or slate.
Muted/secondary text: slate on light surfaces, clay on dark surfaces.
Faint/tertiary text: clay on light surfaces, slate on dark surfaces.

The Twelve Themes

Token Matrix

Each cell shows the actual color assigned to that theme×token pair. I=indigo S=slate V=vermillion C=clay A=amber B=beige W=white.

#	Name	bg	srf	ins	fld	onBg	onSrf	onIns	onAcc	head	acc	dng	bdr	bdrS	strp	btn	btnT	mut	fnt
0	noon	W	W	B	B	I	I	I	W	V	V	V	S	I	V	I	W	S	C
1	early-afternoon	W	W	B	B	I	I	I	I	I	A	V	C	I	A	V	W	S	C
2	late-afternoon	B	W	B	W	I	I	I	I	I	A	V	S	I	A	A	I	S	C
3	golden-hour	B	W	B	W	I	I	I	I	I	A	V	S	I	A	V	W	S	C
4	sunset	B	I	W	W	I	B	I	I	V	A	V	S	V	A	V	W	C	S
5	dusk	I	W	B	W	B	I	I	I	A	A	V	S	A	V	V	W	S	C
6	twilight	I	I	W	W	B	B	I	I	A	A	V	S	A	A	V	W	C	S
7	evening	I	I	B	B	B	B	I	I	A	A	V	S	B	A	A	I	C	S
8	night	I	I	B	B	W	W	I	I	A	A	V	S	A	V	V	W	C	S
9	midnight	I	I	W	W	W	W	I	I	W	A	V	S	A	V	A	I	C	S
10	dawn	I	B	W	W	B	I	I	W	A	V	V	S	A	A	A	I	S	C
11	late-morning	W	B	W	W	I	I	I	W	I	V	V	S	I	I	A	I	S	C

03

Typography

Three faces. Sturdy, legible, purposeful. Like the ox, each typeface has a clear job and does it without complaint.

Manrope

display The ox's steady gaze. Semi-condensed, geometric, sturdy at every weight.

ManropeRegular (400)

ManropeSemiBold (600)

ManropeBold (700)

ManropeExtraBold (800)

Outfit

body The ox's steady breathing. Warm, humanist, comfortable at reading distance.

OutfitLight (300)

OutfitRegular (400)

OutfitMedium (500)

OutfitSemiBold (600)

IBM Plex Mono

code The ox's harness — functional, precise, engineered for load-bearing.

Brand Title Pattern

oxtm playground

<h1>ox<span style="font-size:.2em;vertical-align:2.5em;margin-left:.15em">tm</span> <span>playground</span></h1>

Type Scale

--step-0 Body text

--step-1 Lead text, subheads

--step-2 Section subheads

--step-3 Section titles

--step-4 Page titles

--step-5 Hero / brand display

--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* Body text */
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* Lead text, subheads */
--step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);            /* Section subheads */
--step-3: clamp(2rem, 1.6rem + 2vw, 3rem);              /* Section titles */
--step-4: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);       /* Page titles */
--step-5: clamp(3rem, 2rem + 5vw, 7rem);                /* Hero / brand display */

Font Loading

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">

04

Illustration Style

The ox's world. Broad valleys, layered ridgelines, the long walk from horizon to horizon. Every illustration is the terrain the ox inhabits — rendered in mid-century modern poster art through contemporary flat vector.

Core Style Preamble

Flat vector minimalist landscape illustration. Strictly limited palette of exactly 5 colors: deep indigo (#2B2D7C), warm amber-orange (#F5A623), vermillion red-orange (#E8471B), white (#FFFFFF), and warm beige (#E8D5C0). No gradients, no outlines, no textures. All forms are smooth opaque silhouettes with organic curves. Simple geometric sun/moon circle. Pill-shaped white clouds. Layered overlapping shapes to create depth. Style of mid-century modern poster art meets contemporary flat vector illustration.

Shape Language

Terrain:: Organic smooth curves, rounded silhouettes. No sharp corners except occasional geometric mountain peaks.
Celestials:: Sun and moon are simple circles — the way an ox sees them, unhurried, overhead. No rays, no glows, no halos.
Clouds:: Pill-shaped (stadium geometry). border-radius: 999px in CSS. Drifting, patient, like the ox itself.
Water:: Sinuous ribbons of white or beige cutting through terrain layers. The rivers the ox fords.
Trees:: Rounded elliptical canopy shapes, overlapping to form forests. Shade for the long rest.

Depth Method

Depth is created only through overlapping opaque flat shapes. Darker values (indigo) recede; warmer values (amber, vermillion) advance. No gradients. No atmospheric perspective. No shadows. Honest depth — the kind you get from walking the land, not from tricks of light.

Composition Variables

Variable	Options
Time of day	Amber-dominant (day) vs. indigo-dominant (night/dusk)
Terrain type	Coastal, mountain, desert, valley, river, volcanic, plains, canyon, archipelago
Composition	Panoramic horizontal layers vs. vertical dramatic feature vs. close-up detail
Sun/moon	High center, low horizon, clipped by terrain, hidden behind clouds
Cloud behavior	Contained within frame vs. breaking/bleeding past the edge

Scene Prompts

Coastal / Ocean

A sweeping coastal scene. Dark indigo ocean with a large curving wave in the foreground. Orange-amber sand dunes along the shore. A red-orange setting sun sits low on the horizon, partially clipped by a rolling hill. Two white pill-shaped clouds float above. Beige sky background.

Desert Canyon

A deep canyon viewed from above. Layered indigo shadow walls recede into depth. Amber and red-orange sunlit cliff faces in the foreground. A winding white river cuts through the canyon floor. Small circular orange sun high in an indigo sky. One cloud breaks the frame edge.

Alpine / Snow Peaks

Jagged mountain peaks in indigo and red-orange, overlapping in layers. White snow caps on the tallest peaks. A large amber-orange sun behind the mountains casting the sky in warm tones. Smooth rolling indigo foothills in the foreground. Clouds drifting across the mid-ground.

Rolling Hills at Dusk

Soft undulating hills layered front to back. Foreground hills in deep indigo, mid-ground in red-orange, background hills in amber. A white moon circle in the indigo sky. Three white clouds scattered across the composition. A sinuous dark river cutting between two hills.

Volcanic / Dramatic

A single tall volcanic peak in red-orange with an indigo base. Amber lava glow at the summit. Dark indigo sky. Layered indigo foothills at the base. Clouds wrapping around the peak, spilling beyond the frame. Small white moon in the upper corner.

Forest Valley

Rounded tree canopy shapes in indigo and red-orange filling a valley. Amber sky above. A gap in the trees reveals a winding white path. Circular orange sun peeking through the canopy. Soft cloud shapes along the top edge.

Generation Parameters

Attribute	Specification
Color strictness	"Use ONLY these 5 hex colors: #2B2D7C, #F5A623, #E8471B, #FFFFFF, #E8D5C0. No other colors."
No gradients	"Completely flat fills, no gradients, no shading, no soft shadows"
No outlines	"No strokes, no outlines, no borders on shapes"
Shape language	"Organic smooth curves, rounded silhouettes, no sharp corners except occasional geometric peaks"
Depth method	"Depth created only through overlapping opaque flat shapes, darker values recede"
Aspect ratio	Square (1:1) for tiles; widescreen for banners
Negative prompts	"No photorealism, no 3D rendering, no texture, no noise, no halftone, no line art, no watercolor, no pencil"

Do / Never

Do

Use only the five palette colors, fully opaque
Create depth with overlapping flat shapes
Use organic curves and smooth silhouettes
Keep sun/moon as simple circles
Make clouds pill-shaped
Let elements bleed past the frame edge
Vary time-of-day and terrain type

Never

Use gradients, shading, or soft shadows
Add outlines, strokes, or borders on illustration shapes
Use texture, noise, halftone, or grain
Introduce colors outside the five
Use photorealism, 3D rendering, or watercolor effects
Add line art, pencil marks, or hand-drawn effects
Use opacity to create blended/derived colors
Add sun rays, glows, lens flares, or atmospheric haze

05

UI Components

The ox's gear is simple, functional, and built to last. No decorative stitching, no polished buckles. Every component earns its place through use. Flat, opaque, layered. Corners are gently rounded (--radius: 6px) — softened like river stones, not sharp-hewn like quarry blocks. Borders are thin (1px) and structural, not heavy. Panels float with a whisper of shadow (--shadow) to suggest depth without drama.

Buttons

Primary

Secondary

Accent

Ghost

.btn {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0.7em 1.8em;
  transition: transform 0.2s;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

Inputs

Text Input

Textarea

.ox-input {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  padding: 0.7em 1em;
  background: var(--white);
  color: var(--indigo);
  border: 1px solid var(--t-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.3s;
}

.ox-input:focus {
  border-color: var(--amber);
}

.ox-input::placeholder {
  color: var(--indigo);
  opacity: 0.3;
}

Badges

IndigoIndigo

AmberAmber

VermillionVermillion

GhostGhost

Status Indicators

Active

Idle

Error

Cards

tool

A card with an amber stripe. The thin band of earth color identifies what the card carries.

system

Indigo stripe for system and configuration items.

error

Vermillion stripe for errors and alerts.

.ox-card {
  background: var(--white);
  border: 1px solid var(--t-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-md);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ox-card:hover {
  transform: translateY(-4px);
}

06

Layout

The ox sees the world as open terrain with features on the horizon. The interface follows: a broad field for conversation, a ridgeline of debug panels along the right edge. Borders are beige — dry earth between the layers.

Structure

+-------------------------------------------------------------+
|                        HEADER: ox™                            |
+------------------------------------------+------------------+
|                                          |    CONTEXT       |
|    Chat                                  |    DEBUGGER      |
|    (scrollable, max-width 720px)         |                  |
|                                          +------------------+
|                                          |    TOOLS         |
|                                          |    PANEL         |
|    [Status Indicator]                    +------------------+
|    [Input Field] [Send]                  |    REQUEST       |
|                                          |    LOG           |
+------------------------------------------+------------------+

Spacing System

--space-xs

8px

--space-sm

16px

--space-md

32px

--space-lg

64px

--space-xl

96px

--space-2xl

160px

Token	Value	px	Usage
`--space-xs`	0.5rem	8	Tight gaps, inline spacing
`--space-sm`	1rem	16	Component padding, list gaps
`--space-md`	2rem	32	Card padding, grid gaps
`--space-lg`	4rem	64	Section padding
`--space-xl`	6rem	96	Major section spacing
`--space-2xl`	10rem	160	Hero/footer vertical padding

Borders and Dividers

Slate/Clay (1px): Subtle structural borders on panels and inputs. Worn paths between fields.
Amber (1px): Active/focused borders, selected panel indicators. Where the sun falls.
Indigo (1px): Strong structural dividers, section breaks. The ridgeline.
Vermillion (1px): Error state borders only. The brand mark — only when it matters.
Stripe (2px): Bottom accent band on panels. The thin stratum that tells you what the card carries.

All bordered containers use border-radius: var(--radius) and box-shadow: var(--shadow) for gentle elevation.

07

Motion

The ox does not rush. Movement is tectonic — slow, weighted, inevitable. Things rise into place the way hills emerge at dawn. Things settle the way dust settles after the plow passes.

Easing Functions

Name	Value	Usage
Enter	`cubic-bezier(0.22, 1, 0.36, 1)`	Elements entering the viewport. The long approach.
Spring	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Interactive feedback. The head toss.
Pulse	`ease-in-out`	Status indicators. The heartbeat.

Enter cubic-bezier(0.22, 1, 0.36, 1)

Spring cubic-bezier(0.34, 1.56, 0.64, 1)

Pulse ease-in-out

Motion Patterns

Enter — rise from below with fade

Pulse — the steady breath

08

Iconography

Icons are the brands and trail markers of the ox's world. Flat filled silhouettes — no strokes, no outlines. Shapes you can read from across the field.

Icon Metaphors

Icon Form	Meaning	Color(s)
Mountain peak	Navigation, peaks	Indigo, white snow cap
Sun (circle)	Active, running	Amber. The working day.
Moon (circle)	Idle, rest	White. The resting night.
Cloud (pill)	Pending, loading	White. Patience.
River (sinuous path)	Data flow, stream	White or beige. The current that carries.
Volcano	Error, alert	Vermillion + amber glow. Danger on the path.
Forest (ellipses)	Tools, collection	Indigo + vermillion. Resources gathered.
Hills (waves)	History, timeline	Amber. Ground already covered.

Construction Rules

All icons are filled silhouettes — no strokes, no outlines. Brands, not sketches.
Use only the five palette colors.
Prefer simple geometric forms: circles, ellipses, triangles with curved edges. Readable from the far ridge.
Icons should work at 48px, 32px, and 16px. Simplify at smaller sizes.
No detail that doesn't read at the smallest target size. If the ox can't see it from the hilltop, it doesn't belong.

09

CSS Variable Reference

The full harness. Every token the system needs, nothing it doesn't.

Colors

:root {
  --indigo:      #2B2D7C;
  --slate:       #6B6D8F;
  --vermillion:  #E8471B;
  --clay:        #B8926E;
  --amber:       #F5A623;
  --beige:       #E8D5C0;
  --white:       #FFFFFF;

  --bg-primary:    var(--beige);
  --bg-deep:       var(--indigo);
  --bg-surface:    var(--white);
  --text-primary:  var(--indigo);
  --text-inverse:  var(--beige);
  --text-muted:    var(--slate);
  --text-faint:    var(--clay);
  --accent-warm:   var(--amber);
  --accent-hot:    var(--vermillion);
}

Typography

:root {
  --font-display: 'Manrope', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --step-5: clamp(3rem, 2rem + 5vw, 7rem);
}

Spacing

:root {
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;
}

Shape

:root {
  --radius:    6px;
  --shadow:    0 1px 3px rgba(0,0,0,0.06);
}

Motion

:root {
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pulse:  ease-in-out;
  --duration-enter:   0.8s;
  --duration-hover:   0.2s;
  --duration-pulse:   1.2s;
  --stagger-delay:    0.15s;
}