AI for Business · scrub to study layout
AI for Business
> AI for Business
Brutalist editorial showroom on warm gray Dayos runs on a brutalist-editorial logic: near-monochrome canvas (#e5e5e5 page, #ffffff cards, #000000 blocks), oversized uppercase display type squeezed into 0.9 line-height, and zero shadows or gradients. The single chromatic accent is a pale mint green (#d1ffca) used sparingly on tags and links, with yellow (#fff100) as a near-neon highlight on small elements. Components are heavy on border-radius (24-64px on cards, 48px on nav pills) and light on decoration — flat surfaces, thin or zero borders, no elevation effects. Typography does all the emotional work: compressed condensed headlines at 130px tower over 16px body text, creating a dramatic scale ratio. The hero pairs a massive black headline with a 3D physical object render (textured cubes with brand labels), establishing a tactile, material-product feel against the clinical canvas.
↗ https://www.dayos.comColor Palette
ACCENT
Mint Chip
#d1ffca
Link backgrounds, tag pills, accent highlights — the signature pale green that punctuates the monochrome system
Voltage Yellow
#fff100
Email highlights, small accent dots, decorative bursts — the high-energy chromatic note on micro-elements
NEUTRALS
Carbon Black
#000000
Primary text, inverted card surfaces, filled blocks — the structural dark that anchors the monochrome system
Graphite
#2f2f2f
Deep surface for code blocks or heavy accents — near-black alternative
Slate
#444444
Secondary body text, navigation labels, and subdued headings. Do not promote it to the primary CTA color
Smoke
#979797
Body text secondary, meta labels, icon strokes — the muted text level for non-emphasized content
Ash
#c6c6c6
Borders, hairlines, disabled states — mid-tone neutral for structural lines
Warm Canvas
#e5e5e5
Page background, hero backdrop, section dividers — the slightly warm gray that distinguishes this from a clinical white canvas
Mist Gray
#f3f3f3
Secondary surface, nav pill backgrounds, subtle panels — one step lighter than canvas for quiet layering
Paper White
#ffffff
Card surfaces, inverted text on dark blocks, icon fills — the bright counterpoint to carbon black)
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.