FlexIQ Design System
A comprehensive guide to FlexIQ’s design tokens, components, and patterns
Version 1.0 | Last Updated: February 2026
Table of Contents
Typography
FlexIQ uses Satoshi as the primary typeface with weights ranging from Regular (400) to Black (900).
Font Family
Satoshi Regular (400) – The quick brown fox jumps over the lazy dog
Satoshi Medium (500) – The quick brown fox jumps over the lazy dog
Satoshi Bold (700) – The quick brown fox jumps over the lazy dog
Satoshi Black (900) – The quick brown fox jumps over the lazy dog
Heading Styles
H1 – Hero Heading
H2 – Display Heading
H3 – Section Title
H4 – Subsection Header
H5 – Component Title
H6 – Small Heading
Body Text Sizes
Large Body Text – Perfect for introductions and emphasis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Base Body Text – Standard text for main content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small Body Text – Used for secondary information and captions. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Colors
FlexIQ’s color palette is built around natural greens, neutral grays, and semantic colors for UI states.
Primary Colors
#0c2212
Dark Green
#5fdf81
Bright Green
#b0eaa9
Light Green
Neutral Grays
Gray 900#000000Gray 800#171717Gray 500#444444Gray 300#737373Gray 200#d9d9d9Gray 50#f5f5f5White#ffffffSemantic Colors
#1ab682#ef3c33#f1ad2b#007aebAdditional Colors
#f1e4c4#f0fff4#efb3d9Spacing System
FlexIQ uses a base-8 spacing system for consistent rhythm and alignment.
Base-8 Scale
Lists
Standard and styled list examples showing typography and spacing.
Unordered List
- First list item
- Second list item with more content to show line wrapping behavior
- Third list item
- Fourth list item
Ordered List
- First step in the process
- Second step with detailed instructions
- Third step
- Final step
Components
Common UI components built with the FlexIQ design system.
Cards
Card Title
This is a standard card component with shadow and hover effects. Cards are perfect for grouping related content.
Another Card
Hover over cards to see the elevation effect. They lift slightly and cast a larger shadow.
Third Card
Cards maintain consistent spacing and typography throughout the design system.
Form Elements
Responsive Behavior
FlexIQ is mobile-first with breakpoints at 768px (tablet) and 1024px (desktop).
Breakpoints
💡 Resize your browser window to see responsive typography in action using fluid clamp() values
Responsive Typography
Font sizes scale fluidly using CSS clamp() for optimal readability across all devices. Headings adjust proportionally while maintaining hierarchy.
This heading scales responsively
Using the Design System
All design tokens are available as CSS custom properties. Reference them in your styles:
/* Using color tokens */
.my-element {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Using spacing */
.my-section {
padding: var(--spacing-6);
gap: var(--spacing-4);
}
/* Using typography */
.my-heading {
font-family: var(--font-primary);
font-size: var(--text-h3);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
}