{ "$schema": "https://design-tokens.org/v1/", "description": "HTW Website Design Tokens - Single source of truth for all design decisions", "version": "3.0.0", "updated": "2026-09-18", "publicSite": { "_description": "Approved public marketing composition, version 3.0.0. Additive profile; existing form, calendar, admin, and component tokens remain unchanged.", "updated": "2026-09-18", "colors": { "canvas": { "value": "#04153D", "type": "color", "description": "HTW Navy public page canvas and footer" }, "royal": { "value": "#002868", "type": "color", "description": "Royal Navy depth and portrait backdrops" }, "action": { "value": "#FFB81C", "type": "color", "description": "Royal Gold primary actions" }, "action-hover": { "value": "#FFC843", "type": "color", "description": "Primary action hover" }, "green": { "value": "#1B7A5A", "type": "color", "description": "Nature/community accents and selected bands" }, "mist": { "value": "#B9D8B0", "type": "color", "description": "Soft green accents; htw-mist" }, "highlight": { "value": "#91B8EC", "type": "color", "description": "Blue heading highlights; htw-highlight" }, "muted": { "value": "#B7C6DF", "type": "color", "description": "Body text on navy; htw-muted" }, "editorial-sand": { "value": "#F2EEE3", "type": "color", "description": "Homepage About copy panel; htw-editorial-sand. Distinct from retained Solar Cream #FFFAEC." }, "line": { "value": "rgb(255 255 255 / 17%)", "type": "color", "description": "Fine public dividers" }, "focus": { "value": "#00D4FF", "type": "color", "description": "Focus on dark surfaces; use contrasting royal blue on light panels" } }, "typography": { "family": { "value": "Inter, system-ui, sans-serif", "type": "fontFamily" }, "heading-weight": { "value": "500", "type": "number" }, "hero-weight": { "value": "600", "type": "number", "description": "Homepage hero" }, "heading-case": { "value": "none", "type": "string", "description": "Sentence case in content; no forced uppercase headings" }, "interior-hero": { "value": "clamp(48px, 6.8vw, 110px)", "type": "dimension", "description": "Desktop profile; mobile override clamp(44px, 9vw, 72px)" }, "section-heading": { "value": "clamp(32px, 4vw, 62px)", "type": "dimension" }, "body": { "value": "16px", "type": "dimension" }, "body-line-height": { "value": "1.7", "type": "number" } }, "layout": { "gutter": { "value": "clamp(24px, 4.5vw, 88px)", "type": "dimension" }, "container-max": { "value": "1760px", "type": "dimension", "description": "Public interior content container; bands remain full width" }, "section-desktop": { "value": "72px", "type": "dimension" }, "section-mobile": { "value": "48px", "type": "dimension" }, "radius": { "value": "4px", "type": "dimension" }, "border-width": { "value": "1px", "type": "dimension" } }, "action": { "min-height": { "value": "48px", "type": "dimension" }, "padding": { "value": "14px 20px", "type": "string" }, "font-size": { "value": "14px", "type": "dimension" }, "font-weight": { "value": "600", "type": "number" }, "text-transform": { "value": "none", "type": "string", "description": "Sentence-case action labels" } }, "principles": [ "Video/photo-led full-width bands on navy; gold primary actions, restrained green, and deliberate sand.", "About precedes featured media on the homepage; footer remains navy.", "No decorative numerical eyebrows; meaningful step counts and carousel positions are allowed.", "Light surfaces support forms, tools, and long report reading.", "Preserve existing logos, sponsor recognition, working flows, and historical report content.", "Core editions are separate from annual campaigns; verify dates and claims before reuse." ] }, "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, deep overlays, 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 - sparse warm surface; do not use as alternating section wallpaper" }, "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 - elevated dark surface" }, "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": { "_description": "Retained UI and contained reading recipes. Public marketing spacing is in publicSite.layout.", "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": { "_description": "Retained UI typography. Public marketing heading and action treatments are in publicSite.typography and publicSite.action.", "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": { "_description": "Existing shared Button component recipe; public marketing actions use publicSite.action.", "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": "14px", "type": "dimension", "description": "px-3.5 (14px)" }, "paddingY": { "value": "0.5rem", "type": "dimension", "description": "py-2 (8px)" }, "minHeight": { "value": "40px", "type": "dimension", "description": "min-h-10" }, "fontSize": { "value": "1rem", "type": "dimension", "description": "text-base (16px)" }, "usage": "Header nav CTAs, compact spaces, inline actions" }, "md": { "paddingX": { "value": "20px", "type": "dimension", "description": "px-5 (20px)" }, "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": "24px", "type": "dimension", "description": "px-6 (24px)" }, "paddingY": { "value": "1rem", "type": "dimension", "description": "py-4 (16px)" }, "minHeight": { "value": "48px", "type": "dimension", "description": "min-h-12" }, "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." } } }, "card-geometry": { "_description": "Canonical card proportions and layout rules. Keep image ratios consistent inside a section; do not casually mix ratios within the same grid.", "aspects": { "speakerCard": { "value": "4 / 5", "type": "string", "description": "Speaker, profile, headshot, portrait, and people-first cards" }, "verticalMedia": { "value": "9 / 16", "type": "string", "description": "Short-form video, story-style content, social/reel previews" }, "eventCard": { "value": "3 / 2", "type": "string", "description": "Default for event, article, venue, and editorial cards" }, "videoCard": { "value": "16 / 9", "type": "string", "description": "YouTube-style videos, recordings, recap videos, and cinematic media" }, "venueCard": { "value": "3 / 2", "type": "string", "description": "Polished editorial venue image cards" }, "resourceCard": { "value": "4 / 3", "type": "string", "description": "Resource or compact cards needing more height than 16:9 but less than vertical" }, "sponsorLogoCard": { "value": "fixed-height, 2 / 1, or 3 / 1", "type": "string", "description": "Logo-safe sponsor containers; avoid aggressive image crops" }, "bannerCard": { "value": "2 / 1", "type": "string", "description": "Wide featured cards, announcement strips, and hero-style cards" }, "featureStrip": { "value": "21 / 9", "type": "string", "description": "Extra-wide cinematic strips when a section explicitly needs a banner treatment" } }, "imageBehavior": { "width": { "value": "100%", "type": "dimension", "description": "Card images should fill their fixed aspect-ratio container" }, "objectFit": { "value": "cover", "type": "string", "description": "Default image fit inside card media containers" } }, "layout": { "cardDisplay": { "value": "flex", "type": "string", "description": "Cards should generally use flex layout" }, "cardDirection": { "value": "column", "type": "string", "description": "Use vertical card stacking by default" }, "cardHeight": { "value": "100%", "type": "dimension", "description": "Use h-full so cards align in grids" }, "bodyFlex": { "value": "1", "type": "number", "description": "Card bodies should flex to absorb uneven copy lengths" }, "actionMarginTop": { "value": "auto", "type": "string", "description": "Push actions to the bottom of the card" }, "actionPaddingTop": { "value": "1.25rem", "type": "dimension", "description": "Default padding above card actions" } }, "cta": { "mobileWidth": { "value": "100%", "type": "dimension", "description": "Card CTAs should be full-width on mobile" }, "desktopWidth": { "value": "auto", "type": "string", "description": "Card CTAs should be content-sized on desktop" }, "minHeight": { "value": "44px", "type": "dimension", "description": "Minimum tap target for card CTAs" }, "radius": { "value": "4px", "type": "dimension", "description": "Keep HTW rectangular button language; do not use pill CTAs by default" }, "highIntentActions": { "value": "Register, Get tickets, Apply, Submit event, Sponsor, Join", "type": "string", "description": "Use visible button treatment" }, "lowIntentActions": { "value": "View details, Learn more, Meet speaker, Read more, Watch recap", "type": "string", "description": "Use subtle text CTA or whole-card click where appropriate" } } }, "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" } } }, "testimonial-card": { "_description": "Reusable testimonial proof card. Quote is required; avatar, logo, name, title, and company are optional.", "container": { "aspectRatio": { "value": "5/4", "type": "string", "description": "Horizontal proof-card ratio, inverse of speaker cards" }, "width-mobile": { "value": "min(82vw, 320px)", "type": "dimension", "description": "Mobile/base card width" }, "width-desktop": { "value": "400px", "type": "dimension", "description": "Desktop fixed card width" }, "padding-mobile": { "value": "16px", "type": "dimension", "description": "Mobile/base card padding" }, "padding-desktop": { "value": "20px", "type": "dimension", "description": "Desktop card padding" }, "contentRows": { "value": "65% 35%", "type": "string", "description": "Quote / attribution split when attribution is present" }, "background": { "value": "#FFFFFF", "type": "color", "description": "Card background" }, "border": { "value": "#F1F5F9", "type": "color", "description": "Subtle card border/divider" }, "radius": { "value": "16px", "type": "dimension", "description": "rounded-2xl" } }, "quote": { "fontSize-mobile": { "value": "14px", "type": "dimension", "description": "Mobile/base quote text size" }, "fontSize-desktop": { "value": "16px", "type": "dimension", "description": "Desktop quote text size" }, "lineClamp-mobile": { "value": "none", "type": "string", "description": "Quote is clipped by the fixed 65% row if too long" }, "lineClamp-desktop": { "value": "none", "type": "string", "description": "Quote is clipped by the fixed 65% row if too long" } }, "identity": { "avatar-mobile": { "value": "36px", "type": "dimension", "description": "Mobile/base avatar size" }, "avatar-desktop": { "value": "40px", "type": "dimension", "description": "Desktop avatar size" }, "logoBox-mobile": { "value": "84px × 32px", "type": "dimension", "description": "Mobile/base fixed logo container" }, "logoBox-desktop": { "value": "104px × 36px", "type": "dimension", "description": "Desktop fixed logo container" }, "logoMax-mobile": { "value": "80px × 24px", "type": "dimension", "description": "Mobile/base logo max bounds" }, "logoMax-desktop": { "value": "100px × 28px", "type": "dimension", "description": "Desktop logo max bounds" } } } } }