VaiQuest Style Guide

Design tokens, components, and patterns used across the VaiQuest site.

Brand Colors

These colors define the VaiQuest visual identity. Use them for backgrounds, text, and accents.

Charcoal – #0F172A – Primary Text & Headings

Slate – #334155 – Secondary UI text

Mist – #F8FAFC – Backgrounds

Antique Gold – #C6A45A – Accents & highlights

Typography

These text styles create a consistent hierarchy across the VaiQuest website.

H1 – Primary Page Heading

H2 – Section Heading

H3 – Subsection Heading

Body Text – Used for regular content and descriptive text across the site.

Small Text – For captions, footnotes, and disclaimers.

Buttons & CTAs

Use these button styles to ensure consistency in calls to action across the VaiQuest site.

Primary Button

Discover Insights

Secondary Button

See How It Works

Layout & Spacing

These layout utilities define consistent page rhythm and alignment for all VaiQuest sections.

Container (max 1200px, 5vw padding)

This ensures consistent width and side padding across all sections.

Spacing Scale

4px

8px

16px

24px

32px

2xl

48px

3xl

64px

Radii & Elevation

These examples show the standard corner rounding and shadow levels used across VaiQuest components.

--r-sm (8px)

--r-md (12px)

--r-lg (16px)

--elev-1 (shadow)

--2 (medium shadow)

Form Styles

These components define consistent styling for all forms across the VaiQuest site.
Use these base styles for all contact, sign-up, and newsletter forms across the site.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.