Guidelines

This is the most important section for an AI agent. Almost all off-brand output comes from one move: the agent meets something the system doesn't spell out — a slider, a stepper, a multi-select chip, a chart colour — and fills the gap with a tool default (a red accent, a rainbow chart, a material drop-shadow). The fix is a contract: when in doubt, derive — never invent. The machine-readable version is the fallback block (read it via get_fallback).

The fallback colour set

Resolve any undefined colour from these primitives — and only these:

• Surface → #1A1A1A; raised surface → rgba(255,255,255,0.04) (white at low opacity, never a new hex).
• Text → #FFFFFF (headings/strong), #FFFFFF (running text), #FFFFFF (captions/placeholders/disabled).
• Lines (borders, dividers, tracks, table rules) → rgba(255,255,255,0.12).
• Accent / focus (any active, selected, highlighted, filled-progress, slider-fill or link state) → #FFD700 (yellow). Never red, blue or green.

The protocol

1. Look for a defined token or component first (get_component, list_components, list_tokens). Use it as-is.
2. No exact match? Inherit the nearest defined sibling's language — a new form control behaves like text-input (flat, transparent, bottom-border, yellow focus); a new pill behaves like a button; a new container behaves like card.
3. Still undefined? Compose from the fallback colour set + the radius scale — monochrome surface and text, hairline lines, a single yellow accent; 0px for controls, 100px for pills, 20px for containers.
4. Need a status hue? Use success / warning / error / info — and only for genuine semantic feedback.
5. Need chart colours? Use the chart palette.
6. If you still can't resolve it on-brand, ask the human. A question beats a hallucinated red slider.

The golden default: monochrome plus one yellow accent. An output that is black, white, grey and a little yellow is on-brand; an output with an invented colour is not.

Do

• Build dark-first: #1A1A1A floor, #FFFFFF text, #FFD700 for accents only.
• Set everything in Galton Light (300), Sentence case. Step to 500/700 only for emphasis.
• Nothing renders below 15px on the web — 15px is the hard minimum (section-label eyebrow, badge, captions, code, table headers). Body/reading text (body, buttons, form labels, links, nav) is 18px.
• Keep the leading ratios: Headline ×1.1, Subhead ×1.2, Body ×1.5.
• Use {component.button-yellow} for the signature CTA; keep all buttons pill + uppercase + Bold.
• Keep inputs flat (0px), transparent, bottom-border only, focus → #FFD700.
• Build raised surfaces from white/grey at low opacity (rgba(255,255,255,0.04)).
• Keep the logo white or black, always.
• Hotlink fonts and logos by their absolute https://galton-ai-assets.vercel.app/brand/… URLs (CORS is open); embed the wordmark SVG for any lockup.
• Make every active / selected / focused / filled state the yellow accent — sliders, toggles, tabs, chips, progress, focus rings.
• For anything undefined, derive from the fallback contract: monochrome + one yellow accent; ask the human before inventing.
• In charts, use the chart palette (yellow + neutrals); reserve success/error for genuine good-vs-bad deltas.
• Set H1 / display headlines UPPERCASE; keep everything else Sentence case.

Don't

• Don't color the logo yellow/primary or any color other than white/black. (Hard rule.)
• Don't introduce a new hex for surfaces — derive from white/grey at opacity.
• Don't use #FFD700 as a large fill, or put primary type on white (low contrast).
• Don't uppercase body copy — uppercase is for eyebrow, buttons and badge only.
• Don't add drop shadows or gradients for depth; use the canvas/hairline/raised-surface stack.
• Don't round inputs or square the buttons — form controls are 0px, buttons are 100px.
• Don't substitute a serif or condensed face for Galton — fall back to Montserrat only.
• Don't relativise asset URLs to /brand/… or copy fonts/logos locally — hotlink the absolute https://galton-ai-assets.vercel.app/brand/… URL, or the font silently falls back to Montserrat off-site.
• Don't fake the logo by retyping "GALTON" as styled text — embed the wordmark SVG.
• Don't put the yellow button in the persistent top nav — the nav CTA is the compact secondary/outline pill; yellow is for the primary in-page CTA.
• Don't invent a colour, font, radius or component when the system is silent — derive it from the fallback contract, or ask. (This is the rule that stops the red-slider / rainbow-chart output.)
• Don't use red, blue or green as an accent, selected state, slider fill, link or focus ring — the accent is always the yellow primary.
• Don't use the functional status hues (success/error/info) as decoration, headings or fills; they signal status only.
• Don't colour a chart with a library-default rainbow — use the chart palette (yellow + neutrals).

Breakpoints

Touch Targets

• Buttons render at a comfortable tap height (≥44px effective).
• {component.text-input} and {component.select} are 53px tall.
• {component.checkbox} is 30px (mobile) → 45px (desktop).

Collapsing Strategy

• Top-nav anchor links hide below 720px; the wordmark lockup and the single pill CTA stay.
• form-row two-column grids collapse to one column below ~640px.
• Display headlines step down one size per breakpoint; body stays 18px throughout (the web/body minimum).

Image / Mark Behavior

• SVG marks scale crisply at any size; prefer the vector wordmark for digital and the tagline PNG only for formal/print.