King David Kalakaua (1836-1891), known as the "Merrie Monarch," was Hawaii's last king and a champion of Hawaiian culture, arts, and modernization. His royal standard featured the colors of Hawaiian royalty:
By anchoring HTW's brand in these royal colors, we honor Hawaii's heritage while symbolizing the innovation and forward-thinking spirit that defined Kalakaua's reign — the perfect metaphor for "Where Tech Meets Hawaii."
Core brand palette built on Hawaiian heritage. HTW Navy is THE primary (matches logo). The four secondaries each play distinct roles.
Each status has a Dark variant (solid, for icons and borders) and a Light variant (tinted background for banners and toasts).
In use — status banners combine Light background + Dark border/text:
Three accent families, each with a light-mode and dark-mode variant shown side by side. Coral is the same in both modes.
Event category badge colors for the Calendar page, derived from HTW tokens.
Backgrounds, surfaces, text, and borders for both light and dark modes.
The signature hero overlay gradient. Starts with Royal Navy and blends through intermediate blue tones to a transparent fade.
Brand colors (use independently): The 4 royal heritage colors (Navy, Gold, Red, Green) + Neon Cyan.
Gradient-only colors: #0052A3, #5B9FD8, #93C5FD only exist as intermediate stops in Ocean Sunrise. Do not use them as standalone brand colors.
Ocean Sunrise gradient with Royal Gold CTA button in hero context.
Join 3,000+ people across 50+ events at 25 venues, from panels and fireside chats to mixers and product launches.
Get UpdatesGradient opacity can be adjusted per use case when overlaying photos or video.
HTW uses Inter for all text. Typography utilities are defined in globals.css for consistency across all pages.
This is the standard body text used for all paragraph content across the website. It provides excellent readability on all devices with responsive sizing.
Small body text used for captions, metadata, and fine print. Still maintains good readability while being more compact.
Section intro text appears directly below H2 headings to provide additional context. Slightly larger than body text for emphasis.
Extra large section intro for "pop" sections that need extra prominence, like the homepage About section.
"This style is used for testimonials and pull quotes. The italic styling differentiates it from regular body text."
Consistent spacing ensures visual rhythm and hierarchy. All values are standardized for mobile and desktop.
Visual preview of the reusable speaker card system driven by `components.speaker-card` tokens.
Elevation system using box shadows to create visual hierarchy and depth. Use sparingly for best effect.
Consistent corner radii for buttons, cards, and containers.
Smooth, performant transitions that enhance UX without overwhelming. All animations respect prefers-reduced-motion.
Responsive breakpoints matching Tailwind's default system. Mobile-first approach.
Standardized z-index values to manage layering and avoid conflicts.
Authoritative snapshot from docs/design-tokens.json. This section is intended for exact human review of the same token data used as LLM reference.