Linearity
Midnight canvas, vivid brushstrokes.
Linearity employs a 'creative darkroom' aesthetic, juxtaposing crisp white and vibrant orange accents against predominantly dark, atmospheric surfaces. Typography is sharp and compact, driving home key messages with clear hierarchy. Components are lightweight with generous corner rounding, giving an approachable, almost playful feel, while maintaining functional clarity in an otherwise dramatic visual landscape. Color is used sparingly but impactfully to highlight interactive elements and guide user attention.
⚡️ Build with this templatehttps://www.linearity.ioColor Palette
Typography
Heading: inherit
Body: inherit
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
# Linearity — Style Reference > Midnight canvas, vivid brushstrokes. Theme: dark Linearity employs a 'creative darkroom' aesthetic, juxtaposing crisp white and vibrant orange accents against predominantly dark, atmospheric surfaces. Typography is sharp and compact, driving home key messages with clear hierarchy. Components are lightweight with generous corner rounding, giving an approachable, almost playful feel, while maintaining functional clarity in an otherwise dramatic visual landscape. Color is used sparingly but impactfully to highlight interactive elements and guide user attention. ## Colors | Name | Value | Role | |------|-------|------| | Midnight Ink | `#000000` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Canvas White | `#ffffff` | Secondary surface background, default text on dark backgrounds, ghost button borders | | Deep Graphite | `#111717` | Elevated surface color, dark button backgrounds, secondary dark text | | Silver Mist | `#c3c5c5` | Muted text, subtle borders, navigation links | | Ash Gray | `#585858` | Secondary body text for less emphasis | | Charcoal Text | `#202020` | Primary body text contrasting against light backgrounds | | Vivid Orange | `#fd7c0f` | Orange action color for filled buttons, selected navigation states, and focused conversion moments. | ## Typography | Family | Role | |--------|------| | AcidGroteskSubset | All text elements including headings, body, links, and buttons. Its varied weights and compact line heights create a dense, yet clear, textual hierarchy. The variable letter-spacing on larger sizes contributes to a crisp, professional feel. |