Design System Documentation

Infinite Cloud IT — Complete reference for design tokens, components, and usage guidelines.

Color Tokens

16 new core color tokens created via API, supplemented by 18 legacy tokens (34 total ColorStyleTokenNodes). All tokens exposed as CSS variables accessible project-wide.

Typography Presets

14 new TextStylePresetNodes created via API (4 heading + 5 body + 5 UI presets), supplemented by 157 pre-existing presets (171 total). All use Inter font (Google Fonts: Inter:wght@400;600). Only two weights: 400 for body text, 600 for headings.

Reusable Components

Five key component types defined, referenced by design tokens, with full variant/breakpoint coverage:

Primary CTA Button (QE268HUon)

Variants: Default (x3), Loading, Disabled, Success, Error. References color tokens for fill, text, and hover states. Uses var(--token-…) fills.

Secondary CTA Button (UwgvqCmtN)

Variants: Default (x3), Loading, Disabled, Success, Error. Uses tokenized stroke and fill for outline style. Hover gesture variants.

Section Header (UWWf4QDgV / fao729qvJ)

Controls: eyebrow, heading, subheading. Breakpoints: Desktop, Tablet, Mobile. Used 24+ times across the site. Alt variant (fao729qvJ) for alternate styling.

MainNav (kuG9gzsNS)

Variants: Desktop, Tablet, Tablet Open, Phone, Phone Open. Hamburger/menu toggle with drawer. Navigation items reference page paths.

ResourceCard (DwnrPRCFF)

Breakpoints: Desktop, Tablet, Phone. Used for CMS blog/resource cards. Image + title + description + category chip layout.