# DF4 Labs — Brand Architecture
DF4 Labs is the **parent operating system**. FoxLitX, Repolize, House AI, and any future companies are sub-brands that inherit it.
This document is the doctrine. Sub-brand work that violates it is a bug, not a style choice.
---
## 0. The three hard rules
These three rules sit above everything else in this document. If a design decision conflicts with one of them, the rule wins.
1. **Product brands may express personality, but they may not invent their own layout language.** Domain vocabulary (FoxLitX terminal, Repolize graph, House AI room cards) is permitted. New grid systems, type scales, spacing rhythms, button shapes, or motion grammars are not.
2. **DF4 ownership must always be visible on product-company surfaces.** Header *and* footer minimum, on every page of every product site and product app, plus every OG card. Never hidden, never collapsed behind a menu, never "tasteful enough to skip."
3. **Motion must clarify state or hierarchy, never decorate emptiness.** Every animation in the system must answer "what changed?" or "what matters?" — page reveal, status pulse, route transition, ownership-mark hover. Decorative motion (orbs, blobs, drifting particles, gradient breathing) is forbidden across all surfaces.
---
## 1. The model
```
DF4 Labs (parent OS)
├── tokens, type, spacing, motion, component primitives, header/footer chrome
└── grants each sub-brand:
├── one accent colour
├── (optionally) a default mode — light / dark / warm
└── a domain vocabulary — terminal, graph, residential, etc.
DF4 Labs sub-brands
├── FoxLitX — developer / code surface, dark-mode first, terminal & diff vocab
├── Repolize — graph / repository analysis, light-mode first, blue accent
├── House AI — resident / home surface, warm-mode first, green accent
└── (future) — must inherit DF4 spacing, type, buttons, header/footer, motion, logo relationship
```
---
## 2. Inheritance contract
Sub-brands **inherit and may not redefine**:
- Type stack (`--font-display`, `--font-sans`, `--font-mono`) and weights
- Spacing scale (`--s-1` … `--s-11`)
- Radii (`--radius-*`)
- Shadow scale (`--shadow-*`)
- Button, input, pill, eyebrow primitives
- Motion curves and durations (`--ease-*`, `--dur-*`)
- Iconography vocabulary (Phosphor, monotone single weight)
- Page reveal motion grammar
- Header/footer structural rules (lockup placement, ticker behaviour, footer columns)
Sub-brands **may customise**:
- `--accent` (sub-brand accent colour, scoped via `[data-brand="…"]`)
- Default surface mode (light / dark / warm — set on the product surface root, not on ``)
- A single domain vocabulary layer (e.g. terminal panel for FoxLitX, graph view for Repolize, room cards for House AI)
Sub-brands **must never**:
- Introduce a second display typeface
- Redefine spacing or radii
- Use a gradient as accent, brand colour, or background
- Use the DF4 logomark as their own product mark
- Visually outrank DF4 in shared chrome (footer, OG card, ownership lockup)
- Ship without the ownership lockup on at least the footer and the favicon strip
---
## 3. Sub-brand accents
| Brand | Accent token | Hex | Why |
|----------|---------------------|----------|-----|
| DF4 Labs | `--accent-df4` | `#EC5B25` | Sovereign — orange is owned by the parent |
| FoxLitX | `--accent-foxlitx` | `#EC5B25` | **Inherits DF4 orange** — FoxLitX is the most DF4-native company, the lab's own builder tool. Sharing the accent reinforces that relationship. |
| Repolize | `--accent-repolize` | `#2563EB` | Graph/analysis blue — distinct from generic `--info` blue, slightly deeper |
| House AI | `--accent-houseai` | `#2F9E6B` | Residential green — calmer than `--success`, sits well on warm paper |
**Apply via scope, not on ``:**
```html
…
```
Never set `data-brand` on a DF4 parent (`data-mode="parent"`) page. `data-brand` belongs on the **same root element** as `data-mode` for that product — the app shell, the product page wrapper, or `` of a product surface. Never apply it to random child components. cards only.
---
## 4. Mode defaults per surface
| Surface | Default mode | Rationale |
|---|---|---|
| `df4.uk` (parent site) | **Light** | Institutional, calm, professional |
| FoxLitX product | **Dark** | Developer surface, terminal/diff context, lower fatigue at long sessions |
| FoxLitX marketing | Light | Sits inside `df4.uk` page conventions |
| Repolize product | Light | Graph visualisation reads better on white |
| Repolize marketing | Light | — |
| House AI product (in-home) | **Warm light** | Residential, sovereign, human. Warm-paper surface set is granted only to House AI. |
| House AI marketing | Warm light | Carries the residential atmosphere into the marketing surface |
Dark mode is a **deliberate product moment**, never the parent-site default. Warm mode is **House AI's privilege**, never used elsewhere in the system.
---
## 5. Logo & ownership lockup rules
These are non-negotiable. The lockup is how the system stays coherent across surfaces it doesn't directly control.
### 5.1 Parent site — `df4.uk`
- **DF4 logomark** (cube + arrow) is the primary mark.
- Header: logomark + "DF4 **Labs**" wordmark, top-left, link to `/`.
- Footer: full DF4 logomark + wordmark + tagline + sitemap.
- Product names appear as **secondary** entries in the products grid and in product cards. They never sit larger than the DF4 wordmark in shared chrome.
- OG card: DF4 logomark dominant, page-specific text below.
### 5.2 Product site / app — FoxLitX, Repolize, House AI
- **Product logo is primary.** Product wordmark is the largest brand element on the page.
- **DF4 ownership lockup is secondary, always present.** Use the `` component:
- Placement: top-right of header (small, ≤ 14px line-height) **and** in the footer (left column, alongside the product wordmark).
- Form: small DF4 cube glyph + label `A DF4 Labs company`.
- Click target: links to `df4.uk`.
- Product favicon may be the product mark; OG card must include the DF4 ownership lockup as a corner endorsement.
- **Never** display the DF4 logomark larger than the product mark on a product surface.
### 5.3 Shared footer (any DF4 surface)
DF4 ownership is **always visible** in the footer, regardless of which surface you're on. On a product surface, this looks like:
```
Repolize Built by DF4 Labs ↗
A DF4 Labs company Careers · Press · Contact
```
The `Built by DF4 Labs ↗` is a link back to `df4.uk`.
### 5.4 OG / social cards
- **Product surface OG** = product identity dominant + DF4 ownership lockup in a corner (bottom-right, 12% of card width).
- **Parent surface OG** = DF4 mark + page-specific text. No product brand outranks DF4.
- Never compose an OG card where a product mark and DF4 mark are the same size.
### 5.5 System docs (this design system)
In every example, swatch, lockup demo, and component card: **DF4 visually outranks the sub-brand**. If you're showing a sub-brand variant of a button, the swatch is labelled `Repolize · button` with the sub-brand label smaller than the system-side label. Sub-brand variants are presented as *configurations of the parent system*, not as peers.
---
## 6. Domain vocabularies
Each sub-brand owns one signature surface vocabulary. These are the only places sub-brand visual identity exceeds "parent system + accent swap":
- **FoxLitX** — terminal panel, diff pane, code blocks with monospace ligatures, file-tree column. Allowed: dark mode by default in the product; orange syntax tokens; mono-grid panel chrome.
- **Repolize** — graph canvas, dependency edges, node clusters, ownership heatmap. Allowed: blue edge colour; SVG-rendered graph surfaces; coordinate axes.
- **House AI** — room cards, schedule strips, energy dial, occupancy timeline. Allowed: warm-paper surface; rounded room tiles (12px radius); soft shadow elevation on residential cards.
A vocabulary belongs to one sub-brand. FoxLitX cannot show a graph canvas; Repolize cannot show a terminal pane. If a feature genuinely needs another sub-brand's vocabulary, that's a signal it belongs in the parent system.
---
## 7. Adding a new DF4 Labs company
When a new company joins the system:
1. Pick an accent colour. Must not collide with `--accent-df4`, `--accent-repolize`, `--accent-houseai`. Add it to `colors_and_type.css` as `--accent-` and a `[data-brand=""]` scope.
2. Pick a default mode (light / dark / warm). Warm is reserved for House AI unless explicitly granted.
3. Define the domain vocabulary in one paragraph. If it overlaps an existing sub-brand, stop.
4. Build the product ownership lockup variant (header and footer) before any other product UI.
5. Ship a product OG card with the DF4 endorsement before the marketing site goes live.
If any of these can't be done in a week, the company isn't ready for a sub-brand yet — use a `df4.uk/labs/` page instead.