Brand Style Guide
The official design reference for Diamond Showdown. Use this guide to maintain visual consistency across all materials.
Logo
The Diamond Showdown logo is the primary brand mark. Always use the official logo file and maintain clear space around it.
On Dark Background
Primary usage
Logo Guidelines
- Always use the official logo files — never recreate or alter the logo.
- Maintain minimum clear space equal to the height of the 'D' in Diamond around all sides.
- Do not rotate, stretch, distort, or apply effects to the logo.
- Do not place the logo on busy or low-contrast backgrounds.
- Minimum display size: 40px height for digital, 0.5in for print.
Colors
Our color palette is built around a bold teal/cyan primary accent on deep dark backgrounds for a premium, modern feel.
Primary Teal
#0ED3CF
Primary buttons, links, accents, headings
Teal Dark
#099E9B
Hover states, active indicators, gradients
Teal Light
#5EEAE6
Highlights, gradient endpoints, focus rings
Background
#0F0F1A
Page backgrounds, main canvas
Surface
#16162A
Cards, elevated surfaces, panels
Charcoal
#2D2D3D
Secondary surfaces, borders, overlays
White
#FFFFFF
Primary text, headings on dark backgrounds
Text Muted
#94A3B8
Secondary text, labels, placeholders
Gradients
Gradients are used sparingly to add depth and emphasis to key UI elements.
Brand Gradient
linear-gradient(135deg, #0ED3CF 0%, #099E9B 100%)
Primary CTAs, buttons, highlights
Text Gradient
linear-gradient(135deg, #0ED3CF 0%, #5EEAE6 50%, #0ED3CF 100%)
Hero headings, feature titles
Dark Gradient
linear-gradient(180deg, #0F0F1A 0%, #16162A 50%, #1A1A2E 100%)
Page backgrounds, sections
Typography
We use Geist Sans as our primary typeface across all headings and body text for a clean, modern look.
Primary Font
Geist Sans
Used for headings, buttons, navigation, and body text.
Weights
Regular — The quick brown fox jumps over the lazy dog
Medium — The quick brown fox jumps over the lazy dog
Semibold — The quick brown fox jumps over the lazy dog
Bold — The quick brown fox jumps over the lazy dog
Extra Bold — The quick brown fox jumps over the lazy dog
Type Scale
UI Components
Key interactive elements built with HeroUI — our component library for consistent, accessible UI.
Buttons
Cards
Default Card
HeroUI Card with default styling. Automatically adapts to the dark theme.
Blurred + Accent
isBlurred prop with a primary accent border for emphasis.
Large Shadow
shadow="lg" for elevated card appearance.
Sample Form
Settings
Spinners & Chips
Design Tokens
Consistent spacing, border radii, and effects used throughout the site.
Border Radii
Effects
Teal Glow
box-shadow: 0 0 20px rgba(14,211,207,0.3)
Border Glow
border: 1px solid rgba(14,211,207,0.3)
Glass Effect
bg-white/5 + backdrop-blur-xl