Brand
QuarryChain Brand Guidelines
Colors, typography, logo usage, voice, and visual standards for all QuarryChain communications.
Color Palette
Dark mode. Always.
Click any swatch to copy the hex value. All colors are designed for dark backgrounds — never use on light surfaces.
Backgrounds
Brand
Text
Primary Gradient
Teal (#14b8a6) → Blue (#3b82f6) — Used for headline accents and button borders. Never on body text.
Typography
Three fonts. Clear hierarchy.
Each font serves a specific role. Space Grotesk carries the brand voice, Inter carries content, JetBrains Mono carries data authority.
Space Grotesk
Display / Headlines — Bold (700)
The Blockchain Built for What's Next
Inter
Body Text — Regular (400), Medium (500)
100,000 TPS. 3-second finality. Minimal fees. Zero compromise.
JetBrains Mono
Code / Data / Labels — Regular (400), Medium (500)
GOVERNANCE · BUILD ON QUARRYCHAIN · 100,000 TPS
Type Scale
HERO — 48-80px Bold, tracking-tight
Hero Headline
SECTION — 30-48px Bold
Section Headline
BODY — 16px Regular, leading-relaxed
Body text uses Inter Regular for maximum readability across all screen sizes and devices.
LABEL — 12px Uppercase, tracking-widest
GOVERNANCE · ECOSYSTEM · TOKENOMICS
Logo
Logo assets.
Download logo files for use in presentations, partnerships, and media. Always use on dark backgrounds.
Do
- ✓ Use on dark backgrounds only
- ✓ Maintain clear space equal to icon height
- ✓ "Quarry" in blue, "Chain" in white
- ✓ Minimum size: 120px wide (icon + wordmark)
Don't
- ✗ Stretch, skew, or rotate the logo
- ✗ Place on busy backgrounds without overlay
- ✗ Change the blue/white color split
- ✗ Add drop shadows, outlines, or effects
Iconography
Lucide icons. Nothing else.
All icons come from the Lucide library — clean, consistent line icons. No clipart, no emoji, no filled/illustrated icons ever.
Default
24px, 2px stroke, inherit color
In colored container
bg-{color}/10, matching text color
Standalone accent
Brand color directly on icon
Geometric Shapes
Wireframe geometries.
Each section of the QuarryChain site uses a unique 3D wireframe shape as its visual signature. Click any shape to download a high-resolution PNG with transparent background.
Torus Knot
torusKnot
Octahedron
octahedron
Dodecahedron
dodecahedron
Icosahedron
icosahedron
Tetrahedron
tetrahedron
Sphere
sphere
Section Assignments
torusKnot · /technology
octahedron · /developers
dodecahedron · /ecosystem · /brand
icosahedron · /blog
tetrahedron · /whitepaper
sphere · /tokenomics
Voice
State. Don't ask.
Engineers who know they built something good. Confident, precise, no hedging, no hype.
We Are
We Are Not
Confident — state facts plainly
Arrogant — never mock competitors
Technical — precise terminology
Impenetrable — jargon serves clarity
Focused — builder shipping energy
Hype-bro — no 'This is HUGE'
Punchy — minimal, effortless copy
Corporate — no qualifiers or committee tone
Respectful — trust reader intelligence
Condescending — never over-explain
Direct — show capability, full stop
Comparative — never frame against competitors
Examples
Statements, not questions
Stats, not adjectives
Specific CTAs, not generic
Mechanism, not superlatives
Components
UI patterns.
Core component styles used across the site and all brand materials.
Buttons
Primary: gradient border teal→blue, transparent fill, glow on hover. Secondary: border-white/10, text-secondary.
Badges
Rounded-full, teal/8 bg, teal/15 border, JetBrains Mono. Used for compatibility tags and feature labels.
Cards
FEATURE LABEL
Card with spotlight hover glow effect.
100,000
TPS
Stat card — Space Grotesk value, JetBrains Mono label.
bg-secondary (#0f1019), border-white/5, rounded-xl, p-6 to p-8. Hover: spotlight glow follows cursor. No drop shadows.
Motion
Every animation earns its place.
Animations communicate information — entrance reveals, live data, active governance. No decorative motion.
Entrance
BlurFade — fade up 6px + blur, stagger 50ms between siblings
400-600ms ease-out
Hover
Spotlight radial gradient follows cursor on cards, glow expansion on buttons
200-300ms ease
Continuous
HexGrid wave, WireframeShape rotation, Marquee scroll, GovernancePreview node ring
20-60s linear
Data
NumberTicker count-up on scroll. Chart transitions on hover.
1.5-2s ease-out
Accessibility
All animations are disabled when prefers-reduced-motion is set. Static frames shown instead.
Need the full kit?
Download the brand style guide PDF with all colors, typography, components, and usage rules.