Design System · Phase 01
Brand architecture.
DF4 Labs is the parent operating system. Every product company — FoxLitX, Repolize, House AI — inherits its tokens, type, motion, and chrome rules. Sub-brands customise an accent and (sometimes) a surface mode. Nothing more.
The model
Parent owns the system. Sub-brands occupy a controlled slot inside it.
DF4 Labs parent
FoxLitX sub
Repolize sub
Accent
Default mode
Light (institutional)
Dark (developer surface)
Light (graph reads on white)
Vocabulary
Lab chrome · ticker · telemetry
Terminal · diff pane · file tree
Graph canvas · nodes · edges
Inherits
— (defines)
Type, spacing, radii, motion, buttons
Type, spacing, radii, motion, buttons
May customise
—
Accent (already inherited), default mode, terminal vocab
Accent, graph vocab
Must never
—
Use a 2nd display typeface, gradient accents, redefine spacing
Use House AI's warm paper, scale-on-hover, rainbow icons
House AI extends the same row with green accent, warm-paper surface, and a residential vocabulary — shown in surface samples below.
The same primitive in four surfaces
One section header, one button, one bullet — rendered through each brand scope. Inheritance is visible.
DF4 LabsLight
Parent · institutional
Where research becomes deployment.
Read manifesto →
FoxLitXDark
Sub-brand · terminal
Diff every change. Across every service.
Generate PR →
RepolizeLight
Sub-brand · graph
See your codebase as a graph, not a tree.
Open canvas →
House AIWarm
Sub-brand · residential
A home that learns. Quietly.
See your home →
Ownership lockup
Every product surface carries the DF4 endorsement. The product mark is primary, the lockup is secondary, but the lockup is always present. DF4 visually outranks the sub-brand in shared chrome.
FoxLitX · product header (light marketing)
FoxLitX · product app (dark)
House AI · resident dashboard (warm)
Ownership strip — product footer
Repolize
·
Built by DF4 Labs ↗
The five lockup rules
- Parent site (df4.uk): DF4 Labs mark is primary. Product names are secondary entries in grids and cards.
- Product site / app: Product logo is primary.
A DF4 Labs company is secondary, always present in header AND footer.
- Shared footer (any surface): DF4 ownership is always visible, with
Built by DF4 Labs ↗ linking back to df4.uk.
- OG / social cards: On product OG, product identity dominates with DF4 endorsement in a corner (~12% of card width). Never the same size.
- System docs: DF4 visually outranks the sub-brand in every example, swatch, and lockup demo. Sub-brand variants are configurations of the parent system, not peers.
Read the full doctrine →