Create a beautiful brand guide for "Inspira — Water™ Platform". Single scrollable page, no navigation or menus. Use Inter font. Colors: Deep Navy #1B2A4A, Electric Blue #2D7FF9, White #FFFFFF, Soft Gray #F4F5F7, Slate Gray #6B7B8D, Bright Teal #00C9A7.
Sections: Cover (navy hero), 01 Brand Overview (company description, vision, 5 core value cards), 02 Color Palette (large 120px swatches with hex codes), 03 Typography (rendered text samples in Inter Bold, Inter Regular, DM Sans), 04 Brand Voice (personality badges, green/red voice examples), 05 Key Messaging (4 pillar cards, taglines, audience-specific messages, elevator pitch), 06 Target Audiences (persona cards, demographics, pain points), 07 Do's and Don'ts (two-column green checks/red X's), 08 Imagery Style (photography guidelines). Footer: "Inspira — Brand Guide — February 2026 — Confidential". Premium brand book aesthetic with generous white space and large faded section numbers.
Now let me build the full brand guide page:
Now I'll update the globals, layout, and build all the brand guide components:
Now let me update globals.css to include the font variables:
Now let me build all the component files and the main page:
Now let's write the main page:
Now let me verify the globals.css has the right theme colors set:
Everything looks great. The brand guide is complete with all 8 sections plus the cover and footer across 10 dedicated component files. Here's what was built:
Cover — Full-screen Deep Navy hero with the Inspira Water™ logo mark, massive display typography, faded "IW" watermark, and a confidentiality footer bar.
01 Brand Overview — Split company description + navy vision card with blockquote, plus 5 core value cards with alternating blue/teal accent underlines.
02 Color Palette — Six 120px tall swatches with role tags, followed by a full hex/RGB/CMYK reference table and four approved color pairing demos.
03 Typography — Inter & DM Sans family cards with weight specimens, a full type scale from Display/900 down to UI labels, and a dark alphabet showcase panel.
04 Brand Voice — 8 personality badges, 4 tone-by-context cards, and 6 paired do/don't voice examples with green/red treatment.
05 Key Messaging — Four message pillar cards, stacked taglines (primary highlighted in navy), 3 audience-specific message cards, and a dark elevator pitch block with stats.
06 Target Audiences — Three detailed persona cards (Marcus, Priya, Dr. Aisha) with demographics, goals, and pain points on coloured headers.
07 Do's & Don'ts — Three categories (Tone, Visual Identity, Messaging) each with green check / red X two-column layouts.
08 Imagery Style — Photography principles, approved vs. avoid image direction grids, and a dark color grading guidelines panel.