Mint Chip
#d1ffcaLink backgrounds, tag pills, accent highlights — the signature pale green that punctuates the monochrome system
AI for Business
dayos.comWebsite preview
The design language
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.
Color palette
accent
Voltage Yellow
#fff100Email highlights, small accent dots, decorative bursts — the high-energy chromatic note on micro-elements
neutral
Carbon Black
#000000Primary text, inverted card surfaces, filled blocks — the structural dark that anchors the monochrome system
Paper White
#ffffffCard surfaces, inverted text on dark blocks, icon fills — the bright counterpoint to carbon black
Warm Canvas
#e5e5e5Page background, hero backdrop, section dividers — the slightly warm gray that distinguishes this from a clinical white canvas
Mist Gray
#f3f3f3Secondary surface, nav pill backgrounds, subtle panels — one step lighter than canvas for quiet layering
Ash
#c6c6c6Borders, hairlines, disabled states — mid-tone neutral for structural lines
Smoke
#979797Body text secondary, meta labels, icon strokes — the muted text level for non-emphasized content
Slate
#444444Secondary body text, navigation labels, and subdued headings. Do not promote it to the primary CTA color
Graphite
#2f2f2fDeep surface for code blocks or heavy accents — near-black alternative
Typography
Type scale
Minor Third (1.2) · 20px basedisplay-xl
130px · 700 · 0.9 · -3.9px trackingThe quick brown fox jumps
display
80px · 700 · 0.9 · -2.4px trackingThe quick brown fox jumps
text-64
64px · 700 · 0.9The quick brown fox jumps
heading-lg
48px · 700 · 0.9 · -1.44px trackingThe quick brown fox jumps
heading
40px · 450 · 1.1 · -0.8px trackingThe quick brown fox jumps
heading-sm
28px · 500 · 1.3 · -0.84px trackingThe quick brown fox jumps
subheading-lg
20px · 400 · 1.2The quick brown fox jumps
subheading
18px · 500 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SuisseIntlCond
- Weights
- 700
- Sizes
- 48px, 64px, 80px, 130px
- Line height
- 0.90
- Letter spacing
- -0.0300em
- Fallback
- Anton, Bebas Neue, Barlow Condensed Bold
Display headlines — massive uppercase condensed at extreme sizes with tight 0.9 line-height creates the editorial brutalist voice; all-caps treatment amplifies authority
Additional typeface
SuisseIntl
- Weights
- 400, 450, 500
- Sizes
- 14px, 16px, 18px, 20px, 28px, 40px
- Line height
- 1.10, 1.14, 1.20, 1.25, 1.30, 1.33
- Letter spacing
- -0.0300em, -0.0200em, -0.0110em, -0.0100em
- Fallback
- Inter, Söhne, Neue Haas Grotesk
Body text, nav, subheads, buttons, cards — the workhorse neo-grotesque that handles 90% of UI; weight 450 (a non-standard intermediate) carries mid-emphasis; 40px/450 uppercase serves as secondary headlines
Additional typeface
SuisseIntlMono
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.30, 1.60
- Letter spacing
- -0.0300em
- Fallback
- JetBrains Mono, IBM Plex Mono, Geist Mono
Labels, tags, technical meta, small captions — monospace at 12px for system-level micro-copy and numbered annotations
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16-24px
Border radius
tags
64pxcards
24-32pxbuttons
4-8pxnav-pill
48pxlarge-cards
64pxSpacing scale
4px5px6px8px10px12px14px16px24px40px46px58px64px80px83px91px96px160px176pxGuidelines
Do
- Use SuisseIntlCond 700 at 48-130px with 0.9 line-height for all display headings — always uppercase, always tightly tracked
- Apply the warm canvas (#e5e5e5) as the page background, never pure white — the gray is the canvas tone that makes white cards feel lifted
- Use radius between 24-64px on cards; 48px on nav pills; 4-8px on buttons — the radius scale is large and deliberate
- Reserve #d1ffca (mint) for tags and link backgrounds; reserve #fff100 (yellow) for email highlights and micro-accents only
- Keep all cards flat — no shadows, no gradients. Depth comes from surface color contrast between canvas, white, and black
- Set nav height to 8rem with a floating pill-shaped container at 48px radius centered in the bar
- Use 16px/500 SuisseIntl for body text and button labels; 14px/500 for meta and list items
Don’t
- Never add box-shadows to cards or buttons — the system is explicitly flat
- Avoid pure white (#ffffff) as the page background — always use #e5e5e5 canvas beneath content
- Do not use chromatic colors for large surface fills — mint and yellow are accent-only, used on small elements
- Never set display heading line-height above 0.95 — the tight leading is what creates the compressed editorial block
- Do not use mixed-case for headings — all display and secondary headings are uppercase
- Avoid using SuisseIntlCond below 48px — the condensed face is designed for oversized display, not body text
- Never use subtle gray borders on cards — prefer surface color contrast over 1px borders for separation
Components
Filled Dark Button
Primary CTA — schedule demo, book introBlack (#000000) background, white (#ffffff) text, 8px radius, 16px 24px padding. SuisseIntl 16px/500. The high-contrast inverted treatment makes it the strongest interactive element on any page.
Ghost Border Button
Secondary navigation actionTransparent background, 1.5px solid border in #444444, #444444 text, 4px radius, 16px horizontal padding. SuisseIntl 16px/500. Restrained outlined variant for less critical actions.
Text Link Button
Inline navigation, tertiary actionsNo background, no border, #000000 text, 0-4px radius, underline on hover. SuisseIntl 16px/500. Used for 'More details' and similar low-weight navigation.
Nav Pill
Top navigation container#ffffff background, 48px border-radius, wraps nav links in a floating capsule. Creates a physical 'pill' shape that separates nav from the canvas.
Standard Card
Content blocks, feature containers#ffffff background, 24-32px border-radius, no shadow, no border. Padding 24px. The flat white surface against the warm gray canvas creates natural separation without elevation.
Inverted Card
Dark feature blocks, dramatic contrast zones#000000 background, 32px border-radius, white text. No shadow. Used for high-impact sections that need to break the light canvas pattern.
Top-Arc Card
Hero-bottom rounded cards, section openers64px 64px 0px 0px border-radius (top corners rounded, bottom corners flat). Creates a 'dome' shape that suggests the card emerges from below. Used in #000000 and #ffffff variants.
Mint Tag
Category labels, status indicators#d1ffca background, #000000 text, 64px radius (fully pill-shaped), small padding. The pale green pill is the signature accent element — used sparingly for taxonomy.
Voltage Highlight
Email addresses, accent text, decorative bursts#fff100 background or text on select elements. Applied to email links and small accent marks. The high-saturation yellow against monochrome creates visual sparks.
3D Product Render
Hero imagery, product illustrationTextured concrete cubes with wood-grain and colored geometric protrusions, branded with SAP/Oracle/Workday logos. Photorealistic 3D renders on clean canvas. The physical/tactile material treatment contrasts with the flat UI.
Uppercase Display Heading
Hero, section titlesSuisseIntlCond 700 at 80-130px, line-height 0.9, letter-spacing -0.03em, uppercase. The extreme size + tight leading + condensed width creates massive visual blocks of text that dominate the page.
Secondary Heading
Sub-sections, card titlesSuisseIntl 450 at 40px, uppercase, line-height 1.1, letter-spacing -0.02em. Lighter weight than display but still uppercase, bridging the brutalist display voice with readable content.
Mono Label
Technical annotations, slide indicators, numbered markersSuisseIntlMono 400 at 12px, letter-spacing -0.03em. Used for 'Slide 1/2/3' indicators, metadata, and system labels. The monospace creates a technical/editorial counterpoint to the neo-grotesque body.
Surfaces & elevation
Level 0
Canvas
#e5e5e5Page background — warm gray that separates content from pure white
Level 1
Card
#ffffffContent cards, feature blocks — clean white lifted from canvas
Level 2
Inverted
#000000Dark feature blocks, inverted cards — dramatic contrast zones
Level 3
Mist
#f3f3f3Subtle panel layering, nav pill backgrounds
Flat by design — zero shadows detected across all card variants. Depth is created through surface color contrast (canvas gray → white cards → black inverted blocks) and radius, not elevation. This is a deliberate editorial-print influence, not minimalism by omission.
Layout & imagery
Layout
Full-bleed warm gray (#e5e5e5) canvas with max-width ~1200px centered content. Hero is a split: massive 130px condensed headline on the left occupying ~50% width, 3D product render on the right. Nav is a floating pill centered in the 8rem top bar. Sections alternate between light canvas, white card surfaces, and full-width black inverted blocks. Content is primarily single-column or 2-column splits. Use case library is a card grid (2-3 columns). Footer is a compact dark band. Vertical rhythm uses 80px section gaps with 24px element spacing. No sidebar navigation. No sticky elements beyond the header.
Imagery
Photorealistic 3D renders of physical objects — textured concrete cubes with wood-grain elements, protruding colored geometric shapes (green, yellow, pink), and branded labels (SAP, Oracle, Workday logos printed on surfaces). The renders sit on the warm gray canvas like product photography in a gallery. No lifestyle photography, no stock imagery, no abstract gradients. The material/tactile treatment (concrete texture, wood grain) creates a physical-product feel that contrasts with the flat typographic UI. Icons are minimal — mostly monoline strokes in black or white. No decorative illustrations or iconography beyond functional UI markers.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background (canvas): #e5e5e5 - card surface: #ffffff - border/hairline: #c6c6c6 - accent: #d1ffca (mint) - primary action: no distinct CTA color 3 Example Component Prompts: 1. Create a hero headline: 130px SuisseIntlCond weight 700, uppercase, line-height 0.9, letter-spacing -3.9px, #000000 text on #e5e5e5 canvas background. The headline should read as 3-4 lines of compressed uppercase text occupying the left 50% of the viewport. 2. Create a content card: #ffffff background, 32px border-radius, no shadow, 24px padding, containing a 40px SuisseIntl weight 450 uppercase heading in #000000 and 16px body text in #444444. Place on #e5e5e5 canvas. 3. Create a mint tag pill: #d1ffca background, #000000 text, 64px border-radius, 8px 16px padding, 12px SuisseIntlMono weight 400 text. Use as a category label above card titles. 4. Create a top navigation bar: 8rem height, transparent #e5e5e5 background, containing a centered white pill at 48px border-radius with horizontal nav links in 16px SuisseIntl weight 500 #444444 text, 24px gap between links. Include a filled black 'Schedule a Demo' button (8px radius, #ffffff text) aligned right. 5. Create an inverted dark section: full-width #000000 background, 80px vertical padding, containing white text — a 80px SuisseIntlCond 700 uppercase headline followed by 16px #979797 body text. No shadows or gradients.
Similar brands
Linear
Same approach of oversized condensed display type, monochrome canvas with single accent color, flat surfaces with zero shadows
Vercel
Similar full-bleed hero with massive headline, monochromatic palette, and large-radius card surfaces
Cursor
Same editorial-brutalist typographic voice with uppercase condensed headings and minimal color palette
Arc Browser
Shared warm-gray canvas approach, oversized display type, and accent color used sparingly on small functional elements
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
