Brand Guidelines.
Design system reference.
A living reference for our visual language — typography, color, spacing, and components rendered with the actual code they describe.
The GrowthX wordmark
Quick Downloads
Do
- Use on paper (#F1EEE9) or dark (#111) backgrounds
- Maintain clear space equal to logo height
- Use the SVG source for all digital applications
Don't
- Stretch, rotate, or apply effects
- Place on busy or low-contrast backgrounds
- Alter proportions or spacing
Brand palette
Typefaces & scale
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
You held the balance of the time
This place is so inviting, you can take me in
We had time against us and miles between us
I feel the waves come in, I feel them crash around me
I watched a change in you, it's like you never had wings
I'll come flooding through your veins and leave no trace
Set it off like napalm with the way you hold
When the sun comes crashing in, it all falls down
And if I had the sense to realize what I had
Tonight I feel like more
The stars will fall for us
Winding down the hours
I feel the water rising, I feel the waves come in. This place is so inviting — you can take me in.
Spacing & grid
col-[2/span_16] tablet:col-[3/span_18] desktop:col-[3/span_26]col-[2/span_16] tablet:col-[3/span_18] desktop:col-[6/span_20]col-[2/span_16] tablet:col-[3/span_18] desktop:col-[8/span_16]Interactive elements
Section title goes here
Optional subtitle with muted color
Layout conventions
Section dividers use border-t border-border — a 1px line in #B3B3B3.
Cards use border border-border rounded-lg with optional bg-card fill.
Buttons use rounded-[60px] for a full pill shape.
Components auto-adapt via CSS variable overrides on data-nav-theme="dark"
Photography & video
Resource pages (/learn, /tools, /guides) use AI-generated abstract compositions as hero images. Warm tones, glass-like refractions, organic forms. Always cropped to 4:3 or 16:9.
Blog hero images. Clean editorial style matched to article content. 16:9 aspect ratio with rounded-lg corners.
- Warm, natural lighting — avoid harsh flash or overly saturated color
- Video backgrounds should be dark (#111) for maximum contrast
- Use Next.js Image component with remote patterns for Strapi assets
- Apply
rounded-lgto all media containers
Design tokens
Colors
Typography
Spacing
Border Radius
Shadows