Style Guide
ETI Brand System
Tokens, type, spacing, and interaction rules for a premium industrial B2B marketplace UI.
Color Tokens
Typography Scale
| Token | Size | Usage |
|---|---|---|
| text-4xl | 3rem | Hero h1 |
| text-3xl | 2.25rem | Section titles |
| text-2xl | 1.75rem | Card headers/prices |
| text-lg | 1.125rem | Lead body |
| text-md | 1rem | Body default |
| text-sm | 0.875rem | Meta/filter labels |
Display family: Barlow Condensed. Body family: Source Sans 3.
Spacing Scale
| Token | Value | Usage |
|---|---|---|
| space-2 | 0.5rem | Tight badge spacing |
| space-4 | 1rem | Card padding baseline |
| space-6 | 2rem | Panel breathing room |
| space-7 | 3rem | Section spacing |
| space-8 | 4rem | Hero/footer offsets |
Accessibility Rules
Primary CTA uses #EB1730 with white text.
Secondary CTA/link uses #09718F and darker hover state #065C73.
Borders use #99A0A5 at reduced opacity; focus states use red outline.
Tap targets and interactive elements maintain at least ~44px height.