Confident, editorial, high-contrast.

GALTON Brands is a dark-first, editorial, high-contrast brand system. The page floor is a near-black canvas (#1A1A1A — #1A1A1A), text is white (#FFFFFF), and a single signature primary yellow (#FFD700 — #FFD700) carries every accent — CTAs, highlights, focus rings, the hero word. Yellow is never a large fill; on a yellow surface text is always black (#1A1A1A).

Everything is set in one typeface — Galton — at Light (300) in Sentence case. Weight steps up to Medium (500) / Bold (700) only for emphasis; the brand never shouts in uppercase except for the eyebrow label, button labels and the badge. Where Galton can't be embedded (email, Google Docs/Slides, system contexts), Montserrat is the official substitute — it is last in every font stack. Hierarchy is created by size and a leading ratio (Headline ×1.1, Subhead ×1.2, Body ×1.5), not by heavy weights.

The component language is pill-and-flat: buttons are full pills (100px), uppercase, Galton Bold; inputs are flat (0px), transparent, bottom-border only, with a primary-yellow focus. The palette is fixed — no invented shades; raised surfaces are built from white at low opacity (rgba(255,255,255,0.04)), never a new hex.

Key Characteristics:

• Dark-first canvas #1A1A1A (#1A1A1A) with white type. Light surfaces invert to black-on-white.
• One typeface, Galton Light (300), Sentence case. Montserrat is the official substitute. No second display face.
• A single accent: #FFD700 (#FFD700). Used sparingly — CTAs, focus, highlights, the hero accent. Never large fills.
• The logo is white or black ONLY — never yellow/primary or any other color. This is a hard rule.
• Buttons are pill-shaped, uppercase, Bold 700; the signature CTA is {component.button-yellow}.
• Inputs are flat (radius 0), transparent, bottom-border only; focus turns the border #FFD700.
• Fixed palette, no invented shades. Raised surfaces come from white/grey at low opacity.

Brand palette

The brand has three colours, in two groups:

• Primary palette — White (#FFFFFF) and Black (#1A1A1A). The base of the system: black is the dark-first canvas, white is the ink.
• Secondary palette — Yellow (#FFD700). The single accent: CTAs, highlights, focus rings, the hero word. Used sparingly, never a large fill; on a yellow surface, foreground is always black (#1A1A1A).

Everything else (#999999, rgba(255,255,255,0.12), rgba(255,255,255,0.04), body opacities) is a UI grey derived from black/white at opacity — not a new brand colour.

Surface

• Canvas (#1A1A1A — #1A1A1A): The default page floor on every dark surface. The brand is dark-first.
• Surface Raised (rgba(255,255,255,0.04) — white @4%): Cards, modals, raised panels. Built from white at low opacity over the canvas — never a new hex. Pair with a rgba(255,255,255,0.12) border.
• Hairline (rgba(255,255,255,0.12) — white @12%): 1px dividers, table rows, card outlines, the top/bottom bars.
• Light Canvas (#FFFFFF — #FFFFFF): The floor for light surfaces (cards on light, print, email).

Text

• Ink / On Dark (#FFFFFF — #FFFFFF): Headlines and primary text on the dark canvas.
• Body (rgba(255,255,255,0.8) — white @80%): Default running body text — slightly softened from pure white.
• Body Soft (rgba(255,255,255,0.78) — white @78%): Secondary paragraphs and section leads.
• Muted (#999999 — #999999): Captions, metadata, placeholders, disabled states, dividers.
• On Light (#1A1A1A — #1A1A1A): Text and marks on a white/light surface.

Usage Rules

• Default page = #1A1A1A background, #FFFFFF text.
• #FFD700 is for emphasis only — never a large fill. On a primary surface, text is always black.
• Keep the secondary yellow to accents only — never a large fill.
• Need a raised surface? Build it from white/grey at low opacity (rgba(255,255,255,0.04)) — do not introduce a new hex.
• Selection highlight is primary-on-black.

Font Family

The system runs one typeface — Galton — for both headings and body. The variable woff2 covers weights 100–900; static cuts (Thin…Black) exist as a fallback. The default is Light (300), set in Sentence case at normal tracking.

Montserrat is the official substitute: use it wherever Galton can't be embedded (email, Google Docs/Slides, system contexts). It is last in every font stack: Galton, Montserrat, ui-sans-serif, system-ui, sans-serif. There is no second brand face — Galton does everything.

Weights: 100 Thin · 300 Light (default) · 400 Regular · 500 Medium · 700 Bold · 800 Extrabold · 900 Black. There is no dedicated 600 cut — use the variable font for weight 600 (e.g. a live-text wordmark).

Font source & embedding

The Galton typeface ships with this package — don't substitute a lookalike. Load the variable woff2 (one file, weights 100–900):

• File: https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2 (static cuts: https://galton-ai-assets.vercel.app/brand/fonts/Galton-{Thin,Light,Regular,Medium,Bold,Extrabold,Black}.woff2)
• Base URL: https://galton-ai-assets.vercel.app/brand/ (resolved to wherever this is deployed)
• Hotlink these absolute URLs exactly as given — the files are served with permissive CORS (Access-Control-Allow-Origin: *), so a cross-origin @font-face works. Do not relativise them to /brand/fonts/… (that resolves against your host and 404s, silently falling back to Montserrat) and don't copy the file locally.

@font-face {
  font-family: "Galton";
  src: url("https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Then use the stack Galton, Montserrat, ui-sans-serif, system-ui, sans-serif. Montserrat is the substitute and loads from Google Fonts (https://fonts.google.com/specimen/Montserrat) — it is last in the stack and only kicks in where Galton can't be embedded. The full fonts block in the frontmatter lists every file, format and the ready-to-paste @font-face.

Hierarchy

All Galton Light (300), Sentence case. Leading (line-height) is a ratio of the type size. Display sizes are responsive; the token value is the desktop maximum.

Principles

Emphasis comes from size and leading, then a small step in weight (300 → 500/700) — never from uppercase body copy. The rule of thumb for any new size: Headline ×1.1, Subhead ×1.2, Body ×1.5 leading, with a purposeful jump between levels.

Uppercase appears in exactly three places: the eyebrow label, button labels, and the badge. Everything else is Sentence case.

Note on Font Substitutes

If Galton is unavailable, fall back to Montserrat (Google Fonts) — the official substitute, already last in every stack. Montserrat is a geometric sans close to Galton in proportion; keep the Light (300) default and Sentence case. Do not substitute a serif or a condensed face.

The system avoids drop shadows and gradients. Depth comes from the contrast between the near-black canvas and a barely-raised white-at-opacity surface, plus the hairline. Do not add material-style elevation shadows.

Border Radius Scale

The radius language is intentional: form controls are flat (0px); interactive pills are fully round (100px); content containers are softly rounded (20px). Avoid arbitrary in-between radii.

Interaction note: buttons and inputs use a standard ease over ~300–600ms. Hover states are described in prose; default (and focus) states are the source of truth in the YAML.

Top Navigation

top-nav — A 56px sticky bar on #1A1A1A with a blur and a rgba(255,255,255,0.12) bottom border. Carries the wordmark lockup at left — embed galton-wordmark-white.svg (don't retype the letters) — and a set of in-page anchor links + at most one compact secondary (outline) pill CTA at right ({component.button-secondary}, with the button typography). The yellow button does not belong in the persistent nav — keep {component.button-yellow} for the primary in-page CTA (hero, forms). Links are {typography.body} in #999999, brightening to #FFFFFF on hover.

Logo lockup

The white GALTON wordmark (vector SVG, fill="currentColor") plus a superscript ® and a letter-spaced "Brands" tagline beneath. White or black only — the lockup never turns yellow, even on hover. See "Logo & Iconography".

Buttons

All buttons: pill (100px), UPPERCASE, Galton Bold ({typography.button}), inline-flex centered, transition all 0.6s ease. Bottom padding is ~0.1rem less than top (optical compensation for Galton's ascenders). Responsive padding: mobile 10px 20px 8.4px · 1024px 12px 24px 10.4px · 1280px 11px 30px 10px.

• button-yellow — The signature CTA. #FFD700 background, #1A1A1A text, #1A1A1A border. Hover → #1A1A1A background, #FFFFFF text, #FFFFFF border.
• button-primary — #FFFFFF background, #1A1A1A text (on dark surfaces). Hover → #1A1A1A background, #FFFFFF text.
• button-secondary — Transparent with a #FFFFFF border (ghost/outline on dark). Hover → #FFFFFF background, #1A1A1A text.

Inputs & Forms

Dark-first: transparent background, bottom-border only, primary-yellow focus. On light surfaces, override the white border/text to black.

• text-input — Flat (0px), transparent, #FFFFFF bottom border, height 53px, {typography.body}/400, placeholder #999999. Focus → border #FFD700.
• textarea — Flat, hairline (rgba(255,255,255,0.12)) bottom border, min-height 120px, vertically resizable. Focus → #FFD700.
• select — Flat, #FFFFFF bottom border, height 53px, appearance: none. The native arrow is replaced by the brand chevron (grey "V") at the right, padding-right 30px, weight 300, #999999 text. Focus → #FFD700. (Sourced from the galton.sk contact form.)
• checkbox — Flat square (0px), #FFFFFF border, 30px → 45px@1024, fills with a white square on :checked, focus → #FFD700. Pair with a label in {typography.body}/300 inside a flex form-check row.
• label — {typography.label} (Galton Light), #FFFFFF, block, 8px bottom margin.

Links, Eyebrow & Badge

• text-link — color: inherit, no underline, hover/focus → #FFD700 (primary). Transition color 0.3s ease.
• eyebrow — Small uppercase label above headlines: {typography.eyebrow}, #FFD700.
• badge — Neutral pill chip for meta/status/version on dark: {typography.badge}, #999999, rgba(255,255,255,0.12) border, 100px.

Cards & Containers

card — rgba(255,255,255,0.04) background, rgba(255,255,255,0.12) border, 20px (20px), ~28px padding, no drop shadow. (Detailed card patterns are not yet fully specified — see Known Gaps.)

Footer

footer — #1A1A1A, #999999 text, a rgba(255,255,255,0.12) top border, centered wordmark lockup + copy. ~72px vertical padding. The footer never inverts.

Two marks

All logo files are served at https://galton-ai-assets.vercel.app/brand/logos/ — hotlink them by their absolute URL (CORS is open). In a header/footer lockup, embed the wordmark SVG, e.g. <img src="https://galton-ai-assets.vercel.app/brand/logos/galton-wordmark-white.svg" alt="GALTON"> — never retype "GALTON" as text to fake the logo. Fetch any file by name below.

• Symbol — the "G": galton-symbol.svg (fill="currentColor", inherits text colour) — favicon, app icon, avatar, loader, compact mark. Explicit-fill copies galton-symbol-white.svg / galton-symbol-black.svg for raster/email.
• Wordmark — "GALTON": galton-wordmark.svg (vector, fill="currentColor") — the primary digital logo. Explicit galton-wordmark-white.svg / galton-wordmark-black.svg for raster; the full GALTON® + BRANDS tagline lockup as galton-wordmark-white-tagline.png / galton-wordmark-black-tagline.png for formal/print.

The hard color rule

The logo is white or black ONLY — never yellow/primary or any other color. When using a currentColor mark, ensure the inherited color is white or black, never #FFD700. White on dark; black on light (or on a primary-yellow surface, where the mark is black). Never recolor, add shadows/gradients/outlines, stretch, rotate, or re-typeset the wordmark.

Favicons

The "G" symbol as a site/app icon (white on transparent), served at https://galton-ai-assets.vercel.app/brand/icons/:

• galton-favicon-32x32.png (browser tab), galton-favicon-192x192.png (Android/high-DPI), galton-favicon-180x180.png (Apple touch icon).

Complete asset manifest: every logo, font and icon — with formats, usage notes and direct URLs — is served as JSON at https://galton-ai-assets.vercel.app/brand.json and indexed at https://galton-ai-assets.vercel.app/llms.txt. This spec carries enough to fetch the brand directly; the manifest is the exhaustive list.

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.

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.

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.

Point your agent at this design system first — connect the MCP server, drop DESIGN.md into the repo, or share the URL. Then describe intent, not values: say on-brand, the signature accent, the display headline, and the agent resolves the exact colours, type and components from the spec. The prompts below are starting points — copy one and adapt it. None of them hard-codes a hex or a size; that's the agent's job, from the guidelines.

1. Work one component at a time; reference its YAML key (e.g. {component.button-yellow}, {component.select}).
2. New form controls default to 0px (0px); interactive pills use 100px; content containers use 20px.
3. Variants live as separate entries in components:.
4. Use {token.refs} everywhere — never inline a hex or a raw px where a token exists.
5. Keep the type Galton Light / Sentence case; only the eyebrow, button and badge are uppercase.
6. When in doubt about emphasis: more size and leading before more weight; never reach for a new color.
7. The logo stays white or black in every state, including hover.

• Confirmed from the official manual: palette, typeface, type hierarchy + leading, colour combinations, logo system, corner radius, buttons and forms. Spacing/grid and motion are intentionally left out of this spec — define them per project rather than treating derived values as brand law.
• Sub-brand chip and detailed card patterns are not yet fully specified. Derive them from these principles (dark-first, palette tokens, the radius/motion scales) — or confirm from galton.sk — and add them. (The brand icon library — line / 3d / simple — is specified separately in icons.json and the Icon library section.)
• Display token sizes in the frontmatter are the desktop maximum; the full responsive range is in the Typography table.
• Surface tokens (surface-raised, hairline) are expressed as white-at-opacity rather than fixed hex, matching the brand's "no new hex" rule.