Variant 1: Deep Charcoal + Coral
Dark neutral base with vibrant coral accents. High contrast, energetic feel.
Base
Surface 1
Surface 2
Border
Coral
Coral Dk
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Marketing
AI
Featured
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 2: Deep Charcoal + Slate
Dark neutral base with cool slate accents. Professional, calm feel.
Base
Surface 1
Surface 2
Border
Slate
Slate Dk
Slate Lt
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Marketing
AI
Featured
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 3: Slate Background + Coral Accents
Cool blue-gray base with warm coral accents. Balanced contrast.
Darkest
Base
Surface
Border
Coral
Coral Dk
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Marketing
AI
Featured
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 4: Slate Background + Light Slate Accents
Monochromatic blue theme. Cohesive, professional, tech-forward.
Darkest
Base
Surface
Border
Slate
Slate Lt
Accent
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Marketing
AI
Featured
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 5: Mixed - Charcoal + Dual Accents
Zinc-based dark theme with both coral and slate accents. Versatile, modern.
Base
Surface 1
Surface 2
Border
Coral
Slate
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 6: Softer Dark + Muted Coral
Warmer gray base with desaturated coral. Gentle, approachable, less harsh.
Base
Surface 1
Surface 2
Border
Coral
Coral Dk
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Marketing
AI
Featured
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 7: Warm Gray + Coral Primary, Slate Secondary
Warm neutral base with coral as the main accent, slate for secondary actions. Energetic yet balanced.
Base
Surface 1
Surface 2
Border
Coral
Slate
Slate Lt
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 8: Warm Gray + Slate Primary, Coral Accents
Warm neutral base with slate as main accent, coral for important actions. Professional with pops of energy.
Base
Surface 1
Surface 2
Border
Slate
Slate Lt
Coral
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Slate Tag
Coral Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 9: Warm Gray + Vibrant Dual Accents
Slightly warmer/saturated gray with both vibrant coral and slate. Bold, modern, high energy.
Base
Surface 1
Surface 2
Border
Coral
Coral Lt
Slate
Slate Lt
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 10: Warm Gray + Muted Dual Accents
Warm gray with desaturated coral and slate. Softer, more sophisticated, easier on the eyes.
Base
Surface 1
Surface 2
Border
Coral
Coral Lt
Slate
Slate Lt
Text
Body
Muted
Typography
Heading Text
Body text looks like this. It should be easy to read on dark backgrounds.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 11: Warmer + High Contrast
Based on V9 with warmer tones, higher contrast borders, brighter text, and bolder weights.
Base
Surface 1
Surface 2
Surface 3
Border
Coral
Coral Lt
Slate
Slate Lt
Heading
Body
Muted
Typography
Heading Text (700)
Body text is brighter and easier to read on the warm dark background.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 12: Warmer + Bright Text
Warmest background with near-white body text. Maximum legibility with warm feel.
Base
Surface 1
Surface 2
Surface 3
Border
Coral
Coral Lt
Slate
Slate Lt
Heading
Body
Muted
Typography
Heading Text (700)
Body text is very bright (#e0e1e4) for excellent readability.
Muted text still has good contrast for secondary info.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 13: Deep Warm + Bold
Deepest warm base with maximum depth. Bold weights throughout, solid accent tags.
Base
Surface 1
Surface 2
Surface 3
Surface 4
Border
Coral
Slate
Heading
Body
Muted
Typography
Heading Text (800)
Body text with good contrast. Deep backgrounds create dramatic depth.
Muted text for secondary information (500 weight).
Buttons
Form Inputs
Tags (Solid)
Default
Coral Tag
Slate Tag
Card
Card Title
Card description text that explains something interesting.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 14: Warm Layered
Multiple distinct surface levels for visual depth. Cards have shadows. Good for complex layouts.
Base
Inset
Surface 1
Surface 2
Surface 3
Border
Coral
Coral Lt
Slate
Slate Lt
Heading
Body
Muted
Typography
Heading Text (700)
Body text with bright contrast. Multiple surface levels create depth.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card (with shadow)
Card Title
Card has subtle shadow for elevation effect.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 15: Segmented Backgrounds
Based on V14 with lighter base and alternating section backgrounds to break up long pages (like ultra.dev). Perfect for varied content sections.
Base
Medium
Dark
Inset
Surface
Border
Coral
Coral Lt
Slate
Slate Lt
Heading
Body
Typography
Heading Text
Body text with good contrast. Alternating sections create visual rhythm.
Muted text for secondary information and captions.
Buttons
Form Inputs
Tags
Default
Coral Tag
Slate Tag
Card
Card Title
Cards sit on surface level with subtle shadows.
Learn more →
Page Section Preview (with alternating backgrounds)
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Alternating section background creates visual breaks
Variant 16: Gradient Accents
Surprise: Subtle gradients on interactive elements add depth and premium feel. Gradient text for highlights.
Base
Surface
Coral Grad
Slate Grad
Heading
Body
Typography
Heading Text
Body text with clean contrast. Gradients add subtle polish.
Muted text for secondary information.
Buttons (with gradient + glow)
Form Inputs
Tags (gradient backgrounds)
Default
Coral Tag
Slate Tag
Card (gradient surface)
Card Title
Subtle gradient gives cards depth and premium feel.
Gradient link →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 17: Neon Glow
Surprise: Cyberpunk-inspired glowing hover effects. Introduces cyan as secondary accent for a futuristic edge.
Deep Base
Surface
Coral
Cyan
Heading
Body
Typography
Heading Text
Body text on deep dark background. Neon accents pop.
Muted text for secondary information.
Buttons (hover for glow!)
Form Inputs
Tags (with glow effect)
Default
Coral Tag
Cyan Tag
Card (hover for border glow)
Card Title
Hover to see the neon border glow effect.
Cyan link →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 18: Golden Accent (Tricolor)
Surprise: Introduces gold/amber as a third accent color. Warm, premium feel with three accent options.
Base
Surface
Coral
Gold
Slate
Heading
Body
Typography
Heading Text
Body text with three accent colors for maximum flexibility.
Muted text for secondary information.
Buttons
Form Inputs (gold focus)
Tags (three accent colors)
Default
Coral
Gold
Slate
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 19: Brutalist
Surprise: Bold borders, harsh lines, uppercase text, monospace accents. Raw, unapologetic design with strong visual impact.
Base
Coral
Slate
White
Gray
TYPOGRAPHY
HEADING TEXT
Body text. Bold. Direct. No frills.
// monospace muted text
BUTTONS
FORM INPUTS
CARD
CARD TITLE
// brutalist cards have offset shadows
LEARN MORE →
LEVEL UP YOUR MARKETING WITH AI
// fractional vp leadership
Variant 20: Glassmorphism
Surprise: Frosted glass effect with backdrop blur. Ethereal, modern aesthetic with layered transparency.
Gradient BG
Glass
Coral
Slate
Heading
Body
Typography
Heading Text
Body text floats on frosted glass surfaces.
Muted text for secondary information.
Buttons (frosted)
Form Inputs (glass)
Tags
Default
Coral Tag
Slate Tag
Card (frosted glass)
Card Title
Cards have backdrop blur for glass effect.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 21: Accent Borders
Surprise: Colored left borders on cards and elements, inspired by Linear/Notion. Clean, organized, professional.
Base
Surface
Coral
Slate
Heading
Body
Typography
Heading Text
Body text. Colored borders add visual hierarchy.
Muted text for secondary information.
Buttons
Form Inputs (border accent)
Tags (with left border)
Default
Coral Tag
Slate Tag
Card (coral left border)
Card Title
Left border accent adds visual hierarchy.
Learn more →
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.
Variant 22: Subtle Texture
Surprise: Paper-like noise texture overlay adds tactile warmth. Subtle shadows create depth without being heavy.
Base
Surface
Coral
Slate
Heading
Body
Typography
Heading Text
Body text with subtle texture adds tactile warmth.
Muted text for secondary information.
Buttons (with inset highlight)
Form Inputs (inset shadow)
Tags
Default
Coral Tag
Slate Tag
Level Up Your Marketing With AI
Fractional VP leadership and AI infrastructure consulting.