Brand System
Brand System
One place to review the identity, open every finished deliverable, and hand the whole system to a developer. Start anywhere below.
Two live, conversion-focused pages built on the same brand — one warm and editorial, one dark and cinematic. Each has a Tweaks panel for adjusting colour, spacing, and photography treatment.
Warm, photography-led funnel for parenting and custody enquiries. Empathy-first messaging, "what judges look for", process timeline, floating reviews, sticky consultation CTA.
Open the pageCinematic, urgency-driven conversion page. Asymmetric pacing, edge-bleed photography, embedded case wins, CTA interrupts, and a glass intake form over full-bleed imagery.
Open the pageThe art-direction rationale behind both pages — palettes, type specs, component snippets, photography direction, and live previews side by side.
Open the case studyBoth landing pages bundled with their CSS, fonts, and logos into one file each — open by double-clicking, email them, or host anywhere. No project needed.
Three brand colours, two typefaces, and a 4px spacing scale — all defined as CSS variables in one file that every page in this system imports.
Blue anchors. Orange is a spotlight, never a surface.
Bebas Neue is the megaphone. Poppins does the work.
15 slides: overview, logo usage, colour, type, components, layout, photography, iconography, applications, mockups. Exports to PDF or PowerPoint.
Open the deckClickable recreation of the main site — header, hero, practice cards, attorney bios, forms, modals, footer. The component library for anything new.
Open the kit
Primary, secondary, single-ink, icon and Spanish lockups, plus Raleigh's Best awards and all seven affiliation marks. SVG and PNG in assets/.
Production-sized creative for both practices, built from the same tokens as the landing pages.
Standard IAB sizes for DWI and Family Law — leaderboard, medium rectangle, half-page, skyscraper, mobile banner and square.
Open the adsEditable post templates for both practices, with drop-in image slots and tweakable colour and copy.
Open the templatesEvery social template on one page for quick review and approval before export.
Open the contact sheetThe written half of the system — how the brand sounds, how it looks, and how to build with it.
README README.md
Company context, content fundamentals (voice, tone, casing, real copy examples), visual foundations, and iconography rules.
Design tokens colors_and_type.css
Every colour, type role, spacing step, radius, shadow and motion value as a CSS variable, plus the packaged @font-face declarations.
Skill manifest SKILL.md
Makes this folder usable as a portable skill — download the project and an AI agent can design on-brand from it directly.
Click through the pages above, or open the Design System tab in this project to browse every colour, type and component card individually.
The standalone single-file exports open offline with no dependencies — email them or host them anywhere. The brand guide also exports to PDF and PowerPoint.
Download the project as a zip. Link colors_and_type.css, pull marks from assets/, and use the UI kit components as the starting point.