{ "$description": "Zo Family brand tokens 2026 — single source of truth. Colours from the Brand Manual (p10-11) and ZO Rooms guide (p8-9); sRGB values use the manuals' own CMYK->RGB conversion (it reproduces their printed primary RGB exactly). Generated files: zo-tokens.css, tailwind-theme.css and the kit's @theme, zostel-showcase/packages/zostel-ui-src/styles/tokens.css (run brand/tools/build_tokens.py; --check in CI).", "meta": { "version": "2026.1", "updated": "2026-09-26", "sources": [ "Zostel Complete Brand Manual, VOL 2, June 2015", "ZO Rooms Visual & Identity Guidelines, VOL 2, June 2015" ] }, "color": { "core": { "orange": { "$type": "color", "$value": "#F1563F", "$extensions": { "zo": { "name": "Warm Orange", "pantone": "7417 C", "cmyk": "C0 M82 Y80 K0", "rgb": "241 86 63", "role": "Family primary. Zostel symbol, CTAs, highlights." } }, "80": { "$type": "color", "$value": "#F4795D", "$description": "80% screen tint (manual's CMYK tint method)" }, "60": { "$type": "color", "$value": "#F7987D", "$description": "60% screen tint (manual's CMYK tint method)" }, "40": { "$type": "color", "$value": "#FAB8A1", "$description": "40% screen tint (manual's CMYK tint method)" }, "20": { "$type": "color", "$value": "#FDDACB", "$description": "20% screen tint (manual's CMYK tint method)" } }, "orange-ink": { "$type": "color", "$value": "#D83D28", "$extensions": { "zo": { "name": "Warm Orange — ink", "role": "Orange for small text & links on white (WCAG AA 4.5:1). Derived from Warm Orange for AA." } } }, "orange-ink-on-beige": { "$type": "color", "$value": "#C92E19", "$extensions": { "zo": { "name": "Warm Orange — ink on beige", "role": "Orange small text on Beige (4.5:1). Derived from Warm Orange for AA." } } }, "grey": { "$type": "color", "$value": "#43474B", "$extensions": { "zo": { "name": "Steel Grey", "pantone": "7540 C", "cmyk": "C70 M60 Y55 K40", "rgb": "67 71 75", "role": "Wordmark, text, tagline band, dark surfaces." } }, "80": { "$type": "color", "$value": "#5E5F63", "$description": "80% screen tint" }, "60": { "$type": "color", "$value": "#7D7C7F", "$description": "60% screen tint" }, "40": { "$type": "color", "$value": "#A09EA1", "$description": "40% screen tint" }, "20": { "$type": "color", "$value": "#C8C7C8", "$description": "20% screen tint" } }, "beige": { "$type": "color", "$value": "#F0EDDE", "$extensions": { "zo": { "name": "Beige", "cmyk": "C5 M4 Y12 K0", "rgb": "240 237 222", "role": "Page / paper background." } } }, "white": { "$type": "color", "$value": "#FFFFFF", "$extensions": { "zo": { "name": "White", "cmyk": "C0 M0 Y0 K0" } } } }, "landscapes": { "sunny-days": { "$description": "Sunny Days", "sunny-1": { "$type": "color", "$value": "#FAA619", "$extensions": { "zo": { "name": "Marigold", "formerName": "Sunny Yellow", "cmyk": "C0 M40 Y100 K0", "previousRepoHex": "#FFAA00", "deltaE2000_vs_previous": 1.7, "onColor": "grey", "ink": "#A36900" } }, "80": { "$type": "color", "$value": "#FCB64C" }, "60": { "$type": "color", "$value": "#FEC779" }, "40": { "$type": "color", "$value": "#FFD8A1" }, "20": { "$type": "color", "$value": "#FFEACD" } }, "sunny-2": { "$type": "color", "$value": "#F15A22", "$extensions": { "zo": { "name": "Tangerine", "formerName": "Deep Orange", "cmyk": "C0 M80 Y100 K0", "previousRepoHex": "#FF5500", "deltaE2000_vs_previous": 3.2, "onColor": "white", "ink": "#D34400" } }, "80": { "$type": "color", "$value": "#F47B44" }, "60": { "$type": "color", "$value": "#F79A6C" }, "40": { "$type": "color", "$value": "#FBB995" }, "20": { "$type": "color", "$value": "#FDDAC5" } }, "sunny-3": { "$type": "color", "$value": "#FFDE18", "$extensions": { "zo": { "name": "Sunshine", "formerName": "Lemon", "cmyk": "C0 M10 Y95 K0", "previousRepoHex": "#FFF000", "deltaE2000_vs_previous": 5.4, "onColor": "grey", "ink": "#897600" } }, "80": { "$type": "color", "$value": "#FFE35B" }, "60": { "$type": "color", "$value": "#FFE988" }, "40": { "$type": "color", "$value": "#FFF0AE" }, "20": { "$type": "color", "$value": "#FFF7D5" } } }, "waters": { "$description": "Waters", "water-1": { "$type": "color", "$value": "#9CDCF9", "$extensions": { "zo": { "name": "Sky", "formerName": "Sky Blue", "cmyk": "C35 M0 Y0 K0", "previousRepoHex": "#99DDFF", "deltaE2000_vs_previous": 1.4, "onColor": "grey", "ink": "#3F7E98" } }, "80": { "$type": "color", "$value": "#B1E3FA" }, "60": { "$type": "color", "$value": "#C4E9FB" }, "40": { "$type": "color", "$value": "#D7F0FC" }, "20": { "$type": "color", "$value": "#E9F7FE" } }, "water-2": { "$type": "color", "$value": "#34C2D7", "$extensions": { "zo": { "name": "Lagoon", "formerName": "Aqua", "cmyk": "C65 M0 Y15 K0", "previousRepoHex": "#33CCCC", "deltaE2000_vs_previous": 7.9, "onColor": "grey", "ink": "#008292" } }, "80": { "$type": "color", "$value": "#6ECCDE" }, "60": { "$type": "color", "$value": "#95D7E5" }, "40": { "$type": "color", "$value": "#B8E3EC" }, "20": { "$type": "color", "$value": "#DAF0F5" } }, "water-3": { "$type": "color", "$value": "#0072BC", "$extensions": { "zo": { "name": "Ocean", "formerName": "Deep Cyan", "cmyk": "C100 M50 Y0 K0", "previousRepoHex": "#0066CC", "deltaE2000_vs_previous": 5.8, "onColor": "white", "ink": "#0072BC" } }, "80": { "$type": "color", "$value": "#1F84C6" }, "60": { "$type": "color", "$value": "#659AD2" }, "40": { "$type": "color", "$value": "#95B6DF" }, "20": { "$type": "color", "$value": "#C7D6EE" } } }, "fields": { "$description": "Fields", "field-1": { "$type": "color", "$value": "#E2E418", "$extensions": { "zo": { "name": "Mustard Leaf", "formerName": "Lime", "cmyk": "C15 M0 Y100 K0", "previousRepoHex": "#CCFF00", "deltaE2000_vs_previous": 9.3, "onColor": "grey", "ink": "#7A7B00" } }, "80": { "$type": "color", "$value": "#E8E857" }, "60": { "$type": "color", "$value": "#EDEC86" }, "40": { "$type": "color", "$value": "#F2F2AE" }, "20": { "$type": "color", "$value": "#F7F8D5" } }, "field-2": { "$type": "color", "$value": "#04B495", "$extensions": { "zo": { "name": "Jade", "formerName": "Teal", "cmyk": "C80 M0 Y55 K0", "previousRepoHex": "#00AA77", "deltaE2000_vs_previous": 6.6, "onColor": "grey", "ink": "#00866E" } }, "80": { "$type": "color", "$value": "#51C0A7" }, "60": { "$type": "color", "$value": "#83CDBA" }, "40": { "$type": "color", "$value": "#ACDCCF" }, "20": { "$type": "color", "$value": "#D4ECE4" } }, "field-3": { "$type": "color", "$value": "#B2D234", "$extensions": { "zo": { "name": "Paddy Green", "formerName": "Green", "cmyk": "C35 M0 Y100 K0", "previousRepoHex": "#99DD00", "deltaE2000_vs_previous": 5.4, "onColor": "grey", "ink": "#697F00" } }, "80": { "$type": "color", "$value": "#C1D95E" }, "60": { "$type": "color", "$value": "#CFE188" }, "40": { "$type": "color", "$value": "#DEEAAE" }, "20": { "$type": "color", "$value": "#EDF4D5" } } }, "flowers": { "$description": "Flowers", "flower-1": { "$type": "color", "$value": "#ED145A", "$extensions": { "zo": { "name": "Rani Pink", "formerName": "Magenta", "cmyk": "C0 M100 Y50 K0", "previousRepoHex": "#FF0066", "deltaE2000_vs_previous": 3.8, "onColor": "white", "ink": "#E90957" } }, "80": { "$type": "color", "$value": "#F05B72" }, "60": { "$type": "color", "$value": "#F4858E" }, "40": { "$type": "color", "$value": "#F7ABAD" }, "20": { "$type": "color", "$value": "#FCD4D2" } }, "flower-2": { "$type": "color", "$value": "#FFCE7B", "$extensions": { "zo": { "name": "Apricot", "formerName": "Peach", "cmyk": "C0 M20 Y60 K0", "previousRepoHex": "#FFCC77", "deltaE2000_vs_previous": 0.7, "onColor": "grey", "ink": "#9A6D08" } }, "80": { "$type": "color", "$value": "#FFD793" }, "60": { "$type": "color", "$value": "#FFE0AC" }, "40": { "$type": "color", "$value": "#FFE9C5" }, "20": { "$type": "color", "$value": "#FFF3E0" } }, "flower-3": { "$type": "color", "$value": "#EE3C96", "$extensions": { "zo": { "name": "Gulabi", "formerName": "Pink", "cmyk": "C0 M90 Y0 K0", "previousRepoHex": "#FF1199", "deltaE2000_vs_previous": 2.7, "onColor": "white", "ink": "#DC2687" } }, "80": { "$type": "color", "$value": "#F06EAA" }, "60": { "$type": "color", "$value": "#F392BD" }, "40": { "$type": "color", "$value": "#F7B5D2" }, "20": { "$type": "color", "$value": "#FBD9E8" } } }, "valleys": { "$description": "Valleys", "valley-1": { "$type": "color", "$value": "#AA5EA5", "$extensions": { "zo": { "name": "Orchid", "formerName": "Purple", "cmyk": "C35 M75 Y0 K0", "previousRepoHex": "#9955CC", "deltaE2000_vs_previous": 10.2, "onColor": "white", "ink": "#A75BA2" } }, "80": { "$type": "color", "$value": "#B77AB4" }, "60": { "$type": "color", "$value": "#C597C5" }, "40": { "$type": "color", "$value": "#D5B6D7" }, "20": { "$type": "color", "$value": "#E7D8EA" } }, "valley-2": { "$type": "color", "$value": "#4F87C7", "$extensions": { "zo": { "name": "Valley Blue", "formerName": "Lavender", "cmyk": "C70 M40 Y0 K0", "previousRepoHex": "#6688CC", "deltaE2000_vs_previous": 4.6, "onColor": "white", "ink": "#4078B7" } }, "80": { "$type": "color", "$value": "#7299D0" }, "60": { "$type": "color", "$value": "#91AEDB" }, "40": { "$type": "color", "$value": "#B3C5E6" }, "20": { "$type": "color", "$value": "#D6DFF1" } }, "valley-3": { "$type": "color", "$value": "#F6ADCD", "$extensions": { "zo": { "name": "Blush", "formerName": "Mauve", "cmyk": "C0 M40 Y0 K0", "previousRepoHex": "#FF99CC", "deltaE2000_vs_previous": 5.7, "onColor": "grey", "ink": "#A3617F" } }, "80": { "$type": "color", "$value": "#F8BDD7" }, "60": { "$type": "color", "$value": "#FACDE1" }, "40": { "$type": "color", "$value": "#FBDDEA" }, "20": { "$type": "color", "$value": "#FDEDF4" } } }, "corporate": { "$description": "Corporates", "corporate-orange": { "$type": "color", "$value": "#EF4030", "$extensions": { "zo": { "name": "Vermilion", "formerName": "Corporate Orange", "cmyk": "C0 M90 Y90 K0", "previousRepoHex": "#FF3311", "deltaE2000_vs_previous": 4.9, "onColor": "white", "ink": "#E03022" } }, "80": { "$type": "color", "$value": "#F26C4F" }, "60": { "$type": "color", "$value": "#F68F71" }, "40": { "$type": "color", "$value": "#F9B299" }, "20": { "$type": "color", "$value": "#FDD7C7" } }, "corporate-grey": { "$type": "color", "$value": "#9FA4A7", "$extensions": { "zo": { "name": "Stone Grey", "formerName": "Warm Grey", "cmyk": "C40 M30 Y30 K0", "previousRepoHex": "#9999AA", "deltaE2000_vs_previous": 8.5, "onColor": "grey", "ink": "#72777A" } }, "80": { "$type": "color", "$value": "#B0B3B5" }, "60": { "$type": "color", "$value": "#C2C3C5" }, "40": { "$type": "color", "$value": "#D4D4D5" }, "20": { "$type": "color", "$value": "#E7E7E7" } }, "charcoal": { "$type": "color", "$value": "#404041", "$extensions": { "zo": { "name": "Charcoal", "formerName": "Charcoal", "cmyk": "C0 M0 Y0 K90", "previousRepoHex": "#333333", "deltaE2000_vs_previous": 4.3, "onColor": "white", "ink": "#404041" } }, "80": { "$type": "color", "$value": "#696A6D" }, "60": { "$type": "color", "$value": "#8C8E90" }, "40": { "$type": "color", "$value": "#AFB1B4" }, "20": { "$type": "color", "$value": "#D5D7D8" } } } }, "beiges": { "$description": "Beige with +20/40/60/80 K (shades, per the Brand Manual)", "beige": { "$type": "color", "$value": "#F0EDDE" }, "k20": { "$type": "color", "$value": "#C6C6BB" }, "k40": { "$type": "color", "$value": "#9F9F97" }, "k60": { "$type": "color", "$value": "#797A74" }, "k80": { "$type": "color", "$value": "#52524F" } }, "heritage": { "$description": "Reference only. Not for new work unless noted.", "zo-rooms-orange": { "$type": "color", "$value": "#F04E29", "$extensions": { "zo": { "name": "ZO Rooms Warm Orange", "pantone": "171 C", "cmyk": "C0 M85 Y95 K0", "note": "The ZO Rooms guide's primary. Zo-dialect brands use core.orange (dE 3.8 — visually the same family)." } } }, "zo-rooms-dark-grey": { "$type": "color", "$value": "#414042", "$extensions": { "zo": { "name": "ZO Rooms Dark Grey", "pantone": "446 C", "cmyk": "K90" } } }, "zo-rooms-light-grey": { "$type": "color", "$value": "#DCDDDE", "$extensions": { "zo": { "name": "ZO Rooms Light Grey", "pantone": "7541 C", "cmyk": "K15", "note": "Heritage only (the ZO Rooms guide's light grey). Lines use ui.border." } } }, "zo-world-2020-fill": { "$type": "color", "$value": "#FF3700", "$extensions": { "zo": { "note": "ZO WORLD wordmark 2020 (Circular Std). Superseded by core.orange." } } }, "zo-world-2020-stroke": { "$type": "color", "$value": "#FF6800", "$extensions": { "zo": { "note": "ZO WORLD wordmark 2020. Superseded." } } }, "black-2015": { "$type": "color", "$value": "#231F20", "$extensions": { "zo": { "note": "Rich black used for line art in the Brand Manual's graphics." } } }, "city-grey-2015": { "$type": "color", "$value": "#636466", "$extensions": { "zo": { "note": "City-specific silhouettes, Brand Manual p37." } } }, "overprint-green-2015": { "$type": "color", "$value": "#00AF4C", "$extensions": { "zo": { "note": "The valleys' overprint (valleys.svg, manual p34): where two Fields colours overlap, the manual prints this deeper green. Use it only for such overlaps, as the masters do (DV, Oct 2026: the masters' 'smooth blended output')." } } }, "overprint-teal-2015": { "$type": "color", "$value": "#318F96", "$extensions": { "zo": { "note": "The lovebirds' overprint (lovebirds.svg, manual p33): where a Lagoon bird overlaps a grey one. Use it only for such overlaps." } } } }, "ui": { "$description": "Digital roles (2026). Built only from palette values above.", "surface": { "$type": "color", "$value": "#FFFFFF" }, "surface-paper": { "$type": "color", "$value": "#F0EDDE" }, "surface-well": { "$type": "color", "$value": "#E8E4D3", "$extensions": { "zo": { "note": "Beige a step darker: tab lists, wells, skeletons on the paper (the site's --color-muted)" } } }, "accent-soft": { "$type": "color", "$value": "#FDE8E2", "$extensions": { "zo": { "note": "A wash of Warm Orange behind grey text: selected rows, notes (the site's --color-accent)" } } }, "surface-inverse": { "$type": "color", "$value": "#43474B" }, "surface-night": { "$type": "color", "$value": "#2B2E31", "$extensions": { "zo": { "note": "Dark mode base = Steel Grey shaded (derived)." } } }, "text": { "$type": "color", "$value": "#43474B" }, "text-muted": { "$type": "color", "$value": "#606468", "$extensions": { "zo": { "note": "Steel Grey family: 5.97:1 on white, 5.08:1 on beige (the page), 4.68:1 on surface-well" } } }, "text-inverse": { "$type": "color", "$value": "#FFFFFF" }, "border": { "$type": "color", "$value": "#D8D5C6", "$extensions": { "zo": { "note": "The one line colour: Beige a step darker, so hairlines sit warm on the paper and still read on white (the site's --color-border). DV, Sep 2026: one border grey." } } }, "accent": { "$type": "color", "$value": "#F1563F" }, "link": { "$type": "color", "$value": "#D83D28" }, "success": { "$type": "color", "$value": "#00866E", "$extensions": { "zo": { "note": "Jade ink" } } }, "warning": { "$type": "color", "$value": "#FAA619", "$extensions": { "zo": { "note": "Marigold (use with grey text)" } } }, "danger": { "$type": "color", "$value": "#E03022", "$extensions": { "zo": { "note": "Vermilion ink" } } }, "info": { "$type": "color", "$value": "#0072BC", "$extensions": { "zo": { "note": "Ocean" } } }, "veil": { "$type": "color", "$value": "#43474B66", "$extensions": { "zo": { "note": "Steel Grey at 40 %: the veil behind a dialog, drawer or sheet by day (a fill with no text on it, so no contrast pair; the site's bg-zostel-grey/40)" } } }, "veil-night": { "$type": "color", "$value": "#231F2099", "$extensions": { "zo": { "note": "Ink Black (heritage black-2015) at 60 %: the veil at night, so it still dims the Steel Grey cards" } } } }, "costume": { "$description": "Costume colours: only for clothes on the destination Zobus, where a true dress colour has no palette equal. Never for covers, icons, symbols or UI.", "maroon": { "$type": "color", "$value": "#7B2A3A", "$extensions": { "zo": { "name": "Monastery Maroon", "added": "2026-10-03", "role": "Monks' robes and maroon dress on the destination Zobus only (DV, 3 October 2026).", "derivedFrom": "Rani Pink #ED145A, darkened toward K50 and softened, in the manual's tint method spirit" } } } }, "cloth": { "$description": "Cloth colours: for the Zobus' clothes, hats and accessories where a garment's own colour has no palette equal (a black suit, a brown leather jacket, a navy uniform). Flat, never neon; never skin, covers' land, icons, symbols or UI. Kept out of the destination Zobus' nearest-colour snap (build_places.py), so the place Zobus draw as before; a part names them on purpose (zr_tops_port, the port's colour map). DV, 13 October 2026: \"extend the brand language as needed, add black or other colors etc.\"", "black": { "$type": "color", "$value": "#231F20", "$extensions": { "zo": { "name": "Ink Black", "added": "2026-10-13", "role": "Black cloth: suits, tuxedos, leather, hoodies, black tops and hats. The Brand Manual's rich black (heritage black-2015, its line art) promoted to cloth; Charcoal stays the face's ink and dark-grey cloth.", "derivedFrom": "color.heritage.black-2015", "onColor": "white" } } }, "brown": { "$type": "color", "$value": "#6B4226", "$extensions": { "zo": { "name": "Leather Brown", "added": "2026-10-13", "role": "Brown cloth and leather (jackets, straps, belts) and brown hair: a warm dark brown, 33.6 dE2000 clear of Zo Orange.", "derivedFrom": "Monastery Maroon's depth on the Marigold earth hue", "onColor": "white" } } }, "tan": { "$type": "color", "$value": "#C9AE86", "$extensions": { "zo": { "name": "Tan", "added": "2026-10-13", "role": "Light brown cloth (a camel shirt, a tan hat): the lightest brown that stays 24 dE2000 clear of Zo Orange (25.6).", "derivedFrom": "Leather Brown lightened toward Beige", "onColor": "#43474B" } } }, "forest": { "$type": "color", "$value": "#2E6B4A", "$extensions": { "zo": { "name": "Forest Green", "added": "2026-10-13", "role": "Dark green cloth: an army uniform, a bottle-green top or hat; Jade and Paddy Green are too bright for it.", "derivedFrom": "Jade darkened and greyed", "onColor": "white" } } }, "navy": { "$type": "color", "$value": "#1F3A6E", "$extensions": { "zo": { "name": "Navy", "added": "2026-10-13", "role": "Navy cloth: a police or firefighter's uniform, a navy cap, kept apart from Ocean's brighter blue.", "derivedFrom": "Ocean darkened toward Steel Grey", "onColor": "white" } } }, "red": { "$type": "color", "$value": "#B5121B", "$extensions": { "zo": { "name": "Crimson", "added": "2026-10-13", "role": "True red cloth: a team's red jersey, a red suit, a cape, a king's red. Rani Pink is a magenta, and the old pictures' bright red is 10 dE2000 from Zo Orange; Crimson is the brightest red that stays 24 clear of the skin (25.1).", "derivedFrom": "the old pictures' red #FF0900, darkened until it stands clear of Zo Orange", "onColor": "white" } } } }, "character": { "$description": "Character colours: only for the characters' own bodies, kept apart from the logo's colours. Never for UI, covers' land, icons or symbols.", "zo-orange": { "$type": "color", "$value": "#FC6736", "$extensions": { "zo": { "name": "Zo Orange", "added": "2026-10-04", "role": "Zobu's skin only (DV, 4 October 2026): never the logo's Warm Orange, so a face never reads as the logo. Not for UI, covers' land, icons or symbols.", "source": "The skin of the Zobu profile pictures live in the app (public/avatars/{bros,baes}/skin/0.svg); brand/README.md §12" } } } } }, "font": { "zostel": { "display": { "$type": "fontFamily", "$value": [ "Futura", "Jost", "Verdana", "sans-serif" ] }, "body": { "$type": "fontFamily", "$value": [ "Gotham Narrow", "Barlow Semi Condensed", "Verdana", "sans-serif" ] }, "accent": { "$type": "fontFamily", "$value": [ "Mrs Eaves", "Libre Baskerville", "Georgia", "serif" ] }, "scripts": { "$description": "When words must be in another script (symbols come first; LIVE IT. NOW stays in English). Open (OFL-1.1) families: Anek for Indian scripts — one design for ten scripts, with a weight axis for Futura's headings and a width axis whose 87.5 sits with Gotham Narrow; Prompt for Thai; the matching Noto Sans family behind each.", "devanagari": { "$type": "fontFamily", "$value": [ "Anek Devanagari", "Noto Sans Devanagari", "sans-serif" ], "$description": "Hindi, Marathi, Nepali" }, "bengali": { "$type": "fontFamily", "$value": [ "Anek Bangla", "Noto Sans Bengali", "sans-serif" ] }, "gujarati": { "$type": "fontFamily", "$value": [ "Anek Gujarati", "Noto Sans Gujarati", "sans-serif" ] }, "gurmukhi": { "$type": "fontFamily", "$value": [ "Anek Gurmukhi", "Noto Sans Gurmukhi", "sans-serif" ], "$description": "Punjabi" }, "kannada": { "$type": "fontFamily", "$value": [ "Anek Kannada", "Noto Sans Kannada", "sans-serif" ] }, "malayalam": { "$type": "fontFamily", "$value": [ "Anek Malayalam", "Noto Sans Malayalam", "sans-serif" ] }, "odia": { "$type": "fontFamily", "$value": [ "Anek Odia", "Noto Sans Oriya", "sans-serif" ] }, "tamil": { "$type": "fontFamily", "$value": [ "Anek Tamil", "Noto Sans Tamil", "sans-serif" ] }, "telugu": { "$type": "fontFamily", "$value": [ "Anek Telugu", "Noto Sans Telugu", "sans-serif" ] }, "thai": { "$type": "fontFamily", "$value": [ "Prompt", "Noto Sans Thai", "sans-serif" ], "$description": "Loopless, geometric Thai (Cadson Demak)" }, "fallback": { "$type": "fontFamily", "$value": [ "Noto Sans", "sans-serif" ], "$description": "Any other script: the Noto Sans family for it" } } }, "zo": { "display": { "$type": "fontFamily", "$value": [ "Gotham Rounded", "Nunito", "Verdana", "sans-serif" ] }, "body": { "$type": "fontFamily", "$value": [ "Gotham Rounded", "Gotham Narrow", "Nunito", "Verdana", "sans-serif" ] }, "scripts": { "$description": "Rounded, like Gotham Rounded: the Baloo 2 family (Ek Type; one voice, a sibling per Indian script) and Mitr for Thai (Cadson Demak; Baloo has no Thai — and มิตร means friend). The matching Noto Sans family behind each. Open (OFL-1.1).", "devanagari": { "$type": "fontFamily", "$value": [ "Baloo 2", "Noto Sans Devanagari", "sans-serif" ], "$description": "Hindi, Marathi, Nepali" }, "bengali": { "$type": "fontFamily", "$value": [ "Baloo Da 2", "Noto Sans Bengali", "sans-serif" ] }, "gujarati": { "$type": "fontFamily", "$value": [ "Baloo Bhai 2", "Noto Sans Gujarati", "sans-serif" ] }, "gurmukhi": { "$type": "fontFamily", "$value": [ "Baloo Paaji 2", "Noto Sans Gurmukhi", "sans-serif" ], "$description": "Punjabi" }, "kannada": { "$type": "fontFamily", "$value": [ "Baloo Tamma 2", "Noto Sans Kannada", "sans-serif" ] }, "malayalam": { "$type": "fontFamily", "$value": [ "Baloo Chettan 2", "Noto Sans Malayalam", "sans-serif" ] }, "odia": { "$type": "fontFamily", "$value": [ "Baloo Bhaina 2", "Noto Sans Oriya", "sans-serif" ] }, "tamil": { "$type": "fontFamily", "$value": [ "Baloo Thambi 2", "Noto Sans Tamil", "sans-serif" ] }, "telugu": { "$type": "fontFamily", "$value": [ "Baloo Tammudu 2", "Noto Sans Telugu", "sans-serif" ] }, "thai": { "$type": "fontFamily", "$value": [ "Mitr", "Noto Sans Thai", "sans-serif" ], "$description": "Rounded, loopless Thai (Cadson Demak)" }, "fallback": { "$type": "fontFamily", "$value": [ "Noto Sans", "sans-serif" ], "$description": "Any other script: the Noto Sans family for it" } } }, "mono": { "$type": "fontFamily", "$value": [ "JetBrains Mono", "IBM Plex Mono", "ui-monospace", "monospace" ], "$description": "For \\z/ keyboard-born emoji & code" }, "weight": { "$description": "The brand weights: 'Futura Light, Book, Medium, Bold & Heavy and their Obliques' (Brand Manual p30). In this Futura (Adobe/Linotype) Heavy is the weight between Medium and Bold — stems per 1000 em: Light 48, Book 84, Medium 94, Heavy 147, Bold 196 — so it is 600, below Bold's 700. Gotham Narrow and Mrs Eaves use the same names (Light 300, Book 400, Medium 500, Bold 700).", "light": { "$type": "fontWeight", "$value": 300 }, "book": { "$type": "fontWeight", "$value": 400 }, "medium": { "$type": "fontWeight", "$value": 500 }, "heavy": { "$type": "fontWeight", "$value": 600 }, "bold": { "$type": "fontWeight", "$value": 700 } }, "leading": { "$description": "Line height, as a multiple of the font size.", "hero": { "$type": "number", "$value": 0.95, "$description": "Stacked capitals: Futura's cap height (0.754 em) plus one stem of Futura Bold (0.196 em) — the gap between the lines is one stroke." }, "display": { "$type": "number", "$value": 1.05, "$description": "Big headings and figures" }, "heading": { "$type": "number", "$value": 1.15 }, "title": { "$type": "number", "$value": 1.25 }, "text": { "$type": "number", "$value": 1.45, "$description": "Leads, captions, one-line verb lines (the Brand Manual sets its body at 1.45)" }, "body": { "$type": "number", "$value": 1.6, "$description": "Running text on screens" } }, "tracking": { "$description": "Letter spacing, in em.", "heading": { "$type": "dimension", "$value": "-0.01em", "$description": "Large sentence-case headings" }, "normal": { "$type": "dimension", "$value": "0em" }, "tagline": { "$type": "dimension", "$value": "0.01em", "$description": "LIVE IT. NOW — measured from the Brand Manual (p7–9): Futura Bold tracked +10" }, "caps": { "$type": "dimension", "$value": "0.2em", "$description": "Spaced capitals: verb lines and labels" } }, "scale": { "$description": "The brand type scale, one role per level of text. Sizes: fontSize is the wide-screen size (1440 px), $extensions.zo.sizeSmall the phone size (390 px); between the two the size grows in a straight line (zo-tokens.css: clamp). Steps from the caption: 3^(1/4) wide, 3^(1/6) on a phone — both reach sqrt(3), tan 60 deg, the angle the Zostel symbol turns by. Page numbers are the Brand Manual's printed folios.", "$extensions": { "zo": { "viewports": { "small": "390px", "wide": "1440px" }, "base": { "small": "13px", "wide": "14px" }, "ratio": { "small": "3^(1/6)", "wide": "3^(1/4)" } } }, "hero": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "218px", "lineHeight": "{font.leading.hero}", "letterSpacing": "{font.tracking.tagline}" }, "$description": "LIVE IT. NOW as the hero: capitals, a full stop after IT and none after NOW, stacked on two lines; NOW may take Warm Orange.", "$extensions": { "zo": { "sizeSmall": "81px", "step": 10, "case": "upper", "sample": "LIVE IT. NOW", "source": "Brand Manual p7–9: the tagline is Futura Bold (by its stroke width — Heavy is lighter), tracked +10" } } }, "facts": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "73px", "lineHeight": "{font.leading.display}", "letterSpacing": "{font.tracking.normal}" }, "$description": "The public facts, as figures.", "$extensions": { "zo": { "sizeSmall": "39px", "step": 6, "sample": "111 · 80+ · 5M+ · 2013" } } }, "h1": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "55px", "lineHeight": "{font.leading.display}", "letterSpacing": "{font.tracking.heading}" }, "$description": "Page and section headings. Sentence case, no full stop.", "$extensions": { "zo": { "sizeSmall": "32px", "step": 5, "case": "sentence", "sample": "Six Zs, one centre" } } }, "theme-line": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.book}", "fontSize": "55px", "lineHeight": "{font.leading.heading}", "letterSpacing": "{font.tracking.normal}" }, "$description": "The communication theme line: Futura Book, lower case, ends with a full stop.", "$extensions": { "zo": { "sizeSmall": "32px", "step": 5, "case": "lower", "sample": "travel like a local.", "source": "Brand Manual p8, p9, p51: 'travel india with us.' in Futura Book" } } }, "h2": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "42px", "lineHeight": "{font.leading.heading}", "letterSpacing": "{font.tracking.heading}" }, "$description": "Sub-headings. Sentence case.", "$extensions": { "zo": { "sizeSmall": "27px", "step": 4, "case": "sentence", "sample": "Every place, its own icon" } } }, "h3": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "32px", "lineHeight": "{font.leading.title}", "letterSpacing": "{font.tracking.normal}" }, "$description": "Card and group headings. Sentence case.", "$extensions": { "zo": { "sizeSmall": "23px", "step": 3, "case": "sentence", "sample": "Characters that grew up with us" } } }, "accent": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.accent}", "fontWeight": "{font.weight.book}", "fontSize": "42px", "lineHeight": "{font.leading.title}", "letterSpacing": "{font.tracking.normal}" }, "$description": "A quote or a highlight, one at a time: Mrs Eaves Italic.", "$extensions": { "zo": { "sizeSmall": "27px", "step": 4, "case": "sentence", "style": "italic", "sample": "Travellers from every direction, meeting in one place.", "source": "Brand Manual p31: Mrs Eaves for highlights" } } }, "lead": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.body}", "fontWeight": "{font.weight.book}", "fontSize": "24px", "lineHeight": "{font.leading.text}", "letterSpacing": "{font.tracking.normal}" }, "$description": "The first paragraph.", "$extensions": { "zo": { "sizeSmall": "19px", "step": 2, "case": "sentence", "source": "Brand Manual p31: Gotham Narrow for body text" } } }, "body": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.body}", "fontWeight": "{font.weight.book}", "fontSize": "18px", "lineHeight": "{font.leading.body}", "letterSpacing": "{font.tracking.normal}" }, "$description": "Running text.", "$extensions": { "zo": { "sizeSmall": "16px", "step": 1, "case": "sentence", "source": "Brand Manual p31: Gotham Narrow for body text" } } }, "verb-line": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.bold}", "fontSize": "18px", "lineHeight": "{font.leading.text}", "letterSpacing": "{font.tracking.caps}" }, "$description": "Verbs, present tense, joined with a spaced middle dot.", "$extensions": { "zo": { "sizeSmall": "16px", "step": 1, "case": "upper", "sample": "RUN · CLIMB · CHASE · LAUGH", "source": "Brand Manual p81 sets the verbs in Futura Bold capitals: RUN. CLIMB. CHASE. LAUGH." } } }, "caption": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.body}", "fontWeight": "{font.weight.book}", "fontSize": "14px", "lineHeight": "{font.leading.text}", "letterSpacing": "{font.tracking.normal}" }, "$description": "Captions and notes.", "$extensions": { "zo": { "sizeSmall": "13px", "step": 0, "case": "sentence" } } }, "label": { "$type": "typography", "$value": { "fontFamily": "{font.zostel.display}", "fontWeight": "{font.weight.medium}", "fontSize": "11px", "lineHeight": "{font.leading.title}", "letterSpacing": "{font.tracking.caps}" }, "$description": "Labels and eyebrows: spaced capitals.", "$extensions": { "zo": { "sizeSmall": "11px", "step": -1, "case": "upper", "source": "Brand Manual p12: colour labels in Futura Medium capitals" } } } } }, "shape": { "zostel": { "$description": "Straight header layouts, 60 degree geometry, mitred strokes", "radius": { "$type": "dimension", "$value": "2px" }, "stroke-join": "miter", "stroke-cap": "butt", "angle": "60deg" }, "zo": { "$description": "Curved header layouts, round strokes (ZO infinity)", "radius": { "$type": "dimension", "$value": "999px" }, "stroke-join": "round", "stroke-cap": "round" }, "product": { "$description": "The product kit's shape (brand/briefs/product-kit.md): DV picked Look B, 'the warm desk', on 15 October 2026 (about 03:00 IST): one soft radius of 8px on every part, flat, one line. The 60 degree cut (chamfer) stays in the kit as an option, off by default: a part takes it only through a data-chamfer attribute.", "radius": { "$type": "dimension", "$value": "8px" }, "chamfer": { "$type": "dimension", "$value": "10px", "$description": "The cut's rise along the edge; its run is rise x tan 30deg (0.5774), so the slope is the symbol's 60 degrees and parallel to the Z's own diagonal on the tl/br corners." }, "angle": "60deg" } }, "motion": { "$description": "Motion language: every move is a 'journey' — depart (quick), travel (steady), arrive (soft settle). Signature: 6 parts, 60 degree steps, 60 ms stagger.", "duration": { "instant": { "$type": "duration", "$value": "90ms" }, "quick": { "$type": "duration", "$value": "180ms" }, "base": { "$type": "duration", "$value": "300ms" }, "journey": { "$type": "duration", "$value": "600ms" }, "hero": { "$type": "duration", "$value": "1200ms" }, "loop": { "$type": "duration", "$value": "3600ms" } }, "easing": { "arrive": { "$type": "cubicBezier", "$value": [ 0.16, 1, 0.3, 1 ] }, "depart": { "$type": "cubicBezier", "$value": [ 0.7, 0, 0.84, 0 ] }, "travel": { "$type": "cubicBezier", "$value": [ 0.65, 0, 0.35, 1 ] }, "bounce": { "$type": "cubicBezier", "$value": [ 0.34, 1.56, 0.64, 1 ] }, "step60": { "$type": "string", "$value": "steps(6, jump-none)", "$description": "Symbol rotates in 60 degree clicks (loader/compass)" } }, "stagger": { "$type": "duration", "$value": "60ms" }, "reduced-motion": { "$description": "Respect prefers-reduced-motion: replace movement with a 180ms opacity fade; never loop." } }, "theme": { "$description": "The kits' @theme (zostel-showcase/packages/tokens/tokens.css, generated by build_tokens.py; both kits import it, the old kit through its styles/tokens.css): the semantic roles the primitives read (shadcn's names) by day (light) and at night (dark), the kit's own names for brand colours and font stacks, and the measures it keeps for now (radii, durations, text-2xs, text-field, text-meta). Every colour is a reference into color.*: one value, in one place. Alongside these the kit carries the whole palette with its tints, the dialects' font stacks (font.zostel.*, font.zo.*), the type scale (font.scale), shape.*.radius and motion.*.", "light": { "$description": "By day. Every role is a reference into color.*: the page is Beige (ui.surface-paper), cards and popovers white, words Steel Grey (ui.text); the primary and the focus ring are orange-ink (white on it is 4.55:1; Warm Orange itself is 3.4:1); the destructive is ui.danger (AA as text on white and under white text).", "background": { "$type": "color", "$value": "{color.ui.surface-paper}" }, "foreground": { "$type": "color", "$value": "{color.ui.text}" }, "card": { "$type": "color", "$value": "{color.ui.surface}" }, "card-foreground": { "$type": "color", "$value": "{color.ui.text}" }, "popover": { "$type": "color", "$value": "{color.ui.surface}" }, "popover-foreground": { "$type": "color", "$value": "{color.ui.text}" }, "primary": { "$type": "color", "$value": "{color.core.orange-ink}", "$description": "white on it is 4.55:1 (Warm Orange itself is 3.4:1)" }, "primary-foreground": { "$type": "color", "$value": "{color.ui.text-inverse}" }, "primary-hover": { "$type": "color", "$value": "{color.core.orange-ink-on-beige}", "$description": "the primary's hover: one step darker by day" }, "secondary": { "$type": "color", "$value": "{color.core.grey}" }, "secondary-foreground": { "$type": "color", "$value": "{color.ui.text-inverse}" }, "muted": { "$type": "color", "$value": "{color.ui.surface-well}" }, "muted-foreground": { "$type": "color", "$value": "{color.ui.text-muted}" }, "accent": { "$type": "color", "$value": "{color.ui.accent-soft}" }, "accent-foreground": { "$type": "color", "$value": "{color.ui.text}" }, "destructive": { "$type": "color", "$value": "{color.ui.danger}", "$description": "AA as text on white and under white text" }, "destructive-foreground": { "$type": "color", "$value": "{color.ui.text-inverse}" }, "border": { "$type": "color", "$value": "{color.ui.border}", "$description": "the one line colour" }, "veil": { "$type": "color", "$value": "{color.ui.veil}", "$description": "the overlays' veil (bg-veil): Steel Grey at 40 %, a fill" }, "input": { "$type": "color", "$value": "{color.ui.border}" }, "ring": { "$type": "color", "$value": "{color.core.orange-ink}", "$description": "a focus ring that clears 3:1 on white and on Beige" }, "field-edge": { "$type": "color", "$value": "{color.ui.text-muted}", "$description": "a field's edge (WCAG 1.4.11: 3:1 against the field and the ground beside it): the muted grey by day (6.0:1 on white). The pickers' fields, the Combobox's, the newsletter's email." }, "link": { "$type": "color", "$value": "{color.core.orange-ink-on-beige}", "$description": "a text link's orange: 5.5:1 on white, 4.6:1 on Beige, for links whose ground varies (ui.link, orange-ink, is the link colour on white alone)" }, "sidebar": { "$type": "color", "$value": "{color.ui.surface-well}", "$description": "the shell's sidebar: the beige well, the khovar pattern on it tone on tone" }, "sidebar-foreground": { "$type": "color", "$value": "{color.ui.text}" }, "sidebar-accent": { "$type": "color", "$value": "{color.ui.surface}", "$description": "the active nav item: a white card on the well" }, "sidebar-accent-foreground": { "$type": "color", "$value": "{color.core.orange-ink-on-beige}" }, "sidebar-border": { "$type": "color", "$value": "{color.ui.border}" }, "pattern": { "$type": "color", "$value": "{color.ui.text}", "$description": "the paint of a pattern mask (khovar) on a well; its strength is theme.pattern" }, "status-progress": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1.20}", "$description": "a status chip's ground by day: the landscape colour at 20 % (Marigold); its dot is the full colour" }, "status-success": { "$type": "color", "$value": "{color.landscapes.fields.field-2.20}", "$description": "Jade at 20 %" }, "status-neutral": { "$type": "color", "$value": "{color.landscapes.corporate.corporate-grey.20}", "$description": "Stone Grey at 20 %" }, "status-danger": { "$type": "color", "$value": "{color.landscapes.valleys.valley-3.20}", "$description": "Blush at 20 %" }, "status-info": { "$type": "color", "$value": "{color.landscapes.waters.water-1.20}", "$description": "Sky at 20 %" }, "status-foreground": { "$type": "color", "$value": "{color.ui.text}", "$description": "the words on every status ground (Steel Grey)" } }, "dark": { "$description": "Night, from the palette only (every pair clears AA; check-docs.mjs measures it): the page is ui.surface-night, cards and popovers sit on it in Steel Grey (ui.surface-inverse), words are Beige. Orange-ink can't be read on grey (2.1:1), so at night the primary (prices, checks, the selected day), the focus ring and the links are Marigold with surface-night on it; the destructive is Blush. Soft text is beiges.k20, wells and hovers beiges.k80, lines k60 and field edges k40 (3:1, a field you can find). The .dark class switches the light roles to these.", "background": { "$type": "color", "$value": "{color.ui.surface-night}" }, "foreground": { "$type": "color", "$value": "{color.core.beige}", "$description": "11.6:1 on the page, 8.0:1 on a card" }, "card": { "$type": "color", "$value": "{color.ui.surface-inverse}" }, "card-foreground": { "$type": "color", "$value": "{color.core.beige}" }, "popover": { "$type": "color", "$value": "{color.ui.surface-inverse}" }, "popover-foreground": { "$type": "color", "$value": "{color.core.beige}" }, "primary": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1}", "$description": "Marigold: 4.7:1 on a card as text" }, "primary-foreground": { "$type": "color", "$value": "{color.ui.surface-night}", "$description": "6.9:1 on Marigold" }, "primary-hover": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1.80}", "$description": "at night one step lighter (Marigold 80)" }, "secondary": { "$type": "color", "$value": "{color.core.beige}" }, "secondary-foreground": { "$type": "color", "$value": "{color.core.grey}" }, "muted": { "$type": "color", "$value": "{color.beiges.k80}" }, "muted-foreground": { "$type": "color", "$value": "{color.beiges.k20}", "$description": "4.6:1 on the well, 5.4:1 on a card, 7.9:1 on the page" }, "accent": { "$type": "color", "$value": "{color.beiges.k80}" }, "accent-foreground": { "$type": "color", "$value": "{color.core.beige}" }, "destructive": { "$type": "color", "$value": "{color.landscapes.valleys.valley-3}", "$description": "Blush: 5.3:1 on a card as text" }, "destructive-foreground": { "$type": "color", "$value": "{color.ui.surface-night}" }, "border": { "$type": "color", "$value": "{color.beiges.k60}" }, "veil": { "$type": "color", "$value": "{color.ui.veil-night}", "$description": "Ink Black at 60 %" }, "input": { "$type": "color", "$value": "{color.beiges.k40}", "$description": "3.5:1 on a card" }, "field-edge": { "$type": "color", "$value": "{color.beiges.k40}", "$description": "as the input: 3.5:1 on a card (the muted grey was 1.6:1)" }, "ring": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1}", "$description": "Marigold: 4.7:1 on a card, 6.9:1 on the page" }, "link": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1}", "$description": "Marigold: links stay orange and read at night" }, "sidebar": { "$type": "color", "$value": "{color.landscapes.corporate.charcoal}", "$description": "at night the sidebar is Charcoal, a step off the night page" }, "sidebar-foreground": { "$type": "color", "$value": "{color.core.beige}" }, "sidebar-accent": { "$type": "color", "$value": "{color.ui.surface-night}", "$description": "the active item sits in the night page's shade" }, "sidebar-accent-foreground": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1}" }, "sidebar-border": { "$type": "color", "$value": "{color.beiges.k80}" }, "pattern": { "$type": "color", "$value": "{color.core.beige}" }, "status-progress": { "$type": "color", "$value": "{color.landscapes.sunny-days.sunny-1}", "$description": "at night a status chip is the full landscape colour with the night ink" }, "status-success": { "$type": "color", "$value": "{color.landscapes.fields.field-2}" }, "status-neutral": { "$type": "color", "$value": "{color.landscapes.corporate.corporate-grey}" }, "status-danger": { "$type": "color", "$value": "{color.landscapes.valleys.valley-3}" }, "status-info": { "$type": "color", "$value": "{color.landscapes.waters.water-1}" }, "status-foreground": { "$type": "color", "$value": "{color.ui.surface-night}" } }, "color": { "$description": "The kit's names for the AA text roles and the Night ground (brand/README.md §3): text-zostel-orange-ink on white, text-zostel-orange-ink-beige on Beige, text-zostel-muted for soft text; zostel-orange, -grey, -beige and -white are color.core by their own names.", "zostel-orange-ink": { "$type": "color", "$value": "{color.core.orange-ink}" }, "zostel-orange-ink-beige": { "$type": "color", "$value": "{color.core.orange-ink-on-beige}" }, "zostel-muted": { "$type": "color", "$value": "{color.ui.text-muted}" }, "zostel-night": { "$type": "color", "$value": "{color.ui.surface-night}", "$description": "the Night ground (a drawing's Night version sits on it)" } }, "font": { "$description": "The kit's font aliases. The site serves Futura, Gotham Narrow and Mrs Eaves itself, so these stacks name only the system fallbacks (Jost, Verdana, Georgia), not the open stand-ins of font.zostel.* (Barlow Semi Condensed, Libre Baskerville). The body stacks keep Futura second: Gotham Narrow's @font-face leaves out U+00A0 (its no-break space is 25 em wide), so every no-break space on the site sets in the next face of the stack.", "futura": { "$type": "fontFamily", "$value": "{font.zostel.display}" }, "gotham": { "$type": "fontFamily", "$value": [ "Gotham Narrow", "Verdana", "sans-serif" ] }, "mrs-eaves": { "$type": "fontFamily", "$value": [ "Mrs Eaves", "Georgia", "serif" ] }, "heading": { "$type": "fontFamily", "$value": "{font.zostel.display}" }, "body": { "$type": "fontFamily", "$value": [ "Gotham Narrow", "Futura", "Verdana", "sans-serif" ] }, "accent": { "$type": "fontFamily", "$value": [ "Mrs Eaves", "Georgia", "serif" ] }, "display": { "$type": "fontFamily", "$value": "{font.zostel.display}" }, "sans": { "$type": "fontFamily", "$value": [ "Gotham Narrow", "Futura", "Verdana", "sans-serif" ], "$description": "what body reads (base.css): the kit's default face" } }, "text": { "$description": "The product kit's own sizes, beside the brand's 12-role scale (font.scale, the site's specimen on /typography): text-2xs below Tailwind's text-xs, and the product's two working sizes, field and meta (DV picked Look B, 15 October 2026). field and meta are a size only, fixed, never fluid: a drop-in for text-[15px] / text-[13px] that keeps the leading a part sets (leading-snug, leading-normal). The caps label of a product (a column head, a menu group) is font.scale.label (text-label: 11 px, Futura Medium, tracked font.tracking.caps 0.2em), the brand's one label; no second tracking.", "2xs": { "$type": "typography", "$value": { "fontSize": "11px", "lineHeight": "calc(1 / 0.6875)" }, "$description": "text-2xs, 11 px on a 16 px line: the small labels over a value (Check-in, Guests) and a strip's weekday. The site's captions use the same size." }, "field": { "$type": "dimension", "$value": "15px", "$description": "text-field, 15 px: what a person types and reads in a product: a field's value, a button's words, a menu item, a row's first line, a dialog's text. On a phone a field goes to 16 px (max-sm:text-base, pointer-coarse:text-base) so iOS never zooms." }, "meta": { "$type": "dimension", "$value": "13px", "$description": "text-meta, 13 px: the second line beside or under the first: a row's detail, a hint, a count, a time, a tooltip." } }, "radius": { "$description": "The kit's radii (rounded-sm/md/lg/xl), at shadcn's values until the direction sheet (brand/briefs/product-kit.md, Phase 1); the brand's own are shape.zostel.radius (rounded-zostel) and shape.zo.radius (rounded-zo).", "sm": { "$type": "dimension", "$value": "4px" }, "md": { "$type": "dimension", "$value": "6px" }, "lg": { "$type": "dimension", "$value": "8px" }, "xl": { "$type": "dimension", "$value": "12px" } }, "duration": { "$description": "The kit's old durations (duration-fast/normal/slow/slower), kept until the direction sheet; the brand's are motion.duration (duration-instant … loop).", "fast": { "$type": "duration", "$value": "150ms" }, "normal": { "$type": "duration", "$value": "300ms" }, "slow": { "$type": "duration", "$value": "500ms" }, "slower": { "$type": "duration", "$value": "1000ms" } }, "pattern": { "$description": "How strongly a pattern mask is painted on a well (--pattern-alpha), by day and at night: a whisper, tone on tone (Look B's khovar, index.json's 8.7 % on Beige); raised a step on 15 Oct 2026 (7.5 → 9 % by day, 9 → 12 % at night) so the sidebar's texture is felt, not hunted for.", "light": { "$type": "number", "$value": 0.09 }, "dark": { "$type": "number", "$value": 0.12 } }, "status-wash": { "$description": "How much of a state's landscape colour is mixed into the card behind a status chip (StatusBadge, --status-wash): fuller by day so a state reads at a glance (DV, 15 Oct 2026: 'life is less'), held at 20 % at night where Beige words on a fuller wash would drop under 4.5:1 (Sky, Blush, Paddy). Steel Grey on every 30 % wash clears 6.9:1.", "light": { "$type": "number", "$value": 0.3 }, "dark": { "$type": "number", "$value": 0.2 } } }, "spacing": { "$description": "The spacing scale: a 4 px step (Tailwind's spacing, which the site and the kit already use: p-1 = 4px), the phone's side gutter, the touch target and the product's control height. DESIGN.md's spacing slot reads these.", "base": { "$type": "dimension", "$value": "4px", "$description": "one step" }, "xs": { "$type": "dimension", "$value": "4px" }, "sm": { "$type": "dimension", "$value": "8px" }, "md": { "$type": "dimension", "$value": "16px" }, "lg": { "$type": "dimension", "$value": "24px" }, "xl": { "$type": "dimension", "$value": "32px" }, "2xl": { "$type": "dimension", "$value": "48px" }, "3xl": { "$type": "dimension", "$value": "64px" }, "gutter-phone": { "$type": "dimension", "$value": "16px", "$description": "the side gutter on a phone; nothing scrolls sideways" }, "touch": { "$type": "dimension", "$value": "44px", "$description": "every target on a phone and a coarse pointer (pointer-coarse:)" }, "control": { "$type": "dimension", "$value": "40px", "$description": "the product's field and button height on a fine pointer (h-10); 44 px on a coarse one" } }, "density": { "$description": "How tightly a product screen is packed (zostel-product docs/density.md): comfortable (the default) and compact, a person's own choice, one attribute on the app's root (data-density). build_tokens.py writes each mode as CSS variables (--density-row, --density-control, --density-pad, --density-gap, --density-cell, --density-check, --density-tile, --density-chip) on :root and [data-density=\"comfortable\"|\"compact\"] in tokens.css; parts read the variables. Never a type size, and never under 44 px on a coarse pointer (spacing.touch): a part keeps its pointer-coarse: 44 px over these.", "comfortable": { "$description": "the default for everyone; every screen made for a phone", "row": { "$type": "dimension", "$value": "52px", "$description": "a table row's height (DataTable's virtual row)" }, "control": { "$type": "dimension", "$value": "40px", "$description": "a field's and a button's height (spacing.control)" }, "pad": { "$type": "dimension", "$value": "20px", "$description": "padding inside a card" }, "gap": { "$type": "dimension", "$value": "20px", "$description": "the gap between cards" }, "cell": { "$type": "dimension", "$value": "9px", "$description": "a table cell's padding above and below" }, "check": { "$type": "dimension", "$value": "44px", "$description": "a row's selection checkbox square" }, "tile": { "$type": "dimension", "$value": "16px", "$description": "padding inside a tile (a stat tile's sides on a phone and its top and bottom, a count tab): words and numbers never closer than 12 px to the edge (DV, 15 Oct 2026: the count tiles felt claustrophobic)" }, "chip": { "$type": "dimension", "$value": "10px", "$description": "a chip's and a badge's side padding (StatusBadge, TrustBadge, the assignee and role chips)" } }, "compact": { "$description": "chosen once by a person (agents, finance): the same columns and type, packed tighter", "row": { "$type": "dimension", "$value": "40px" }, "control": { "$type": "dimension", "$value": "32px" }, "pad": { "$type": "dimension", "$value": "12px" }, "gap": { "$type": "dimension", "$value": "12px" }, "cell": { "$type": "dimension", "$value": "4px" }, "check": { "$type": "dimension", "$value": "32px" }, "tile": { "$type": "dimension", "$value": "12px" }, "chip": { "$type": "dimension", "$value": "8px" } } }, "component": { "$description": "The product kit's parts (zostel-showcase/packages/zostel-product, Look B, DV's pick of 15 October 2026) as tokens: each names the theme roles it paints with, so DESIGN.md's linter measures every text on its ground, by day and at night. The code is the truth; these describe it. A typography value is a reference whose type is its target's (a type role, or a size-only role such as theme.text.field).", "button-primary": { "$description": "Button primary: the one main action (h-10, 44 px on a coarse pointer)", "backgroundColor": { "$type": "color", "$value": "{theme.light.primary}" }, "textColor": { "$type": "color", "$value": "{theme.light.primary-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" }, "padding": { "$type": "dimension", "$value": "16px" }, "typography": { "$value": "{theme.text.field}" } }, "button-primary-hover": { "$description": "its hover, one step darker", "backgroundColor": { "$type": "color", "$value": "{theme.light.primary-hover}" }, "textColor": { "$type": "color", "$value": "{theme.light.primary-foreground}" } }, "button-secondary": { "$description": "Button secondary: the well", "backgroundColor": { "$type": "color", "$value": "{theme.light.muted}" }, "textColor": { "$type": "color", "$value": "{theme.light.foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" } }, "button-outline": { "$description": "Button outline: a card with the one line", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" } }, "button-danger": { "$description": "Button danger", "backgroundColor": { "$type": "color", "$value": "{theme.light.destructive}" }, "textColor": { "$type": "color", "$value": "{theme.light.destructive-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" } }, "input": { "$description": "Every field (Input, Select, Combobox, DateField…): white, the field-edge line (3:1), 15 px text, 16 px on a phone", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" }, "typography": { "$value": "{theme.text.field}" } }, "field-hint": { "$description": "A field's hint and a table's second line: the meta role", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.muted-foreground}" }, "typography": { "$value": "{theme.text.meta}" } }, "table-head": { "$description": "A data table's column heads: Futura capitals, the label role", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.muted-foreground}" }, "typography": { "$value": "{font.scale.label}" } }, "row-selected": { "$description": "A selected row or option", "backgroundColor": { "$type": "color", "$value": "{theme.light.accent}" }, "textColor": { "$type": "color", "$value": "{theme.light.accent-foreground}" } }, "dialog": { "$description": "Dialog, Drawer and ConfirmDialog panels: white, one line, no shadow, over the veil", "backgroundColor": { "$type": "color", "$value": "{theme.light.popover}" }, "textColor": { "$type": "color", "$value": "{theme.light.popover-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "close-control": { "$description": "The one close control: square with the product corner, never round", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" }, "height": { "$type": "dimension", "$value": "{spacing.control}" } }, "nav": { "$description": "The app shell's sidebar on the well (the khovar pattern tone on tone)", "backgroundColor": { "$type": "color", "$value": "{theme.light.sidebar}" }, "textColor": { "$type": "color", "$value": "{theme.light.sidebar-foreground}" } }, "nav-active": { "$description": "The current place in the nav: a white tile", "backgroundColor": { "$type": "color", "$value": "{theme.light.sidebar-accent}" }, "textColor": { "$type": "color", "$value": "{theme.light.sidebar-accent-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "status-progress": { "$description": "StatusBadge, the progress tone", "backgroundColor": { "$type": "color", "$value": "{theme.light.status-progress}" }, "textColor": { "$type": "color", "$value": "{theme.light.status-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.zostel.radius}" } }, "status-success": { "$description": "StatusBadge, the success tone", "backgroundColor": { "$type": "color", "$value": "{theme.light.status-success}" }, "textColor": { "$type": "color", "$value": "{theme.light.status-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.zostel.radius}" } }, "status-neutral": { "$description": "StatusBadge, the neutral tone", "backgroundColor": { "$type": "color", "$value": "{theme.light.status-neutral}" }, "textColor": { "$type": "color", "$value": "{theme.light.status-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.zostel.radius}" } }, "status-danger": { "$description": "StatusBadge, the danger tone", "backgroundColor": { "$type": "color", "$value": "{theme.light.status-danger}" }, "textColor": { "$type": "color", "$value": "{theme.light.status-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.zostel.radius}" } }, "status-info": { "$description": "StatusBadge, the info tone", "backgroundColor": { "$type": "color", "$value": "{theme.light.status-info}" }, "textColor": { "$type": "color", "$value": "{theme.light.status-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.zostel.radius}" } }, "link": { "$description": "A link on a card", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.link}" } }, "page": { "$description": "The page: Beige", "backgroundColor": { "$type": "color", "$value": "{theme.light.background}" }, "textColor": { "$type": "color", "$value": "{theme.light.foreground}" } }, "page-muted-text": { "$description": "Soft text on the page", "backgroundColor": { "$type": "color", "$value": "{theme.light.background}" }, "textColor": { "$type": "color", "$value": "{theme.light.muted-foreground}" } }, "card": { "$description": "A card", "backgroundColor": { "$type": "color", "$value": "{theme.light.card}" }, "textColor": { "$type": "color", "$value": "{theme.light.card-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "well": { "$description": "A well", "backgroundColor": { "$type": "color", "$value": "{theme.light.muted}" }, "textColor": { "$type": "color", "$value": "{theme.light.muted-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "night-page": { "$description": "At night: the page", "backgroundColor": { "$type": "color", "$value": "{theme.dark.background}" }, "textColor": { "$type": "color", "$value": "{theme.dark.foreground}" } }, "night-card": { "$description": "At night: a card", "backgroundColor": { "$type": "color", "$value": "{theme.dark.card}" }, "textColor": { "$type": "color", "$value": "{theme.dark.card-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "night-card-muted-text": { "$description": "At night: soft text on a card", "backgroundColor": { "$type": "color", "$value": "{theme.dark.card}" }, "textColor": { "$type": "color", "$value": "{theme.dark.muted-foreground}" } }, "night-button-primary": { "$description": "At night: Button primary, Marigold", "backgroundColor": { "$type": "color", "$value": "{theme.dark.primary}" }, "textColor": { "$type": "color", "$value": "{theme.dark.primary-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "night-input": { "$description": "At night: a field", "backgroundColor": { "$type": "color", "$value": "{theme.dark.card}" }, "textColor": { "$type": "color", "$value": "{theme.dark.foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "night-nav-active": { "$description": "At night: the current place in the nav", "backgroundColor": { "$type": "color", "$value": "{theme.dark.sidebar-accent}" }, "textColor": { "$type": "color", "$value": "{theme.dark.sidebar-accent-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } }, "night-link": { "$description": "At night: a link on a card", "backgroundColor": { "$type": "color", "$value": "{theme.dark.card}" }, "textColor": { "$type": "color", "$value": "{theme.dark.link}" } }, "night-destructive": { "$description": "At night: Button danger", "backgroundColor": { "$type": "color", "$value": "{theme.dark.destructive}" }, "textColor": { "$type": "color", "$value": "{theme.dark.destructive-foreground}" }, "rounded": { "$type": "dimension", "$value": "{shape.product.radius}" } } } }