Build a premium one-page brand guide website for "Digital Dark" — a digital-first brand under Inspira. Dark, moody, sophisticated design. React with Tailwind. Use Inter and JetBrains Mono fonts.
Colors: Background #0A0A0A, Cards #1A1A2E, Violet accent #6C63FF, Cyan accent #00D4FF, Body text #8892B0, Headings #CCD6F6, Emphasis #E6F1FF.
Include sticky nav with blur (sections: Overview, Colors, Typography, Voice, Audiences, Messaging, Positioning, Services, Channels), DD monogram logo with violet-to-cyan gradient, smooth scroll, fade-in animations, responsive.
SECTIONS:
HERO: Full-height. Large DD monogram with glow. "Digital Dark" massive Inter Black. Tagline: "Digital Presence. Redefined." Info cards: Website inspira.ai/digital-dark, Parent Inspira, Industry Digital Tech & Creative. Brand Promise: "We turn digital presence into digital dominance." Elevator pitch blockquote.
COLOR PALETTE (01/VISUAL IDENTITY): 7 swatch cards in grid with hex codes in JetBrains Mono: #0A0A0A Primary Black, #1A1A2E Secondary Dark, #6C63FF Accent Electric, #00D4FF Accent Cyan, #8892B0 Neutral Gray, #CCD6F6 Light Gray, #E6F1FF Pure White. Each with usage description.
TYPOGRAPHY (02/TYPE SYSTEM): 3 font cards showing Inter Black, Inter Regular, JetBrains Mono. Type hierarchy: H1-64px, H2-48px, H3-32px, Body-18px, Caption-14px with example text.
BRAND VOICE (03/VOICE): Voice description callout with violet left border. Tone cards: Professional/Bold/Approachable. Personality archetypes in gradient-bordered cards: Strategist, Creative Director, Straight Talker, Night Owl. DO/DON'T columns with check/X icons.
AUDIENCES (04/AUDIENCES): 3 gradient-bordered persona cards with glow: "The Ambitious Founder" (startup, "My brand looks generic"), "The Creative Lead" (marketing director, "I can't translate my vision"), "The Solo Creator" (influencer, "I need strategy not just a logo"). Demographics bar below.
MESSAGING (05/MESSAGING): 4 pillar cards with ghost numbers: Bold by Design, Strategy Before Style, Plain English Real Results, Digital-First Always. 3 audience-specific quote cards. 3 supporting taglines.
POSITIONING (06/POSITIONING): Differentiation, premium-but-accessible position, featured quote "intersection of strategy and aesthetics." 4 competitive advantage cards.
IMAGERY (07/IMAGERY): Visual guidelines cards with dark gradient placeholders.
SERVICES (08/SERVICES): 5 service cards with icons.
CHANNELS (09/CHANNELS): 4 channel cards: Website, Social Media, Marketing Collateral, Content Strategy.
FOOTER: Digital Dark, A brand by Inspira, © 2026, tagline.
Make it look like a $10,000 agency brand book. Premium spacing, typography, polish.
Now I have the design inspiration. Let me build this premium brand guide site with all the sections. I'll set up the globals.css first, then build each section as separate components.
Now let me update the globals.css and layout.tsx with the proper theme and fonts: