Menu
Brand
guidelines
How to build GrowthX.
The shared visual language for building clear, consistent GrowthX experiences.
Logo
Use the dark mark on light surfaces and the light mark on dark surfaces. Keep the artwork proportional and preserve clear space around it.
Colors and gradients
The neutral ramp provides structure and hierarchy. Purple, warm, and green families supply brand expression. Click a swatch to copy its hex value.
Purple–pink
--background-image-purple-pinkRed–yellow
--background-image-red-yellowGreen–lime
--background-image-green-limeBackground blur: 25px in Figma, mapped to --blur-background in CSS.
Typography
Roc Grotesk carries headings and wide display styles. Figtree carries body copy and metadata. Use the composite type utilities rather than rebuilding font properties.
Growth in action
Build the system
A connected growth system
Context compounds
Strategic control
Clear thinking, practical execution, and a system that improves every week.
Designed for concise labels and supporting copy.
Spacing
Spacing follows the approved four-pixel foundation, with the additional ten-pixel step used by the design system.
--space-0--space-4--space-8--space-10--space-12--space-16--space-20--space-24--space-32--space-40--space-48--space-64--space-80--space-120Radii
Use the named radius steps for surfaces and controls. The 100px value is the pill radius.
0px
--radius-04px
--radius-48px
--radius-812px
--radius-1216px
--radius-1620px
--radius-2024px
--radius-2432px
--radius-3240px
--radius-4048px
--radius-48100px
--radius-pillGrid
Use the responsive columns, gutters, and page margins to keep content consistently aligned across mobile, tablet, and desktop layouts.
Desktop L · 1440+
12 columns · 24px gutter · 48px margin
Fixed at 1440px; navigation and footer may stretch.
Desktop · 1200–1439
12 columns · 24px gutter · 48px margin
Stretch.
Tablet · 820–1199
8 columns · 20px gutter · 24px margin
Stretch.
Mobile · up to 819
4 columns · 16px gutter · 16px margin
Stretch.