---
name: df4-design
description: Use this skill to design and build well-branded interfaces and assets for DF4 Labs — the parent applied-AI lab and its three product companies (FoxLitX, Repolize, House AI). Includes the canonical design system, type, colour, motion, ownership rules, and ready-to-use route templates and system modules.
user-invocable: true
---
# DF4 Labs — design skill
This skill turns this folder into a portable design system. Read this in order; everything below assumes you are working in a project where this folder is available.
## 1 — Read first
1. `README.md` — the system index, content fundamentals, visual foundations.
2. `brand_architecture.md` — parent vs product-company relationship and how it shows up.
3. `motion.md` — the motion doctrine. Read this before animating anything.
4. `compliance.md` — the surface compliance checklist. Run it on whatever you ship.
When in doubt, the markdown files are the doctrine. The CSS / JSX is the implementation.
## 2 — Use system modules first
Before inventing anything, check `ui_kits/_system/`. The canonical modules are:
- `HeaderTicker` — operational ticker bar, sits above any product surface header.
- `OwnershipLockup` — "A DF4 Labs company" inline lockup. Header use.
- `OwnershipBar` — full-width footer ownership strip. Footer use, every product surface.
- `SectionHeader` — the canonical kicker + h2 + lede pattern.
- `TelemetryPane` — ambient operational pane (one of three sanctioned ambient surfaces).
- `RouteHero` — the canonical hero composition (telemetry / prose / ledger variants).
- `ProductCompanyCard` — the card for a sub-brand company.
- `ResearchIndexBlock` — the Field Notes / research index list.
- `DataTable` — ledger / status table with mono numerics and tabular numbers.
- `LegalDocument` — long-form legal scaffold.
- `EmptyState` — solid-hairline empty-state surface (NEVER dashed).
For full pages, look at `routes/`:
- `routes/01-product-landing.html` — product company landing.
- `routes/02-research-index.html` — Field Notes index.
- `routes/03-legal-terms.html` — legal document.
- `routes/04-status.html` — operations / status page.
When you need a new public page, **copy the closest route, swap content, ship**. Do not invent layouts.
## 3 — Mode and brand
Every root must declare its mode and (if a product) its brand:
| Surface | Attributes |
|----------------------------|-------------------------------------------------------------|
| df4.uk, brand pages | `data-mode="parent"` |
| studio.df4.uk | `data-mode="parent"` |
| FoxLitX (product) | `data-mode="product-dev" data-brand="foxlitx"` |
| Repolize (product) | `data-mode="product-light" data-brand="repolize"` |
| House AI (product) | `data-mode="product-light" data-brand="houseai"` |
**Parent surfaces are light-first institutional.** Dark-first is reserved primarily for FoxLitX and other developer surfaces. `data-brand` belongs on the **same root element** as `data-mode` for a product surface (it may be `` of that product, or its app-shell wrapper). Never apply `data-brand` on a DF4 parent page; never on random child components.
## 4 — Keep the logo
The DF4 logo (`assets/logo/`) is non-negotiable.
- Light variant on dark backgrounds.
- Dark variant on light backgrounds.
- The cube-arrow mark is the abstracted single-glyph form, used in lockups and corner ownership marks.
- The animated variant is for hero / load only — it never loops in normal flow.
- **Do not redraw the logo.** Always reference the file from `assets/logo/`.
## 5 — Add ownership lockups
Every product-company surface must declare ownership in two places:
1. **Header**: `` (compact) sits next to or under the product wordmark.
2. **Footer**: `` (or the product name) is the last thing on the page.
OG images, social cards, and PDF templates also carry the cube glyph + ownership line. Parent surfaces (df4.uk, studio.df4.uk) **must not** carry "A DF4 Labs company" — they *are* DF4.
## 6 — Forbidden patterns
These are non-negotiable. They are listed in full in `compliance.md` § 15. Highlights:
- No gradients, gradient text, blob fields, particle fields, glass blur, dot-grid backgrounds.
- No multi-colour Phosphor icons in coloured rounded-2xl tiles.
- No `hover:scale`, `hover:translate`, hover shadow swell, spring / overshoot easings, parallax.
- No coloured shadow, no focus glow. Focus is a 2px solid outline (`var(--focus-ring)`).
- No dashed borders.
- No emoji in product copy. No Title Case on buttons. No "AI-powered / next-gen / leveraging".
When tempted to add one of these because "the design looks empty", the answer is to add hierarchy or content, not decoration.
## 7 — Motion
`motion.css` is the source of truth. Every animation must:
- Use the single sanctioned curve `var(--ease)`.
- Use one of the five timing tokens `--t-instant / --t-quick / --t-base / --t-slow / --t-march`.
- Use the single reveal distance `var(--reveal)` (8px) or 0.
- Pass the `prefers-reduced-motion: reduce` test — information must remain.
Only three sanctioned ambient loops exist: logomark arrow nudge, header ticker marquee, telemetry pulse dot. Anything else that loops forever is decoration and must be removed.
## 8 — When you ship
Run `compliance.md` (or `compliance.html`) end-to-end on whatever you built. If a checkbox can't pass, fix it or write a justified waiver in the PR.
## 9 — Working modes
- **Throwaway prototype / mock / slide deck** — copy what you need from `assets/` and `ui_kits/` into a new HTML file. Use the Google Fonts CDN `@import` already in `colors_and_type.css`. Compliance still applies.
- **Production code** — import `colors_and_type.css` and `motion.css` once at the app root. Self-host the fonts (`fonts/README.md`). Use system modules; do not duplicate CSS into components.
- **Marketing page** — always start from the closest route in `routes/`. Do not start from blank HTML.
If the user invokes this skill without specifics, ask: which mode (parent / product-dev / product-light), which brand (DF4 / FoxLitX / Repolize / House AI), and whether the output is a throwaway artifact or production code. Then act as an expert designer.