BF CREATIVE / DESIGN SYSTEM
TEMPLATE / ACTIVE PAGE SHELL
CONTENT SLOT / PAGE-SPECIFIC SECTIONS
FOUNDATIONS / ACTIVE STYLES
Semantic color roles, typography presets, reusable components and shared page patterns for the active BF Creative routes.
COLOR ROLES
BLIUE / ACCENT
PRIMARY / INK
SECONDARY / MUTED
INVERSE / CANVAS
TYPOGRAPHY ROLES
DISPLAY / GEIST 600
SECTION / GEIST 600
BODY / GEIST 500 — Designed for readable supporting copy and descriptions.
META / MARTIAN MONO 400 / UPPERCASE
NAVIGATION / MARTIAN MONO 600 / UPPERCASE
PATTERNS / SECTION RECIPES
01 / HERO
Display statement, supporting body copy, utility cue.
02 / WORK GRID
CMS-driven project cards, consistent metadata and image rhythm.
03 / CONTACT
Section label, form block, action link and project image strip.
RESPONSIVE RULES
Desktop 1440 / Laptop 1280 / Tablet 810 / Phone 390. Preserve the same semantic roles while allowing stack direction, image rhythm, and section spacing to adapt at each breakpoint.
CONTROLLED COMPONENTS / Navigation: variant, status, mobile status. Project Card: variant, image, title, link. CTA + Footer: variant. Button: variant.