Surface compliance
checklist.

Every box on this page must pass before any DF4 surface ships — a marketing page, a product screen, a deck template, an OG card, anything that carries the brand. Items that can't pass need an explicit written waiver in the PR.

01Fonts

• Display is Manrope (or licensed equivalent). 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.
• Self-hosted in production (see fonts/README.md). Google Fonts CDN for previews only.
• All three families use font-display: swap.

02Colours

• Page background is one of --bg-0/1/2/3 or --ink-900/800/700. Never an ad-hoc hex.
• Text is one of --fg-1/2/3 or --fg-inverse.
• Orange is a flag, not a fill. CTA, focus, status, link, kicker dot — never a background larger than a pill.
• No gradients. Anywhere.
• Status uses --success / --warning / --danger / --info.

03Mode

• Parent surfaces carry data-mode="parent" (light-first institutional).
• FoxLitX / dev surfaces carry data-mode="product-dev" (dark-first).
• Repolize / House AI carry data-mode="product-light".
• No surface mixes modes.

04Logo & ownership

• DF4 wordmark or cube glyph in the header of every surface.
• Correct logo variant for the mode (light-on-dark, dark-on-light).
• Every product surface shows "A DF4 Labs company" in both header and footer.
• Parent surfaces never carry "A DF4 Labs company" — they are DF4.
• OwnershipLockup in product headers; OwnershipBar in product footers.

05Spacing & radius

• All spacing references --s-1…--s-11.
• All radii reference --radius-*. No raw border-radius: 6px.
• No rounded-2xl-style 16px+ radii on cards.

06Buttons, forms, cards

• Primary: flat --accent, white text, --radius-md. No shadow, no gradient.
• Hover is colour shift only — never scale, lift, glow.
• Focus uses var(--focus-ring). Never a glow shadow.
• Cards: 1px --border-1, no shadow, no dashed border.
• No coloured icon tiles, no bg-{colour}-500/10 rounded-2xl.

07Motion

• Easing from --ease. Durations from --t-instant…--t-march.
• All translate distances are var(--reveal) or 0.
• No transform: scale() or translate() on hover.
• No spring, no parallax, no carousel auto-advance.
• Reduced-motion has been tested.

08Assets & accessibility

• Logos and icons come from assets/. Never inlined.
• Phosphor regular weight only.
• OG image 1200×630, matches brand vocabulary.
• No .DS_Store or unoptimised PNGs.
• Body text ≥ 4.5:1 contrast. Focus visible. Hit targets ≥ 44×44 on touch.
• Headings nest correctly. All images have alt.

09Routes

• Public marketing / product landings compose from routes/ using only ui_kits/_system/* modules.
• Any genuinely new layout is promoted to ui_kits/_system/ with a README entry before use.

10Forbidden patterns

• Gradient backgrounds or gradient text.
• Floating orbs, blobs, particle fields.
• Glass blur, dot-grid backgrounds.
• Multi-colour Phosphor icons in coloured 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.
• AI marketing verbs: "leveraging", "next-gen", "AI-powered", "supercharge".