Guidelines for using the 3DPlayground logo, color palette, typography, and visual system consistently across all surfaces and media.
Logo System
The logo consists of an isometric cube mark and the "3DPlayground" wordmark set in Space Grotesk Bold. Always maintain both elements together except in size-constrained contexts.
3DPlayground
Logo · Dark background
Use on dark surfaces (#020617 and below)
3DPlayground
Logo · Light background
Use on white or near-white surfaces
Icon mark — size scale
64 · 48 · 32 · 20 px — use mark alone below 120 px logo widths
3DPlayground
Clear space
Minimum margin = cap-height of the "3" on all sides
Color Palette
Click any swatch or hex code to copy it. CSS custom properties are defined in globals.css and exposed as Tailwind utilities via the @theme block.
Primary
Blue
--brand-violet
CTAs, focus rings, primary interactive
Sky Blue
--brand-violet-light
Hover states, gradient start, highlights
Accents
Cyan
--brand-cyan
AI features, secondary accents, tech indicators
Green
--brand-green
Success states, live indicators, language badges
Sun
--brand-sun
Warnings, premium callouts, education highlights
Coral
--brand-coral
Alerts, attention-grabbing moments, pin accents
Neutrals
Ink
--brand-ink
Primary brand dark background
Dark Navy
App shell, deepest backgrounds
Slate Dark
Surface elevation, card backgrounds
Brand Slate
--brand-slate
Secondary text, rule lines
Label
--brand-label
Tertiary text, placeholder copy
Mist
--brand-mist
Light backgrounds, subtle fills
Gradients
Brand Gradient
Wordmark, gradient text, key UI highlights
gradient-wordmark / gradient-shimmer (animated)
Hero Background
Landing hero section background
inline style
Brand Fill
App icon background, filled containers
gradient-brand
CTA Strip
Call-to-action section backgrounds
inline style
Typography
Three typefaces cover all brand contexts. All are Google Fonts loaded via next/font/google with display: swap.
The world is 3D.
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Space GroteskDisplay · Brand
All headings, the wordmark text, UI labels where brand presence matters, and navigation items.
Weights
400500600700
--font-display / font-display (Tailwind)
Upload any 3D model, pin annotations at any point.
abcdefghijklmnopqrstuvwxyz 0123456789
Hanken GroteskBody · UI
Body copy, descriptions, tooltips, form labels, button text, and the vast majority of UI text.
Weights
400500600700800
--font-body / default body font
scene_id: a1b2c3d4e5
{ "language": "en", "pins": 9 }
JetBrains MonoMono · Technical
Code blocks, API keys, scene IDs, model paths, and technical metadata like copyright lines.
Weights
400500700
--font-mono / font-mono (Tailwind)
Usage Rules
Do
✓Use the full logo (mark + wordmark) in headers, footers, and co-branding contexts.
✓Maintain a clear-space margin equal to the cap-height of the "3" around the logo.
✓Use the Blue (#3B82F6) or white wordmark on dark backgrounds.
✓Use the Blue (#3B82F6) or Ink (#020617) wordmark on light backgrounds.
✓Scale the logo proportionally — never stretch or distort.
✓Use the icon mark alone when space is very tight (favicons, app icons, avatars).
✕
Don't
✕Don't recolour the icon mark — it must always use its gradient fills.
✕Don't place the logo on busy backgrounds without sufficient contrast.
✕Don't add drop shadows, outlines, or effects to the logo.
✕Don't rotate or skew any element of the mark or wordmark.
✕Don't use the wordmark without the mark except in plain-text contexts.
✕Don't reproduce the logo below 24 px height — use the icon mark instead.
Downloads
All assets are provided in SVG format. SVG files are resolution-independent and suitable for any size. Use a tool like Inkscape, Figma, or a browser to export to PNG or other formats.
App Icon
SVG · 128×128
3DPlayground
Logo · Dark
SVG · 340×80
3DPlayground
Logo · Light
SVG · 340×80
Brand Palette
SVG · 6 color swatches
Need a custom format or have a usage question?
Reach out before using our brand assets in commercial contexts or partnerships.