{"$schema":"https://design-tokens.org/v1/","description":"HTW Website Design Tokens - Single source of truth for all design decisions","version":"2.0.0","colors":{"brand":{"primary":{"value":"#04153D","type":"color","description":"HTW Navy - THE primary brand color - matches logo. Backgrounds, headers, major brand moments."},"secondary":{"royal-navy":{"value":"#002868","type":"color","description":"Royal Navy - from King Kalākaua's standard. Gradient base, alternate backgrounds, ocean depth."},"gold":{"value":"#FFB81C","type":"color","description":"Royal Gold - from King Kalākaua's standard. CTAs, highlights, Hawaiian warmth."},"gold-hover":{"value":"#FFC843","type":"color","description":"Royal Gold hover state"},"green":{"value":"#1B7A5A","type":"color","description":"Royal Green - from King Kalākaua's standard. Nature sections, success states, land (ʻāina)."},"cyan":{"value":"#00D4FF","type":"color","description":"Neon Cyan - Electric tech energy, focus states, Hawaii Vice feel."}},"neutral":{"value":"#FFFFFF","type":"color","description":"White - Primary neutral - Text on dark, backgrounds, breathing room."},"_legacy_note":"All legacy colors removed and migrated to brand tokens (Feb 2026). htw-turquoise→htw-cyan, htw-primary→htw-gold, htw-deep-sea→htw-navy/htw-royal-navy"},"neutrals":{"light":{"bg":{"value":"#FFFFFF","type":"color","description":"Primary background (light mode)"},"bg-subtle":{"value":"#FFFAEC","type":"color","description":"Solar Cream - warm alternate background"},"surface":{"value":"#FFFFFF","type":"color","description":"Cards, panels (light mode)"},"surface-elevated":{"value":"#F8FAFC","type":"color","description":"Elevated surfaces (dropdowns, modals)"},"text-primary":{"value":"#0B1220","type":"color","description":"Primary text (light mode)"},"text-secondary":{"value":"#334155","type":"color","description":"Secondary text (light mode)"},"text-muted":{"value":"#64748B","type":"color","description":"Muted/helper text (light mode)"},"border":{"value":"#CBD5E1","type":"color","description":"Standard borders (light mode)"},"border-subtle":{"value":"#F1F5F9","type":"color","description":"Subtle dividers (light mode)"}},"dark":{"bg":{"value":"#071A2B","type":"color","description":"Primary background (Ocean 900 - dark mode)"},"bg-subtle":{"value":"#0B243C","type":"color","description":"Ocean 800 - alternate dark background"},"surface":{"value":"#0B243C","type":"color","description":"Cards, panels (dark mode)"},"surface-elevated":{"value":"#12314E","type":"color","description":"Elevated surfaces (dark mode)"},"text-primary":{"value":"#FFFFFF","type":"color","description":"Primary text (dark mode)"},"text-secondary":{"value":"#CFE3EE","type":"color","description":"Secondary text (dark mode)"},"text-muted":{"value":"#5F8FA9","type":"color","description":"Muted/helper text (dark mode)"},"border":{"value":"#12314E","type":"color","description":"Standard borders (dark mode)"},"border-subtle":{"value":"#0B243C","type":"color","description":"Subtle dividers (dark mode)"}}},"royal":{"_description":"5 colors: 4 from King Kalākaua's Royal Standard + white neutral - HTW brand heritage foundation","navy":{"value":"#002868","type":"color","description":"Royal Navy - Pacific Ocean/authority - Used in gradient base"},"gold":{"value":"#FFB81C","type":"color","description":"Royal Gold - Sun/royalty - PRIMARY CTA BUTTON"},"gold-hover":{"value":"#FFC843","type":"color","description":"Royal Gold hover state"},"red":{"value":"#CE1126","type":"color","description":"Royal Red (ʻUlaʻula) - Sacred to aliʻi - ERROR STATE"},"green":{"value":"#1B7A5A","type":"color","description":"Royal Green - Land (ʻāina)/growth - NATURE ACCENT + SUCCESS"},"white":{"value":"#FFFFFF","type":"color","description":"White - Primary neutral - Backgrounds, text on dark, secondary buttons"}},"gradient":{"_description":"Ocean Sunrise gradient uses Royal Navy as base + intermediate blue stops (not standalone brand colors)","ocean-sunrise":{"value":"linear-gradient(90deg, #002868 0%, #0052A3 25%, #5B9FD8 50%, #93C5FD 75%, rgba(147, 197, 253, 0.1) 100%)","type":"string","description":"Ocean Sunrise - 5-stop horizontal gradient for hero overlays. Intermediate stops (#0052A3, #5B9FD8, #93C5FD) are gradient-only, not standalone brand colors."}},"buttons":{"primary":{"bg":{"value":"#FFB81C","type":"color","description":"Primary button background - Royal Gold"},"bg-hover":{"value":"#FFC843","type":"color","description":"Primary button hover"},"text":{"value":"#04153D","type":"color","description":"Primary button text - HTW Navy (logo color)"},"border":{"value":"#FFB81C","type":"color","description":"Primary button border"}},"secondary-light":{"bg":{"value":"#FFFFFF","type":"color","description":"Secondary light button background (for dark backgrounds)"},"bg-hover":{"value":"#F9FAFB","type":"color","description":"Secondary light button hover"},"text":{"value":"#04153D","type":"color","description":"Secondary light button text - HTW Navy"},"border":{"value":"#04153D","type":"color","description":"Secondary light button border - HTW Navy"}},"secondary-dark":{"bg":{"value":"#04153D","type":"color","description":"Secondary dark button background (for light backgrounds) - HTW Navy"},"bg-hover":{"value":"#02102A","type":"color","description":"Secondary dark button hover - Darker HTW Navy"},"text":{"value":"#FFFFFF","type":"color","description":"Secondary dark button text - White"},"border":{"value":"#04153D","type":"color","description":"Secondary dark button border - HTW Navy"}},"tertiary":{"bg":{"value":"transparent","type":"color","description":"Tertiary/ghost button background"},"bg-hover":{"value":"rgba(4, 21, 61, 0.05)","type":"color","description":"Tertiary button hover - subtle HTW Navy background"},"text-light":{"value":"#04153D","type":"color","description":"Tertiary button text on light backgrounds - HTW Navy"},"text-dark":{"value":"#FFFFFF","type":"color","description":"Tertiary button text on dark backgrounds"},"border-light":{"value":"#04153D","type":"color","description":"Tertiary button border on light backgrounds - HTW Navy"},"border-dark":{"value":"#FFFFFF","type":"color","description":"Tertiary button border on dark backgrounds"}}},"actions":{"light":{"primary":{"value":"#FFB81C","type":"color","description":"Royal Gold - primary CTA buttons (LOCKED)"},"on-primary":{"value":"#04153D","type":"color","description":"Text on primary buttons (HTW Navy on Royal Gold)"},"secondary":{"value":"#04153D","type":"color","description":"HTW Navy - secondary buttons on light backgrounds"},"on-secondary":{"value":"#FFFFFF","type":"color","description":"Text on secondary buttons"},"tertiary":{"value":"transparent","type":"color","description":"Ghost buttons - transparent with border"},"focus-ring":{"value":"#00D4FF","type":"color","description":"Focus outline color - Neon Cyan (tech energy)"}},"dark":{"primary":{"value":"#FFB81C","type":"color","description":"Royal Gold - primary CTA buttons (LOCKED)"},"on-primary":{"value":"#04153D","type":"color","description":"Text on primary buttons (HTW Navy on Royal Gold)"},"secondary":{"value":"#FFFFFF","type":"color","description":"White - secondary buttons on dark backgrounds"},"on-secondary":{"value":"#04153D","type":"color","description":"Text on secondary buttons"},"tertiary":{"value":"transparent","type":"color","description":"Ghost buttons - transparent with border"},"focus-ring":{"value":"#00D4FF","type":"color","description":"Focus outline color - Neon Cyan (tech energy)"}}},"accents":{"light":{"ocean":{"value":"#007C91","type":"color","description":"Deep Teal - ocean accent (light mode)"},"futuristic":{"value":"#7C3AED","type":"color","description":"Ultraviolet - tech/futuristic accent (light mode)"},"warm":{"value":"#F06A6A","type":"color","description":"Coral - warm accent (light mode)"}},"dark":{"ocean":{"value":"#22D3EE","type":"color","description":"Bright cyan - ocean accent (dark mode)"},"futuristic":{"value":"#C4B5FD","type":"color","description":"Light violet - tech accent (dark mode)"},"warm":{"value":"#F06A6A","type":"color","description":"Coral - warm accent (dark mode, same)"}}},"status":{"light":{"success":{"value":"#1B7A5A","type":"color","description":"Royal Green - success state (light mode)"},"warning":{"value":"#F59E0B","type":"color","description":"Warning state (light mode)"},"error":{"value":"#CE1126","type":"color","description":"Royal Red (ʻUlaʻula) - error state (light mode)"},"info":{"value":"#00B7D6","type":"color","description":"Reef Cyan - info state (light mode)"}},"dark":{"success":{"value":"#5BC6A6","type":"color","description":"Light mint green - success state (dark mode)"},"warning":{"value":"#FBBF24","type":"color","description":"Warning state (dark mode)"},"error":{"value":"#F06A6A","type":"color","description":"Coral - error state (dark mode)"},"info":{"value":"#22D3EE","type":"color","description":"Bright cyan - info state (dark mode)"}}},"calendar-categories":{"_description":"Calendar category badge colors derived from HTW brand palette (Issue #38 / #61)","panel":{"bg":{"value":"#E9F0FF","type":"color","description":"Light royal navy tint for Panel/Talk badges"},"text":{"value":"#002868","type":"color","description":"Royal Navy text"},"border":{"value":"#BFD3FF","type":"color","description":"Panel badge border"}},"networking":{"bg":{"value":"#EAF7F2","type":"color","description":"Light royal green tint for Networking badges"},"text":{"value":"#1B7A5A","type":"color","description":"Royal Green text"},"border":{"value":"#BFE6D5","type":"color","description":"Networking badge border"}},"workshop":{"bg":{"value":"#FFF4D6","type":"color","description":"Light royal gold tint for Workshop badges"},"text":{"value":"#8A5A00","type":"color","description":"Dark gold text for contrast"},"border":{"value":"#FFE19C","type":"color","description":"Workshop badge border"}},"social":{"bg":{"value":"#FDE8EA","type":"color","description":"Light royal red tint for Social badges"},"text":{"value":"#9B1020","type":"color","description":"Deep red text for contrast"},"border":{"value":"#F6C8CF","type":"color","description":"Social badge border"}},"demo":{"bg":{"value":"#E3F9FF","type":"color","description":"Light cyan/ocean tint for Demo badges"},"text":{"value":"#007C91","type":"color","description":"Ocean accent text"},"border":{"value":"#B7EEF9","type":"color","description":"Demo badge border"}},"hackathon":{"bg":{"value":"#E8EDFA","type":"color","description":"Light HTW navy tint for Hackathon badges"},"text":{"value":"#04153D","type":"color","description":"HTW Navy text"},"border":{"value":"#C8D5F2","type":"color","description":"Hackathon badge border"}},"summit":{"bg":{"value":"#F1EAFF","type":"color","description":"Light futuristic accent tint for Summit badges"},"text":{"value":"#5B21B6","type":"color","description":"Deep violet text for contrast"},"border":{"value":"#DCCAFF","type":"color","description":"Summit badge border"}}},"_removed_sections":"backup-backgrounds (5 colors) and testing (5 colors) removed — none were in active use"},"spacing":{"section":{"mobile":{"value":"64px","type":"dimension","description":"py-16"},"desktop":{"value":"80px","type":"dimension","description":"py-20"}},"container":{"padding-x":{"value":"1rem","type":"dimension","description":"px-4 base"},"padding-x-sm":{"value":"1.5rem","type":"dimension","description":"sm:px-6"},"max-width":{"value":"72rem","type":"dimension","description":"max-w-6xl (1152px)"}},"grid":{"gap-default":{"value":"2rem","type":"dimension","description":"gap-8"},"gap-large":{"value":"3rem","type":"dimension","description":"gap-12"}}},"typography":{"fontFamily":{"sans":{"value":"system-ui, sans-serif","type":"fontFamily"},"inter":{"value":"Inter, system-ui, sans-serif","type":"fontFamily"},"mono":{"value":"monospace","type":"fontFamily"}},"fontSize":{"h1-mobile":{"value":"3rem","type":"dimension","description":"48px - text-5xl"},"h1-desktop":{"value":"4.5rem","type":"dimension","description":"72px - text-7xl"},"h2-mobile":{"value":"1.875rem","type":"dimension","description":"30px - text-3xl"},"h2-desktop":{"value":"2.25rem","type":"dimension","description":"36px - text-4xl"},"h3-mobile":{"value":"1.25rem","type":"dimension","description":"20px - text-xl"},"h3-desktop":{"value":"1.5rem","type":"dimension","description":"24px - text-2xl"},"body-mobile":{"value":"1rem","type":"dimension","description":"16px - text-base"},"body-desktop":{"value":"1.125rem","type":"dimension","description":"18px - text-lg"}},"fontWeight":{"normal":{"value":"400","type":"number"},"semibold":{"value":"600","type":"number"},"bold":{"value":"700","type":"number"}},"lineHeight":{"tight":{"value":"1.25","type":"number","description":"Headings"},"normal":{"value":"1.5","type":"number","description":"Body"},"relaxed":{"value":"1.625","type":"number","description":"Long-form content"}}},"radius":{"none":{"value":"0","type":"dimension"},"button":{"value":"4px","type":"dimension","description":"Standard button radius"},"card":{"value":"8px","type":"dimension","description":"Cards, modals"},"large":{"value":"12px","type":"dimension","description":"Large containers"}},"shadows":{"none":{"value":"none","type":"shadow"},"sm":{"value":"0 1px 2px 0 rgba(0, 0, 0, 0.05)","type":"shadow"},"base":{"value":"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)","type":"shadow"},"md":{"value":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)","type":"shadow"},"lg":{"value":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)","type":"shadow"},"xl":{"value":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)","type":"shadow"}},"transitions":{"fast":{"value":"150ms","type":"duration","description":"Micro-interactions"},"base":{"value":"300ms","type":"duration","description":"Standard transitions"},"slow":{"value":"500ms","type":"duration","description":"Complex animations"},"easing":{"default":{"value":"cubic-bezier(0.4, 0, 0.2, 1)","type":"cubicBezier"},"in":{"value":"cubic-bezier(0.4, 0, 1, 1)","type":"cubicBezier"},"out":{"value":"cubic-bezier(0, 0, 0.2, 1)","type":"cubicBezier"},"in-out":{"value":"cubic-bezier(0.4, 0, 0.2, 1)","type":"cubicBezier"}}},"breakpoints":{"sm":{"value":"640px","type":"dimension"},"md":{"value":"768px","type":"dimension"},"lg":{"value":"1024px","type":"dimension"},"xl":{"value":"1280px","type":"dimension"},"2xl":{"value":"1536px","type":"dimension"}},"zIndex":{"base":{"value":"0","type":"number"},"dropdown":{"value":"10","type":"number"},"sticky":{"value":"20","type":"number"},"modal":{"value":"50","type":"number"},"toast":{"value":"100","type":"number"}},"components":{"button":{"fontWeight":{"value":"600","type":"number","description":"font-semibold"},"textTransform":{"value":"uppercase","type":"string"},"borderRadius":{"value":"4px","type":"dimension","description":"rounded-[4px]"},"borderWidth":{"value":"2px","type":"dimension","description":"Uniform border width on ALL variants. Solid-fill variants use color-matched or transparent borders for consistent box-model sizing."},"sizes":{"sm":{"paddingX":{"value":"1.25rem","type":"dimension","description":"px-5 (20px)"},"paddingY":{"value":"0.5rem","type":"dimension","description":"py-2 (8px)"},"minHeight":{"value":"36px","type":"dimension","description":"min-h-[36px]"},"fontSize":{"value":"1rem","type":"dimension","description":"text-base (16px)"},"usage":"Header nav CTAs, compact spaces, inline actions"},"md":{"paddingX":{"value":"1.5rem","type":"dimension","description":"px-6 (24px)"},"paddingY":{"value":"0.75rem","type":"dimension","description":"py-3 (12px)"},"minHeight":{"value":"44px","type":"dimension","description":"min-h-[44px] - touch target minimum"},"fontSize":{"value":"1rem","type":"dimension","description":"text-base (16px)"},"usage":"Default size. Most buttons across the site."},"lg":{"paddingX":{"value":"2rem","type":"dimension","description":"px-8 (32px)"},"paddingY":{"value":"1rem","type":"dimension","description":"py-4 (16px)"},"minHeight":{"value":"52px","type":"dimension","description":"min-h-[52px]"},"fontSize":{"value":"1.125rem","type":"dimension","description":"text-lg (18px)"},"usage":"Hero CTAs, prominent section actions, full-width mobile buttons"}},"variants":{"primary":{"description":"Royal Gold button for main CTAs","usage":"Maximum 1 per screen section. Main action (Register, Buy, Submit)."},"secondary":{"description":"White border button for dark backgrounds","usage":"Supporting actions on dark backgrounds or over photos with dark overlays."},"secondary-dark":{"description":"Navy button with white text for light backgrounds","usage":"Supporting actions on white or Solar Cream backgrounds."},"tertiary":{"description":"Ghost/transparent button with border","usage":"Lowest priority actions, cancel/back buttons, destructive actions."}}},"hero":{"minHeight-mobile":{"value":"85vh","type":"dimension"},"minHeight-desktop":{"value":"100vh","type":"dimension"},"overlay":{"value":"linear-gradient(90deg, #002868 0%, #0052A3 25%, #5B9FD8 50%, #93C5FD 75%, rgba(147, 197, 253, 0.1) 100%)","type":"string","description":"Ocean Sunrise gradient overlay"}},"speaker-card":{"_description":"Reusable speaker card system with portrait overlay and horizontal variants","variants":{"overlay":{"imageAspectRatio":{"value":"4/5","type":"string","description":"Portrait ratio for speaker grids and carousels"},"overlayGradient":{"value":"linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0))","type":"string","description":"Legible text overlay on image cards"},"socialButtons":{"size":{"value":"32px","type":"dimension","description":"Top-right social icon button size"},"bg":{"value":"rgba(255, 255, 255, 0.9)","type":"color","description":"Social icon background on image cards"},"icon":{"value":"#04153D","type":"color","description":"Social icon color (HTW Navy)"}}},"horizontal":{"containerBg":{"value":"#FFFFFF","type":"color","description":"Horizontal card background"},"containerBorder":{"value":"#F1F5F9","type":"color","description":"Horizontal card border"},"imageSize":{"value":"96px","type":"dimension","description":"Horizontal card image size"}}},"interaction":{"hoverTranslateY":{"value":"-2px","type":"dimension","description":"Subtle raise on hover"},"hoverScaleImage":{"value":"1.05","type":"number","description":"Image zoom on hover"},"duration":{"value":"300ms","type":"duration","description":"Standard speaker card transition timing"}}}}}