This page documents the Majestic brand as rendered by the production design system. All typography, color tokens, and layout behavior shown here use the same Tailwind variants and CSS custom properties used across the live Majestic site.
Majestic uses a deep blue primary color, with cool supporting tints for secondary surfaces and accents.
Primary Brand
Primary brand color for accents, separators, and emphasis
--brand
Brand Tint (25%)
Supporting tint used for backgrounds and subtle accents
--brand25
Heading Font
Merriweather (serif)
Used for headings and titles
Primary Font
Open Sans (sans-serif)
Used for body text, UI, and general content
Fallback Stack
system-ui, sans-serif
Used when primary font is unavailable
Heading Style
The quick brown fox jumps over the lazy dog
Body Style
The quick brown fox jumps over the lazy dog
Each text style reflects its responsiveness across breakpoints.
breakpoint → font size / line-height / tracking
Primary Button
Secondary Button
Outline Button
Mobile Button