Brand Guide Page - v0 by Vercel

Build a premium visual brand guide page for "Inspira — Water™ Platform". This is a brand book reference document, NOT a website — no nav bars, no menus, no hamburger icons. Single scrollable page using Inter font from Google Fonts.

Brand colors: Deep Navy #1B2A4A, Electric Blue #2D7FF9, White #FFFFFF, Soft Gray #F4F5F7, Slate Gray #6B7B8D, Bright Teal #00C9A7.

Include these sections with large decorative faded section numbers (01, 02, etc.) and alternating white/gray backgrounds:

COVER: Deep Navy full-width hero with "Inspira Brand Guide" in white, "Water™ Platform — February 2026" in Electric Blue, tagline "Transform Faster with Immediate Proof of Value" in white.

01 BRAND OVERVIEW: Description of Inspira as enterprise AI workforce transformation company. Water™ platform deploys Sidekick agents. Brand Promise callout: "Transform Faster with Immediate Proof of Value." Vision statement. 5 Core Value cards: Immediate Value, Enterprise Trust, Practical Innovation, Transparency, Scalability — each with description.

02 COLOR PALETTE: LARGE color swatches (120px+ rounded rectangles) for all 6 colors grouped as Primary and Secondary, with hex codes and usage descriptions beneath each.

03 TYPOGRAPHY: Actual rendered text samples — Inter Bold heading at 36px, Inter Regular body at 16px, DM Sans alternative at 14px. All showing "The quick brown fox jumps over the lazy dog". Typography usage notes.

04 BRAND VOICE & TONE: Voice/tone description. 5 personality trait badges (Confident, Practical, Trustworthy, Forward-Thinking, Approachable with descriptions). Green-bordered positive examples and red-bordered negative examples of brand voice.

05 KEY MESSAGING: 4 messaging pillar cards in 2x2 grid. Primary tagline displayed large. Supporting taglines. Key messages by audience (C-Suite, IT/Ops Leaders, Innovation Teams). Elevator pitch callout.

06 TARGET AUDIENCES: Two persona cards (Transformation Leader = C-suite, Operations Champion = directors/managers). Demographics. Customer pain points as quotes.

07 DO'S AND DON'TS: Two-column with green checkmarks for Do's and red X's for Don'ts.

08 IMAGERY STYLE: Photography guidelines for clean professional imagery.

FOOTER: "Inspira — Brand Guide — February 2026 — Confidential"

Make it look like a premium printed brand book. Generous white space, elegant typography, clean dividers. Use the brand colors throughout.

Show full message

52d ago

Now I have the design direction. Let me build the full brand guide with the editorial, premium printed book aesthetic — large section numbers, generous whitespace, clean typography, and the brand color system.

Now let me update the globals.css, layout.tsx, and build all the brand guide components:

Now let me update the globals.css to add the font variables and then build all the section components:

Now let me build all the section components and the main page:

Now let's build the main page that assembles everything:

Now let me add the font-alt utility to the globals.css so it works in components:

Now let me verify all the components are in place and check the globals for any final tweaks:

All 11 components are in place. Let me do a final check on the globals.css theme section to make sure the --font-alt variable is correctly wired:

Everything looks correct. The --font-alt is properly defined in @theme inline, which maps it to the CSS variable --font-dm-sans injected by Next.js's font system. Let me also verify the font-family: var(--font-alt) usage in Typography.tsx is correct since Tailwind v4 uses the theme token directly:

Everything is correctly assembled. Here's a summary of what was built:

The Inspira — Water™ Platform Brand Guide is complete as a single, premium scrollable reference document comprising 11 modular components:

Cover — Full-bleed Deep Navy hero with large W™ watermark, typography hierarchy, and a subtle grid texture
01 Brand Overview — Two-column intro, Brand Promise callout in navy, Vision Statement, and 5 Core Value cards with accent top bars and ghost numbers
02 Color Palette — 160px swatches with hex, RGB, tag badges, and usage notes for all 6 colors in Primary/Secondary groupings
03 Typography — Live Inter weight ramp (800→300) on navy, plus DM Sans alternative panel and a usage guidelines table
04 Brand Voice & Tone — Tone-by-context list, 5 personality trait badges, green-bordered Do examples and red-bordered Don't examples
05 Key Messaging — Large tagline hero, 3 supporting taglines, 2×2 pillar cards, 3-audience message cards, and the elevator pitch callout
06 Target Audiences — Two deep persona cards (TL + OC) with demographics grids and verbatim pain point quotes
07 Do's & Don'ts — 10-item each, teal checkmark / red X split columns with subtle ruled separators
08 Imagery Style — Photography category frames, 6 guideline cards, approved vs. avoid split panel

Sections alternate white/soft-gray backgrounds, all use large faded section numbers, and the Inter font is loaded via next/font/google with DM Sans as the named alternative.