
Preview image. Unlock full-res
Marketing billboard meets data dashboard. Bold headlines and vibrant accents punctuate a clean, analytical canvas.
This design system projects a direct and dynamic brand presence, blending professional typographic rigor with an energetic, multi-hued accent palette. The contrast of an authoritative, custom serif paired with a clean sans-serif creates a distinct voice. A core Jasper Indigo (#00063d) dominates text, while Jasper Flame (#fa4028) acts as a high-energy call-to-action color, injecting urgency and vibrancy. The minimal use of rounded corners and strong visual separation of elements underscore a no-nonsense, results-oriented aesthetic.
Use Feature font with Jasper Indigo (#00063d) for all primary headlines to establish an authoritative tone.
Apply Jasper Flame (#FA4028) exclusively for primary call-to-action buttons to ensure maximum visual urgency.
Maintain 0px border-radius across all components unless explicitly defined as 4px for badges, reinforcing a sharp, precise aesthetic.
Employ 12px as the base horizontal padding for card-like elements, creating consistent internal spacing.
Utilize Smoke Gray (#F9F9F9) for subtle content separation, such as card backgrounds, to maintain visual lightness.
Implement the -0.0100em letter-spacing for ABC ROM body copy at all sizes, contributing to a controlled, dense text appearance.
Do not introduce rounded corners on primary elements like buttons or cards; maintain the 0px border-radius for brand consistency.
Avoid using System Red (#FA7560) or System Green (#103A00) for general interactive elements; reserve them for semantic feedback like error or success.
Do not use box-shadows on cards or UI elements; rely on background color changes for perceived depth.
Do not deviate from the Feature font's specific letter-spacing values for headlines; these are critical for its distinctive look.
Avoid arbitrary color accents; restrict accent colors to the defined palette of Highlight Blue, Pink, and Yellow within illustrations or specific features.
Do not add extra padding to navigation links beyond their natural content box; they should appear lean and integrated.









