Loading
Loading
The complete design token and component reference for the Veza Agency Network. Built with Tailwind CSS v4, Radix UI, and customized for the VAN brand identity.
The VAN color system is built around a neon cyan brand color with a deep dark foundation, sub-brand accents, and a full neutral scale.
Two font families form the VAN type system: Geist Sans for headings and body text, and Geist Mono for code, data, and badges. All sizes use fluid clamp() values for seamless scaling between mobile and desktop.
--font-heading / font-heading--font-body / font-body--font-mono / font-mono300Light - The quick brown fox jumps over the lazy dog400Regular - The quick brown fox jumps over the lazy dog500Medium - The quick brown fox jumps over the lazy dog600Semibold - The quick brown fox jumps over the lazy dog700Bold - The quick brown fox jumps over the lazy dogAll sizes use clamp() for fluid responsiveness. Values scale smoothly from mobile (320px) to desktop (1440px). Defined as CSS custom properties in globals.css @theme.
fluid-xs16px → 19.2pxfluid-sm19.2px → 22.4pxfluid-base22.4px → 25.6pxfluid-md25.6px → 28.8pxfluid-lg28.8px → 35.2pxfluid-xl28.8px → 35.2pxfluid-2xl32px → 44.8pxfluid-3xl38.4px → 57.6pxfluid-4xl51.2px → 70.4pxfluid-5xl64px → 83.2pxfluid-6xl70.4px → 102.4pxfluid-7xl89.6px → 153.6pxfluid-8xl102.4px → 192pxStandardized line heights across the site for visual consistency. Headings use tight values; body text uses relaxed spacing for readability.
1.1H1 headings (page heroes, main titles)1.15H2 headings (section titles, CTA headings)snug (1.375)H3 headings (card titles, subheadings)normal (1.5)Default text and UI elementsrelaxed (1.625)Body paragraphs, long-form contentH1font-heading font-semibold leading-[1.1]H2font-heading font-semibold leading-[1.15]H3font-heading font-semibold leading-snugBodyfont-body leading-relaxedLabelsfont-mono text-xs uppercase tracking-widerNavfont-body text-sm font-mediumtext-whiteBody: text-[#9AA4B2]Muted: text-[#9AA4B2]/60Accent: text-[#6EFFFF]text-[#0D121C]Body: text-[#364152]Muted: text-[#697586]Accent: text-[#0D121C]/70Border radius and section spacing tokens used across the design system.
sm0.2remDEFAULT0.4remsmall0.6remlg0.8remxl1.2rem2xl1.6rem3xl3remfull50rem10.25rem / 4px20.5rem / 8px30.75rem / 12px41rem / 16px51.25rem / 20px61.5rem / 24px82rem / 32px102.5rem / 40px123rem / 48px164rem / 64px205rem / 80px246rem / 96pxsection-paddingclamp(6.4rem, 6.4rem + 4.14vw, 11.2rem)section-padding-sm8rem / 128pxAll primitive UI components built with Radix UI, styled with Tailwind and VAN brand tokens.
Small status indicators, tags, and labels.
Container for grouped content with header, body, and footer.
This card demonstrates the default card layout with header, content, and footer sections.
Text input fields for forms and search.
Multi-line text input for longer content.
Toggle between two states.
Select one or more options.
Dropdown selection from a list of options.
A two-state button that can be on or off.
User profile image with fallback initials.
Contextual information on hover.
Visual divider between content sections.
Default orientation
Separators create clear visual boundaries.
Vertically collapsing content panels.
Tabbed content navigation for organized sections.
Your project is performing well with steady growth in all key metrics.
Modal overlay for focused interactions.
Loading indicator for async operations.