# DF4 Labs — Surface Compliance Checklist > Use this checklist before merging any new DF4 surface (page, route, product screen, app, slide deck, social asset, deck template). Every box must pass. If something here can't pass, the surface is not ready. A surface that fails any item below is **non-compliant** and must be fixed before shipping. --- ## 1. Fonts - [ ] **Display** is Manrope (or licensed equivalent: Geist / Söhne / Aeonik). Never Inter for headlines, never a serif for display. - [ ] **Body** is Inter Tight. Never plain Inter, never system-ui except as a fallback. - [ ] **Mono** is JetBrains Mono. Never Roboto Mono, never SF Mono on its own. - [ ] Self-hosted in production (see `fonts/README.md`). Google Fonts CDN is acceptable for previews and prototypes only. - [ ] All three families use `font-display: swap`. - [ ] Italic is loaded only if the page uses italic. ## 2. Colours - [ ] Page background is one of `--bg-0/1/2/3` (parent or product-light) or `--ink-900/800/700` (product-dev). Never an ad-hoc hex. - [ ] Text is one of `--fg-1/2/3` (or `--fg-inverse` on dark). Never a custom grey. - [ ] Brand orange (`--accent`) is used as a **flag**, not a fill: CTA, focus, status, link, kicker dot. Never as a background larger than a pill. - [ ] No gradients used as accents, brand colour, fill, or background. Anywhere. - [ ] Status colours come from `--success / --warning / --danger / --info`. Never raw Tailwind defaults. - [ ] Sub-brand accents (`--accent-foxlitx / -repolize / -houseai`) are scoped via `[data-brand="..."]` on the **same root** as the product's `data-mode`. Never on a DF4 parent page; never on random child components. ## 3. Mode - [ ] Parent surfaces (df4.uk, brand, research, studio) carry `data-mode="parent"` and are light-first institutional. - [ ] FoxLitX and other developer surfaces carry `data-mode="product-dev"` and are dark-first. - [ ] Repolize, House AI, and other product-light surfaces carry `data-mode="product-light"`. - [ ] No surface mixes modes. A surface is one mode end-to-end. ## 4. Logo - [ ] DF4 wordmark or cube glyph appears in the header of every parent and product surface. - [ ] On dark surfaces use `df4-logo-light.svg`. On light surfaces use `df4-logo-dark.svg`. Never the wrong variant. - [ ] The mark sits at a consistent baseline height with the navigation; never floats. - [ ] On product surfaces the **product** wordmark is dominant; the DF4 cube glyph appears as the ownership corner mark via `OwnershipLockup` / `OwnershipBar`. ## 5. Ownership - [ ] Every product-company surface (FoxLitX, Repolize, House AI) shows "A DF4 Labs company" in **both** the header *and* the footer (via `OwnershipLockup` and `OwnershipBar`). - [ ] Every product OG card carries the cube glyph + ownership line. - [ ] Every `ProductCompanyCard` carries the corner cube and the "A DF4 Labs company" rail. - [ ] Parent surfaces (df4.uk, studio.df4.uk) **do not** carry "A DF4 Labs company" — they *are* DF4. Use the wordmark instead. ## 6. Spacing - [ ] All spacing is one of `--s-1…--s-11`. No ad-hoc `px`, `rem`, or `em` outside the scale. - [ ] Section gutters are `--s-9` (96px) at desktop; never <64px on a marketing page. - [ ] Body line measure is roughly 65ch — never full-bleed paragraphs in marketing. ## 7. Radius - [ ] All radii reference `--radius-*` tokens. No raw `border-radius: 6px`. - [ ] Default surfaces use `--radius-md` (8px) or `--radius-lg` (12px). - [ ] Pills use `--radius-pill`. Square corners (`0` or `--radius-xs`) for rules and tables. - [ ] **No `rounded-2xl`-style 16px+ radii on cards.** That is the SaaS look DF4 explicitly rejects. ## 8. Buttons - [ ] Primary CTA: flat `--accent` background, white text, `--radius-md`, no shadow, no gradient. - [ ] Secondary: `--bg-0` with `--border-2` hairline. - [ ] Hover: colour shift only. **Never** scale, lift, glow, or shadow swell. - [ ] Press: colour darken to `--accent-pressed`. No scale-down. - [ ] Focus: `outline: var(--focus-ring)`. **Never** a coloured glow shadow. ## 9. Forms - [ ] Inputs: `--bg-0`, `--border-2`, `--radius-md`. Focus uses `var(--focus-ring)`. - [ ] Labels above inputs, mono small caption. Helper text below. Error in `--danger` with mono label. - [ ] No floating labels, no glassmorphic input wells. ## 10. Cards - [ ] Cards use 1px `--border-1` hairline, no shadow. - [ ] No dashed borders. Empty states use solid hairline. - [ ] No coloured icon tiles inside cards. No `bg-{colour}-500/10 rounded-2xl` patterns. - [ ] No floating shadow cards in normal flow. Shadows are reserved for floating chrome (modal, toast, dropdown). ## 11. Motion - [ ] All easing comes from `--ease` (one curve). - [ ] All durations come from `--t-instant / --t-quick / --t-base / --t-slow / --t-march`. - [ ] All translate distances are `var(--reveal)` (8px) or 0. - [ ] **No `transform: scale()` on hover.** Anywhere. - [ ] **No `transform: translate()` on hover.** Anywhere. - [ ] **No spring / overshoot easings.** No bounce. No parallax. - [ ] Only three sanctioned ambient loops: logomark arrow nudge, header ticker marquee, telemetry pulse dot. - [ ] `prefers-reduced-motion: reduce` has been tested and the page still tells the same story. ## 12. Assets - [ ] All logos and icons come from `assets/` — never inlined, never re-exported. - [ ] Icon set is Phosphor (regular weight only). No mixed-weight, no rainbow, no inside-coloured-tiles. - [ ] OG image is 1200×630 and matches `assets/brand/og-image.png` brand vocabulary. - [ ] No `.DS_Store`, `Thumbs.db`, raw camera files, or unoptimised PNGs committed. ## 13. Accessibility - [ ] Body text ≥ 4.5:1 contrast on its background. Display ≥ 3:1. - [ ] Focus visible on every interactive element via the system `--focus-ring`. - [ ] Hit targets ≥ 44×44px on touch surfaces. - [ ] All images have `alt`. Decorative SVGs have `aria-hidden`. - [ ] Headings nest correctly (`h1` → `h2` → `h3`). No styling-only headings. - [ ] Reduced-motion respected (see Motion). - [ ] Form errors are announced (mono label + role="alert"). ## 14. Route templates - [ ] If the surface is a public marketing page or a product landing, it composes from `routes/` and uses only `ui_kits/_system/*` modules — no bespoke layout invented in the page. - [ ] If a new layout is genuinely needed, it has been promoted to `ui_kits/_system/` first, with its own README entry, before being used in a route. - [ ] No copy-paste of CSS from another route into a new file. ## 15. Forbidden patterns The following are **never** acceptable on a DF4 surface, parent or product: - [ ] Gradient backgrounds, gradient text, `bg-clip-text` on accent. - [ ] Floating ambient orbs / blobs / particle fields. - [ ] Glass blur (`backdrop-filter: blur`) anywhere except the narrow mobile-nav-drawer exception. - [ ] Dot-grid or radial-dot decorative backgrounds. - [ ] Multi-colour Phosphor icons in coloured `rounded-2xl` tiles. - [ ] Dashed borders. - [ ] Coloured shadows / focus glow. - [ ] `hover:scale-*`, `hover:-translate-y-*`, `hover:shadow-xl`. - [ ] Bouncy springs, parallax, carousel auto-advance. - [ ] Emoji in product copy or marketing. - [ ] Title Case on buttons. ALL CAPS outside eyebrows / pills. - [ ] AI-marketing verbs: "leveraging", "next-gen", "AI-powered", "revolutionise", "supercharge". --- ## Sign-off A surface is ready to ship when every item above is checked **or** explicitly waived in writing with a justification. Waivers belong in the PR description, not in the code.