Constant
Type, geometry, icon language, density and interaction.
B2B Books / family system
Four voices, one operating system.
A warm editorial layer meets a calm product interface. Each product remains recognisable by colour; everything else is a shared, precise, usable foundation.
01 / Family principles
One system, deliberately expressed.
Variable
Product colour, content, data and internal mark gesture.
Test
Would this still feel related in grayscale? If yes, it belongs.
02 / Universal type & iconography
Editorial warmth. Functional restraint.
Newsreader
Display, insight statements and report titles.
Geist
Navigation, UI, forms, tables and body copy.
Geist Mono
Metrics, dates, metadata and technical detail.
Phosphor interface icons / regularLucide is reserved for product marks
03 / Product colour architecture
Four products. Four tonal systems.
Each product owns one hue, expressed through a five-step tonal ramp. Components, typography, shape language and information hierarchy remain shared.
growthbooks
Growth intelligence
GrowthBooks
Product colour#3498DB
productbooks
Product intelligence
ProductBooks
Product colour#9B59B6
peoplebooks
People intelligence
PeopleBooks
Product colour#1ABC9C
profitbooks
Profit intelligence
ProfitBooks
Product colour#F39C12
| Semantic role | Shared token | Use |
|---|---|---|
| Primary | --product-primary | Key actions, selected state, emphasis |
| Hover | --product-primary-hover | Darker step in the product tonal ramp |
| Subtle | --product-primary-subtle | Lightest step in the product tonal ramp |
| Accent | --product-accent | Lighter step in the product tonal ramp |
| Ring | --product-ring | Central product primary |
Static button specimens use the accessible deep tone from each product ramp.
StaticGrowthBooks
ProductBooks
PeopleBooks
ProfitBooks
04 / Shared components
Static specimensStructure stays still. Colour carries the product.
Signals
| Signal | Owner | Status |
|---|---|---|
| Expansion account | AK | Review |
| Margin variance | LS | Resolved |
One interaction language
The same buttons, controls, card geometry, density, borders and focus states appear in every product. Product colour only enters where meaning benefits from it.
6–8px radiusFine bordersCalm motion
05 / System playground
Explore one system through four products.
Switch the product to inspect the exact tokens, controls and layouts that should change—while the underlying interface stays consistent.
Template gallery
A shared page architecture in product context.
GrowthBooks
Operating signal
48,204
Hover for values
Priority
Review expansion accounts
Open queue →Regional performanceUpdated now
06 / System registry
Designed once. Governed deliberately.
The design system is versioned source code, documented contracts and shared templates—not a collection of screenshots.
System changes require cross-product visual review, keyboard and contrast checks, reduced-motion verification, and a changelog entry.