Internal Reference
Style Guide
Brand colors, typography, and UI components for Cumulus Vision.
Brand Palette
Colors
Primary
Blue
#256EFF — var(--blue)
Blue Dark
#03045E — var(--blue-dark)
Dark
#1C1917 — var(--dark)
White
#FFFFFF — var(--white)
Accent
Cyan
#43ABDA — var(--cyan)
Gold
#F9B310 — var(--gold)
Coral
#D95D39 — var(--coral)
Purple
#5C164E — var(--purple)
Neutrals
Gray 600
#57534e — var(--gray-600)
Gray 400
#a8a29e — var(--gray-400)
Gray 200
#E7E5E4 — var(--gray-200)
Gray 100
#FAFAFA — var(--gray-100)
Typography
Type Scale
H1 — clamp(2.5rem, 5.5vw, 3.75rem)
The quick brown fox
H2 — clamp(2rem, 4.5vw, 2.75rem)
The quick brown fox
H3 — clamp(1.375rem, 3vw, 1.75rem)
The quick brown fox
H4 — 1.25rem
The quick brown fox
Body — 1rem / 1.7 line-height
Cumulus Vision provides senior Salesforce engineering for complex environments. Custom development, integrations, and AI-enhanced delivery since 2012.
Eyebrow
About Cumulus Vision
Font family: Inter (400, 500, 600, 700, 800)
Components
Badges
Components
Cards
Default Card
Card with the default blue icon variant on a light background.
Cyan Variant
Card with the cyan icon variant for variety in grid layouts.
Coral Variant
Card with the coral icon variant for visual emphasis.
Cards on Dark
Dark Card
Cards automatically adapt on dark section backgrounds.
Gold Variant
Icon color variants also adapt for dark backgrounds.
Purple Variant
Purple icon with the dark section card treatment.
Tokens
Spacing & Layout
| Token | Value | Usage |
|---|---|---|
--max-w | 1200px | Container max width |
--max-w-narrow | 800px | Narrow container / prose |
--section-py | clamp(4rem, 8vw, 7rem) | Section vertical padding |
--section-px | clamp(1.25rem, 5vw, 2rem) | Container horizontal padding |
--radius | 8px | Buttons, inputs, small elements |
--radius-lg | 16px | Cards, images, large elements |