# GALTON — AI design system

> A confident, editorial, dark-first brand house. Near-black canvas, white type, one signature yellow used sparingly, and a single typeface — Galton.

This file is the AI entry point. The full, machine-readable spec is in the open DESIGN.md format. Connect over MCP for live token/component queries, or read the surfaces below.

## Read the spec
- [DESIGN.md](https://galton-ai-assets.vercel.app/design.md): complete token frontmatter + rules (apply this directly).
- [brand.json](https://galton-ai-assets.vercel.app/brand.json): identity, tokens, components and assets as JSON.
- [layouts.json](https://galton-ai-assets.vercel.app/layouts.json): the slide canvas + layout slot schemas, with absolute example-image URLs.
- [icons.json](https://galton-ai-assets.vercel.app/icons.json): the icon library (line / 3d / simple) with absolute hotlinkable URLs (line icons also carry lightUrl).
- MCP endpoint: https://galton-ai-assets.vercel.app/api/mcp (Streamable HTTP, stateless — the recommended transport). Read-only knowledge tools: get_brand_overview, get_design_spec, get_brand_guide, list_tokens, resolve_token, list_components, get_component, get_agent_prompts, list_assets, get_section, search_design, get_voice_guide, get_linkedin_playbook, get_slide_canvas, list_layouts, get_layout, list_carousel_recipes, get_carousel_recipe, list_icons, get_icon.

## Brand palette
Primary: `White` #FFFFFF · RGB 255/255/255 · CMYK 0/0/0/0 · PMS Not specified C; `Black` #1A1A1A · RGB 26/26/26 · CMYK 0/0/0/95 · PMS Not specified C
Secondary: `Yellow` #FFD700 · RGB 255/215/0 · CMYK 0/10/100/0 · PMS Not specified C

## Approved combinations
> Some colors are not suitable to be used in combination with others. The following diagram demonstrates approved color combinations.
- Black on white (fg #1A1A1A / bg #FFFFFF)
- White on black (fg #FFFFFF / bg #1A1A1A)
- Yellow on white (fg #FFD700 / bg #FFFFFF)
- Yellow on black (fg #FFD700 / bg #1A1A1A)

## Semantic colour tokens
- `primary` #FFD700
- `on-primary` #1A1A1A
- `ink` #FFFFFF
- `on-dark` #FFFFFF
- `body` rgba(255,255,255,0.8)
- `body-soft` rgba(255,255,255,0.78)
- `muted` #999999
- `canvas` #1A1A1A
- `surface-raised` rgba(255,255,255,0.04)
- `hairline` rgba(255,255,255,0.12)
- `on-light` #1A1A1A
- `light-canvas` #FFFFFF
- `link` #FFD700

## Typeface
- Font: **Galton** (default weight 300, Sentence case)
- Stack: `Galton, Montserrat, ui-sans-serif, system-ui, sans-serif`
- File: https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2 (woff2-variations)
- @font-face: @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; }
- Fallback: Montserrat (https://fonts.google.com/specimen/Montserrat)

## Type styles
- `display-lg` 136px w300 lh1.05
- `display` 96px w300 lh1.1
- `headline` 64px w300 lh1.1
- `subhead` 30px w300 lh1.2
- `body` 18px w300 lh1.5
- `body-strong` 18px w500 lh1.4
- `eyebrow` 15px w500 lh1.4
- `button` 18px w700 lh1
- `label` 18px w300 lh1.4
- `badge` 15px w400 lh1

## Components
`button-yellow`, `button-primary`, `button-secondary`, `button-yellow-hover`, `button-primary-hover`, `button-secondary-hover`, `text-input`, `textarea`, `select`, `checkbox`, `text-link`, `eyebrow`, `badge`, `card`, `top-nav`, `footer`

## Rules (sections in the spec)
- Overview
- Colors
- Typography
- Elevation & Depth
- Shapes
- Components
- Logo & Iconography
- Do's and Don'ts
- Responsive Behavior
- Agent Prompt Guide
- Iteration Guide
- Known Gaps

## Assets
- [Galton Variable](https://galton-ai-assets.vercel.app/brand/fonts/GaltonVariable.woff2): Variable font — use this on the web.
- [Galton Thin](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Thin.woff2): Static cut — fallback.
- [Galton Light](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Light.woff2): The brand default display weight.
- [Galton Regular](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Regular.woff2): Body / headlines.
- [Galton Medium](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Medium.woff2): Emphasis.
- [Galton Bold](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Bold.woff2): Strong emphasis, buttons.
- [Galton Extrabold](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Extrabold.woff2): Extrabold.
- [Galton Black](https://galton-ai-assets.vercel.app/brand/fonts/Galton-Black.woff2): Black.
- [Favicon 32](https://galton-ai-assets.vercel.app/brand/icons/galton-favicon-32x32.png): Browser-tab favicon.
- [Favicon 192](https://galton-ai-assets.vercel.app/brand/icons/galton-favicon-192x192.png): Android / high-DPI.
- [Apple touch](https://galton-ai-assets.vercel.app/brand/icons/galton-favicon-180x180.png): Apple touch icon (iOS home screen).

## Logo policy
The logo is white or black ONLY — never the primary yellow or any other color. White on dark, black on light or on a yellow surface. Never recolor, rotate, stretch, add shadows/gradients, or re-typeset the wordmark.

## Brand voice
**Confident** — Quiet authority — never loud, never hype.; **Editorial** — High-contrast, considered, magazine-like.; **Plain** — Sentence case; clarity over cleverness.
Do: Lead with the reader's problem, then the idea. · One idea per sentence; let whitespace carry weight. · Reach for size and leading before weight, and for weight before colour. · Keep a deliberate jump between hierarchy levels.
Don't: Don't uppercase body copy. · Don't stack three adjectives. · Don't colour the logo or use the yellow as a large fill. · Don't shout with exclamation marks or all-caps.
Full voice guide: https://galton-ai-assets.vercel.app/voice.md

## LinkedIn playbook
- **Educational carousel** (`educational`) → recipe `educational-carousel`
- **Single insight** (`insight`) → recipe `single-insight`
- **Announcement** (`announcement`) → recipe `announcement`
- **Event / speaker** (`event`) → recipe `event-post`
- **Naming showcase** (`naming`) → recipe `naming-carousel`
Full playbook: https://galton-ai-assets.vercel.app/linkedin.md

## Layout archetypes (reference for on-brand slides / carousels)
Shared slide canvas (get_slide_canvas): 1080x1350, 64px padding, vertical-central Top/Bottom-block composition, Galton Light UPPERCASE headlines.
- `cover` — Cover / title (1080x1350, 1080x1080)
- `profile` — Profile / speaker card (1080x1350)
- `concept` — Concept + supporting graphic (1080x1350, 1080x1080)
- `statement` — Statement + centred graphic + CTA (1080x1350, 1080x1080)
Carousel recipes (ordered layout sequences): `educational-carousel`=[cover → statement → concept → concept → statement]; `single-insight`=[statement]; `announcement`=[cover → statement]; `event-post`=[profile]; `naming-carousel`=[cover → statement → concept]
These are reference knowledge, not a generator. Use list_layouts / get_layout (or the catalog above) to read each archetype's slot schema + example image, then recreate the slide on-brand in your own tool. The framework does not render or generate slides.

## Icons (optional, for layouts)
- Line icons: tvorba-loga-identity-farby-typo, tvorba-loga-identity-vizualita, tvorba-loga-identity-logo, tvorba-loga-identity-sound, tvorba-webstranok-animacie, tvorba-webstranok-bezpecnost, tvorba-webstranok-dizajn, tvorba-webstranok-skalovatelnost, employer-branding-atraktivna-firemna-kultura, employer-branding-znizenie-nakladov, employer-branding-zvysenie-lojality, employer-branding-rychlejsi-hiring, employer-branding-zvysenie-brand-awareness, employer-branding-podpora-angazovanosti-timu, employer-branding-efektivnejsi-proces-hiringu, employer-branding-efektivnejsi-proces-hiringu-2, interna-komunikacia-zvysenie-angazovanosti, interna-komunikacia-znizenie-fluktuacie, interna-komunikacia-zvysenie-produktivity, interna-komunikacia-narast-inovacneho-potencialu, socialne-siete-report, socialne-siete-komunikacia, socialne-siete-komunita, socialne-siete-obsah, foto-video-produkcia-live-action-videa, foto-video-produkcia-postprodukcia, foto-video-produkcia-fotografie, foto-video-produkcia-animacie, content-marketing-podpora-predaja, content-marketing-zvysenie-konverzii, content-marketing-narast-zakaznikov, content-marketing-budovanie-dovery, marketing-advertising-report, marketing-advertising-media, marketing-advertising-meranie-efektivity, marketing-advertising-tvorba-strategie
- 3D icons: magnifier, strategy, magnet, thumb-up, camera, bubbles, user-heart, pencil, vr, hand, thunder, tag, register, house, graph, horse-shoe
- Simple icons: heart, target, venn, triangle, plus