Inspira brand guide - v0 by Vercel

Build a premium brand guide document for "Inspira" (AI Water Platform) as a single-page scrollable web document. NOT a website — no nav bars, no menus, no footer links. This is a magazine-quality brand book rendered on the web.

Use Tailwind CSS, Inter font for headings, Source Sans Pro for body. Import both from Google Fonts. Max width ~1100px centered. Smooth scroll. Generous white space (80px+ between sections).

SECTION 1 - TITLE BANNER (full-width, bg Deep Navy #0F1B2D):

"INSPIRA" large tracked letters in Electric Teal #00B4D8
"Brand Guide" below in white, lighter weight
"February 2026" small in #94A3B8

SECTION 2 - BRAND FOUNDATION (white bg):
Section "01" in faded teal, title "Brand Foundation" in #0F1B2D.

Purpose: "To make AI adoption practical, measurable, and safe for organizations"
Mission: "Help businesses transform faster by giving every employee an AI Sidekick"
Vision: "A world where every organization can scale AI confidently — with security, visibility, and proof of value from day one"
Tagline: "Transform Faster with Immediate Proof of Value" in LARGE 48px+ Electric Teal centered text
Core Values as 5 horizontal items with Lucide icons (Eye=Transparency, Shield=Security, BarChart3=Measurability, Zap=Empowerment, Target=Practicality)

SECTION 3 - COLOR PALETTE (#F8FAFC bg):
Section "02", title "Color Palette". LARGE swatches (140px×140px rounded-2xl) in a grid. Each shows color fill, name, role, hex code.
Colors: Deep Navy #0F1B2D (Primary), Enterprise Blue #1A3A5C (Secondary), Electric Teal #00B4D8 (Accent), Bright Cyan #0EA5E9 (Highlight), Slate Gray #475569 (Body Text), Light Slate #94A3B8 (Secondary Text), Cloud White #F8FAFC (Background), Pure White #FFFFFF (Background, add border), Success Green #10B981 (Data/ROI), Warm Amber #F59E0B (Alert/CTA).
Sub-section card: "Primary colors convey trust and authority. Accent colors signal innovation. Neutral tones provide readability."

SECTION 4 - TYPOGRAPHY (white bg):
Section "03". Show Inter and Source Sans Pro side by side with large "Aa" samples.
Type scale with actual rendered text at each size:

Display 48px Inter Bold: "Transform Faster"
H1 36px Inter Bold: "Transform Faster"
H2 28px Inter Semibold: "Immediate Proof of Value"
H3 22px Inter Medium: "Enterprise-Grade Governance"
Body 16px Source Sans Pro: paragraph sample
Small 14px, Caption 12px
Font pairing guidelines card

SECTION 5 - BRAND VOICE & TONE (Deep Navy #0F1B2D bg, white text):
Section "04". Voice and Tone descriptions. DO vs DON'T comparison with green checkmarks and red X marks:

DO: "Deliver measurable AI transformation from day one" / DON'T: "Revolutionize your entire business with our cutting-edge AI synergies"
DO: "Your team gets an AI Sidekick that handles delegated tasks at scale" / DON'T: "Our next-gen autonomous AI agents will disrupt your workflow paradigm"
DO: "See proof of value in the first week — not the first year" / DON'T: "Trust us — the ROI will come eventually"

SECTION 6 - BRAND PERSONALITY (white bg):
Section "05". 5 cards in a row with teal left border, #F8FAFC bg:
Confident, Pragmatic, Trustworthy, Innovative, Empowering (each with description)

SECTION 7 - MESSAGING PILLARS (#F8FAFC bg):
Section "06". 4 cards in 2×2 grid with numbered pillars:

Immediate Proof of Value 2. Enterprise-Grade Governance 3. Scalable AI Workforce 4. Practical Transformation

SECTION 8 - TARGET AUDIENCES (white bg):
Section "07". Two persona cards side by side:
"The Transformation Leader" (C-suite) and "The Operations Champion" (Directors/managers).
Info strip: Company size 500+, Industries list.

SECTION 9 - CUSTOMER PAIN POINTS (#F8FAFC bg):
Section "08". 4 quote cards with decorative quotation marks in teal:
"We've piloted AI but can't scale it safely", "We can't measure the ROI of our AI investments", "Our team is using AI tools without governance — it's a security risk", "We need AI that works across the organization, not just in IT"

SECTION 10 - IMAGERY GUIDELINES (white bg):
Section "09". Guidelines with check/x marks. DO vs DON'T boxes.

SECTION 11 - DIFFERENTIATION (Deep Navy bg):
Section "10". Large teal centered text: "Inspira is the only platform that combines AI task delegation at scale with enterprise-grade governance and immediate, measurable proof of value."
Competitive advantages list with teal checkmarks: ROI tracking, Sidekick agents, enterprise security, scalability.

SECTION 12 - FOOTER (white bg):
"Confidential — For Internal Use Only | Inspira © 2026" centered, small, #94A3B8 text.

Make it absolutely beautiful and professional. Premium magazine quality.

Show full message

62d ago

Now let me build the full brand guide document:

Now I have all the context I need. Let me build all the components and pages:

Now let me create all the section components:

Now let's write the main page:

Now let's add the scroll-smooth behavior and make sure the font variables are hooked up properly in globals.css:

Now let me verify the layout.tsx looks clean:

Everything looks great. Let me do a final check on the globals.css @theme inline block to ensure both font variables are mapped correctly:

The Inspira Brand Guide is complete. Here's what was built across 12 sections and 13 component files:

Title Banner — Full-width Deep Navy hero with the tracked INSPIRA wordmark in Electric Teal, subtitle, and date stamp
Brand Foundation — Purpose/Mission/Vision in a bordered grid, oversized centered tagline in teal, and 5 icon-driven core value cards
Color Palette — 10 large swatches with name, role, and hex codes, plus a usage principles card
Typography — Inter vs Source Sans Pro side-by-side "Aa" displays (dark/light contrast), plus a full rendered type scale from 48px Display down to 12px Caption
Brand Voice & Tone — Dark Navy section with 4 voice trait cards and 3 Do/Don't comparison pairs with green/red indicators
Brand Personality — 5 teal left-bordered cards with numbered personality traits and descriptions
Messaging Pillars — 2×2 grid of pillar cards with large faded numbers and highlight badges
Target Audiences — Two detailed persona cards with dark headers, goal lists, and fear lists; plus a company-size/industry info strip
Customer Pain Points — 4 quote cards with oversized decorative teal quotation marks and Inspira's solution callout
Imagery Guidelines — Do/Don't boxes with green/red styling, plus mood descriptor pills
Differentiation — Dark Navy section with the centerpiece positioning statement and 6 competitive advantage cards
Footer — Clean confidential disclaimer with the wordmark, copyright, and version number

62d ago

Use Tailwind CSS, Inter font for headings, Source Sans Pro for body. Import both from Google Fonts. Max width ~1100px centered. Smooth scroll. Generous white space (80px+ between sections).

SECTION 1 - TITLE BANNER (full-width, bg Deep Navy #0F1B2D):

"INSPIRA" large tracked letters in Electric Teal #00B4D8
"Brand Guide" below in white, lighter weight
"February 2026" small in #94A3B8

SECTION 2 - BRAND FOUNDATION (white bg):
Section "01" in faded teal, title "Brand Foundation" in #0F1B2D.

Purpose: "To make AI adoption practical, measurable, and safe for organizations"
Mission: "Help businesses transform faster by giving every employee an AI Sidekick"
Vision: "A world where every organization can scale AI confidently — with security, visibility, and proof of value from day one"
Tagline: "Transform Faster with Immediate Proof of Value" in LARGE 48px+ Electric Teal centered text
Core Values as 5 horizontal items with Lucide icons (Eye=Transparency, Shield=Security, BarChart3=Measurability, Zap=Empowerment, Target=Practicality)

SECTION 4 - TYPOGRAPHY (white bg):
Section "03". Show Inter and Source Sans Pro side by side with large "Aa" samples.
Type scale with actual rendered text at each size:

Display 48px Inter Bold: "Transform Faster"
H1 36px Inter Bold: "Transform Faster"
H2 28px Inter Semibold: "Immediate Proof of Value"
H3 22px Inter Medium: "Enterprise-Grade Governance"
Body 16px Source Sans Pro: paragraph sample
Small 14px, Caption 12px
Font pairing guidelines card

SECTION 5 - BRAND VOICE & TONE (Deep Navy #0F1B2D bg, white text):
Section "04". Voice and Tone descriptions. DO vs DON'T comparison with green checkmarks and red X marks:

DO: "Deliver measurable AI transformation from day one" / DON'T: "Revolutionize your entire business with our cutting-edge AI synergies"
DO: "Your team gets an AI Sidekick that handles delegated tasks at scale" / DON'T: "Our next-gen autonomous AI agents will disrupt your workflow paradigm"
DO: "See proof of value in the first week — not the first year" / DON'T: "Trust us — the ROI will come eventually"

SECTION 6 - BRAND PERSONALITY (white bg):
Section "05". 5 cards in a row with teal left border, #F8FAFC bg:
Confident, Pragmatic, Trustworthy, Innovative, Empowering (each with description)

SECTION 7 - MESSAGING PILLARS (#F8FAFC bg):
Section "06". 4 cards in 2×2 grid with numbered pillars:

Immediate Proof of Value 2. Enterprise-Grade Governance 3. Scalable AI Workforce 4. Practical Transformation

SECTION 10 - IMAGERY GUIDELINES (white bg):
Section "09". Guidelines with check/x marks. DO vs DON'T boxes.

SECTION 12 - FOOTER (white bg):
"Confidential — For Internal Use Only | Inspira © 2026" centered, small, #94A3B8 text.

Make it absolutely beautiful and professional. Premium magazine quality.

Now let me build the full brand guide document:

Now I have all the context I need. Let me build all the components and pages:

Now let me create all the section components:

Now let's write the main page:

Now let's add the scroll-smooth behavior and make sure the font variables are hooked up properly in globals.css:

Now let me verify the layout.tsx looks clean:

Everything looks great. Let me do a final check on the globals.css @theme inline block to ensure both font variables are mapped correctly:

The Inspira Brand Guide is complete. Here's what was built across 12 sections and 13 component files:

Title Banner — Full-width Deep Navy hero with the tracked INSPIRA wordmark in Electric Teal, subtitle, and date stamp
Brand Foundation — Purpose/Mission/Vision in a bordered grid, oversized centered tagline in teal, and 5 icon-driven core value cards
Color Palette — 10 large swatches with name, role, and hex codes, plus a usage principles card
Typography — Inter vs Source Sans Pro side-by-side "Aa" displays (dark/light contrast), plus a full rendered type scale from 48px Display down to 12px Caption
Brand Voice & Tone — Dark Navy section with 4 voice trait cards and 3 Do/Don't comparison pairs with green/red indicators
Brand Personality — 5 teal left-bordered cards with numbered personality traits and descriptions
Messaging Pillars — 2×2 grid of pillar cards with large faded numbers and highlight badges
Target Audiences — Two detailed persona cards with dark headers, goal lists, and fear lists; plus a company-size/industry info strip
Customer Pain Points — 4 quote cards with oversized decorative teal quotation marks and Inspira's solution callout
Imagery Guidelines — Do/Don't boxes with green/red styling, plus mood descriptor pills
Differentiation — Dark Navy section with the centerpiece positioning statement and 6 competitive advantage cards
Footer — Clean confidential disclaimer with the wordmark, copyright, and version number

62d ago