Brand Guidelines
The comprehensive guide to QuanChain's visual identity. The homepage hero leads with the overline “Forever, Quantum Resistant”, the headline “Beyond Quantum”, and the subheading “No public key ever protects value at rest.” The brand reflects editorial precision, institutional performance, and the duality of velocity and permanence.
Brand Philosophy
Three core principles define every visual and verbal expression of the QuanChain brand.
Editorial Precision
Cinematic typography and generous whitespace communicate structural certainty. Each section has a unique layout — no repeating patterns.
Velocity + Permanence
Ephemeral children that move fast, protected by a permanent parent identity. Motion within structure.
Institutional Performance
Enterprise-grade trust with developer-grade speed. A production system, not a research project.
Logo System
The QuanChain logo combines the Q icon mark with 'QuanChain' set in FK Grotesk Neue (mechanical sans-serif grotesque, font-light, tracking -0.02em). Icon and text are separated by a 2px gap (gap-0.5). The text scales responsively: text-lg (mobile), text-xl (tablet), text-[1.4rem] (desktop).
Primary Logo
Q icon + "QuanChain" text in FK Grotesk Neue (font-light). 2px gap between icon and text (gap-0.5). Primary usage on dark backgrounds.
Logo Mark
Standalone icon for compact spaces, favicons, and app icons. Min 40px.
Wordmark
"QuanChain" in FK Grotesk Neue, font-light, tracking -0.02em. Scales: text-lg → text-xl → text-[1.4rem].
Background Usage
Primary usage. Logo renders in #FAFAF9 on Void (#08080C) surfaces.
Inverted application. Logo renders in #1A1A1F on Ivory (#F5F2ED) surfaces.
Usage Rules
Color Palette
Click any swatch to copy its hex value. The palette alternates between dark and light editorial sections, anchored by Electric Teal and Warm Gold.
Core Dark Canvas
Light Editorial Sections
Primary Accent — Electric Teal
The primary interactive accent throughout the interface. Use sparingly for maximum impact.
Secondary Accent — Warm Gold
Text Colors (Dark Sections)
Text Colors (Light Sections)
Functional Colors
Typography
Unified modern grotesque — FK Grotesk Neue handles everything from massive display text to UI labels. JetBrains Mono remains reserved for stats, code, and technical data. Two typefaces, total clarity.
Handles everything — massive display text, section headings, card titles, body copy, navigation, and UI labels. A modern mechanical grotesque with sharp corners and subtle ink traps. Available in proportional, SemiMono, and Mono variants; we use the proportional cut. Self-hosted via next/font/local.
Reserved exclusively for stats, code blocks, blockchain addresses, labels, and technical data displays. Developer-grade clarity — the only non-FK Grotesk typeface in the system.
Type Scale
Layout Philosophy
No two adjacent sections share the same layout or width. Every section is visually distinct, creating an editorial rhythm across the page.
Core Rule
No two adjacent sections may share the same layout pattern or container width. Section widths vary deliberately across the page to maintain visual interest and editorial cadence.
Layout Types
Section Transitions
Dark and light sections alternate with 200px gradient transitions between them. Each section uses a different animation technique to maintain variety.
Spacing & Layout
Generous editorial whitespace and consistent radius values create visual rhythm. Section padding is 200px on desktop, 120px on mobile.
Border Radius
Spacing Scale
Grid System
Container max-width: 1400px. Horizontal padding: 24px. Responsive columns with 24px (gap-6) gutters.
Visual Effects
Restrained visual treatments that reinforce the QuanChain editorial identity. GPU-rendered WebGL hero shader, cursor-reactive effects, scroll-driven animations, alternating dark and light sections, controlled teal glow, no gradient text.
Hero Background — WebGL Shader
The homepage hero uses a GPU-rendered WebGL fragment shader — not Canvas 2D particles. The entire animation runs on the GPU with zero CPU overhead.
Surface Styles
Primary dark sections
Cards, elevated containers
Light editorial sections
Section Alternation
Noise Overlay
Motion & Animation
Apple-like easing: cubic-bezier(0.16, 1, 0.3, 1)
.FBM + domain warp.framer-motion scroll.heroFadeUp.ease-[cubic-bezier(0.16,1,0.3,1)]Component Library
Core UI components with all variant options. Buttons use pill shape (rounded-full) with teal border-style (NOT solid fill). Font-medium, tracking-wide. Cards use rounded-2xl (16px).
Buttons
Primary
bg-[rgba(0,212,170,0.08)], border border-[#00D4AA]/40, text #00D4AA, hover glow shadow-[0_0_20px_rgba(0,212,170,0.15)]. NOT solid teal fill.
Secondary
subtle white border, transparent bg, pill, font-medium tracking-wide
Ghost
no border, #00D4AA text, thinner padding
Font Weight
font-medium (not semibold), tracking-wide
Padding (sm / md / lg)
px-5 py-2 / px-6 py-2.5 / px-8 py-3
Shape
rounded-full (pill), border-style with subtle teal tint — never solid fill
Cards
Card Title
Example content for the glass card variant with hover gradient.
Card Title
Example content for the gradient card variant with hover gradient.
Card Title
Example content for the bordered card variant with hover gradient.
Card Title
Example content for the default card variant with hover gradient.
Badges
Navigation Dropdowns
Navigation dropdown items include teal-tinted icon containers alongside the item name and description.
Icon Container
w-10 h-10, rounded-lg, bg-[rgba(0,212,170,0.08)]
Icon Size
20x20px SVGs from technology and financial icon sets
Layout
Icon left, name + description right (flex, items-start, gap-3)
Iconography
Two custom SVG icon sets crafted for the QuanChain ecosystem. Monoline style, optimized for web rendering on dark backgrounds.
Technology Icons
Financial & UI Icons
Icon Size Reference
Brand Voice
How QuanChain communicates across all touchpoints — balancing deep expertise with accessibility. See Writing Style below for detailed tone and grammar requirements.
Authoritative
The system speaks with deep technical knowledge. Claims are backed by research, provable cryptography, and measurable benchmarks.
Accessible
Complex quantum concepts explained clearly. The brand bridges the gap between frontier physics and everyday users without condescension.
Forward-Looking
The focus is on the future with confidence, not fear. Quantum computing is an opportunity to build better systems, not merely a threat to defend against.
Writing Style
All QuanChain communications must follow an academic yet accessible tone — formal, precise, and authoritative while remaining clear to a broad audience.
Core Principle: Academic Clarity
QuanChain content is written in the tradition of peer-reviewed technical literature. The tone is formal and precise, establishing credibility through rigour rather than enthusiasm. However, academic does not mean impenetrable — every concept should be expressed as clearly and directly as possible, avoiding unnecessary jargon or verbosity.
“Write as though submitting to a respected journal, but with the reader in mind at every sentence.”
Writing Standards
- Use formal third-person voice ("the system provides" not "we provide")
- Eliminate all contractions (do not, is not, cannot — never don't, isn't, can't)
- Use precise, quantified claims backed by data or references
- Employ academic transitions (Furthermore, Moreover, Consequently, In contrast)
- Structure arguments formally: premise, evidence, conclusion
- Use passive voice where it improves clarity or objectivity
- Reference figures, tables, and sections formally (see Section 4.2)
- Define all acronyms and technical terms at first use
- Maintain consistent terminology throughout a document
Avoid
- Contractions in any published material (don't, isn't, can't, won't)
- Casual or conversational phrases ("basically", "just", "pretty much")
- Second person ("you/your") — use "users", "participants", or passive voice
- Exclamation marks in technical or formal content
- Marketing hyperbole ("revolutionary", "game-changing", "amazing")
- Starting sentences with "But", "And", or "So"
- Colloquialisms ("skin in the game", "rich get richer", "under the hood")
- Vague qualifiers ("very", "really", "quite", "a lot")
- Informal analogies without academic framing
Tone Examples
QuanChain doesn't just protect against quantum threats — it adapts to them.
QuanChain does not merely protect against quantum threats; it adapts to them dynamically.
Think of it like a lock that upgrades itself when better lock-picks are invented.
The mechanism is analogous to a cryptographic lock that autonomously strengthens its parameters as adversarial capabilities advance.
You can migrate your wallet to a higher security level at any time.
Wallet holders may migrate to a higher security level at any time.
But there's a catch — post-quantum signatures are much larger.
However, a significant trade-off arises: post-quantum signatures are substantially larger.
QuanChain is a revolutionary blockchain that will change everything.
QuanChain introduces a novel approach to blockchain security through adaptive quantum resistance.
Guidelines by Content Type
Whitepaper & Technical Documentation
Strictly academic. Third-person throughout. All claims supported by data or formal references. No contractions. Structure follows standard academic convention: abstract, introduction, methodology, analysis, conclusion.
Website Copy
Formal but approachable. May use first-person plural ("we") sparingly for the team voice. No contractions. Precise language with quantified claims where possible. Avoid marketing superlatives.
Social Media & Blog Posts
Professional and measured. May adopt a slightly warmer tone while maintaining precision. Contractions are acceptable only in social media posts (not blog articles). Always cite sources for technical claims.
Developer Documentation & API Guides
Clear and direct. Second person ("you") is acceptable in instructional contexts. No contractions. Use imperative mood for instructions. Provide code examples for all concepts.
Do's and Don'ts
Essential rules to maintain brand consistency across all applications.
Do
- Use alternating dark/light section backgrounds with gradient transitions
- Use FK Grotesk Neue for all text — headings, body, UI
- Use pill-shaped buttons with teal border-glow style
- Use generous editorial whitespace (200px section padding)
- Use Electric Teal #00D4AA as primary accent
- Give each section a unique layout (no repeating grid patterns)
- Use cursor-reactive and scroll-driven effects where appropriate
- Use JetBrains Mono only for stats, code, and technical labels
Don't
- Repeat the same layout pattern in adjacent sections
- Use solid-fill buttons (use border-style with subtle fill)
- Use purple/blue as primary accent (old palette)
- Use gradient text effects
- Use Cormorant Garamond or Inter (old fonts)
- Use glassmorphism, backdrop-blur, or neon glow
- Use "quantum-proof", "unhackable", or "next-generation" in copy
- Stretch, distort, or recolor the logo
- Place the logo on busy or low-contrast backgrounds
Accessibility Standards
QuanChain follows WCAG 2.1 AA standards to ensure interfaces are usable by all stakeholders, including government and enterprise users.
Color Contrast
- All body text maintains a minimum 4.5:1 contrast ratio against backgrounds
- Large text (18px+ or 14px+ bold) maintains a minimum 3:1 contrast ratio
- Interactive elements have visible focus indicators with 3:1 contrast
- Do not convey information through color alone — use icons or text labels
- All functional icons include accessible labels or aria-label attributes
Interaction & Navigation
- All interactive elements are keyboard accessible with visible focus states
- Focus order follows logical reading order (left-to-right, top-to-bottom)
- Touch targets are a minimum of 44x44px for mobile interfaces
- Animations respect prefers-reduced-motion media query
- Screen reader support with semantic HTML and ARIA landmarks