AI for Business PlatformSolutionsUse CasesResources Schedule a Demo

Brutalist editorial showroom on

#d1ffca

Mint Chip

#fff100

Voltage Yellow

#000000

Carbon Black

AI for Business

Visit ↗

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.

https://www.dayos.com

Color Palette

ACCENT

Mint Chip

#d1ffca

--color-mint-chip

Link backgrounds, tag pills, accent highlights

Voltage Yellow

#fff100

--color-voltage-yellow

Small accent dots, decorative bursts

NEUTRALS

Carbon Black

#000000

--color-carbon-black

Primary text, inverted card surfaces, filled blocks

Graphite

#2f2f2f

--color-graphite

Deep surface for code blocks or heavy accents

Slate

#444444

--color-slate

Secondary body text, navigation labels

Smoke

#979797

--color-smoke

Body text secondary, meta labels, icon strokes

Ash

#c6c6c6

--color-ash

Borders, hairlines, disabled states

Warm Canvas

#e5e5e5

--color-warm-canvas

Page background, hero backdrop

Mist Gray

#f3f3f3

--color-mist-gray

Secondary surface, nav pill backgrounds

Paper White

#ffffff

--color-paper-white

Card surfaces, inverted text on dark blocks

Typography

Type Scale

Minor Third (1.2) from 20px base

display-xl

130px · 700 · 0.9

The quick brown fox jumps

display

80px · 700 · 0.9

The quick brown fox jumps

64px

64px · 700 · 0.9

The quick brown fox jumps

heading-lg

48px · 700 · 0.9

The quick brown fox jumps

heading

40px · 450 · 1.1

The quick brown fox jumps

heading-sm

28px · 500 · 1.3

The quick brown fox jumps

subheading-lg

20px · 400 · 1.2

The quick brown fox jumps

subheading

18px · 500 · 1.33

The quick brown fox jumps

body-lg

16px · 400 · 1.4

The quick brown fox jumps

body

14px · 400 · 1.5

The quick brown fox jumps

Fonts

display SuisseIntlCond

Weights 700

Sizes 48px, 64px, 80px, 130px

Line-height 0.90

Letter-spacing -0.0300em

Fallback Anton, Bebas Neue, Barlow Condensed Bold

Massive uppercase condensed at extreme sizes; all-caps amplifies authority.

body SuisseIntl

Weights 400, 450, 500

Sizes 14–40px

Line-height 1.1–1.33

Letter-spacing -0.03em to -0.01em

Fallback Inter, Söhne, Neue Haas Grotesk

Workhorse neo-grotesque for 90% of UI.

code SuisseIntlMono

Weights 400

Sizes 14–16px

Line-height 1.4

Letter-spacing 0

Fallback JetBrains Mono, IBM Plex Mono

Code blocks and technical labels.

Spacing & Shape

Spacing

space-1

4px

Icon padding, hairline gap

space-2

8px

Tag pill inset

space-3

12px

Text inline gap

space-4

16px

Component padding

space-6

24px

Card interior padding

space-8

32px

Section gap on mobile

space-12

48px

Section gap on desktop

space-16

64px

Hero vertical rhythm

Radii

radius-sm

8px

Buttons, small tags

radius-md

24px

Cards, panels

radius-lg

48px

Nav pills

radius-xl

64px

Hero blocks

Guidelines

Never place mint chip and voltage yellow next to each other at the same weight — yellow must stay a micro-accent.
Display headlines are always uppercase, condensed, and set at line-height 0.9.
No shadows. No gradients. If you need elevation, invert the surface to black.
Border radius is used generously (24–64px) — components read as soft blocks, not chips.

More like this

Reflect Notes

Starlit violet cosmos — a dark editorial notebook

dope.security

Midnight terminal with violet phosphor accents

Hungry Tiger

Turmeric-bright graffiti on a warm cream wall

Apple

White room with a single blue accent

Vercel

Typeset terminal on white paper

Notion

Warm paper notebook under morning light

# AI for Business — Style Reference
> Brutalist editorial showroom on warm gray

**Theme:** light

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.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Mint Chip | `#d1ffca` | `--color-mint-chip` | Link backgrounds, tag pills, accent highlights |
| Voltage Yellow | `#fff100` | `--color-voltage-yellow` | Small accent dots, decorative bursts |
| Carbon Black | `#000000` | `--color-carbon-black` | Primary text, inverted card surfaces, filled blocks |
| Graphite | `#2f2f2f` | `--color-graphite` | Deep surface for code blocks or heavy accents |
| Slate | `#444444` | `--color-slate` | Secondary body text, navigation labels |
| Smoke | `#979797` | `--color-smoke` | Body text secondary, meta labels, icon strokes |
| Ash | `#c6c6c6` | `--color-ash` | Borders, hairlines, disabled states |
| Warm Canvas | `#e5e5e5` | `--color-warm-canvas` | Page background, hero backdrop |
| Mist Gray | `#f3f3f3` | `--color-mist-gray` | Secondary surface, nav pill backgrounds |
| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, inverted text on dark blocks |

## Tokens — Typography

**Scale:** Minor Third (1.2), base 20px

| Step | Size | Weight | Line-height |
|------|-----:|-------:|------------:|
| display-xl | 130px | 700 | 0.9 |
| display | 80px | 700 | 0.9 |
| 64px | 64px | 700 | 0.9 |
| heading-lg | 48px | 700 | 0.9 |
| heading | 40px | 450 | 1.1 |
| heading-sm | 28px | 500 | 1.3 |
| subheading-lg | 20px | 400 | 1.2 |
| subheading | 18px | 500 | 1.33 |
| body-lg | 16px | 400 | 1.4 |
| body | 14px | 400 | 1.5 |

### Fonts
- **DISPLAY — SuisseIntlCond** · weights 700 · sizes 48px, 64px, 80px, 130px · line-height 0.90 · letter-spacing -0.0300em
  - Fallback: Anton, Bebas Neue, Barlow Condensed Bold
  - Massive uppercase condensed at extreme sizes; all-caps amplifies authority.
- **BODY — SuisseIntl** · weights 400, 450, 500 · sizes 14–40px · line-height 1.1–1.33 · letter-spacing -0.03em to -0.01em
  - Fallback: Inter, Söhne, Neue Haas Grotesk
  - Workhorse neo-grotesque for 90% of UI.
- **CODE — SuisseIntlMono** · weights 400 · sizes 14–16px · line-height 1.4 · letter-spacing 0
  - Fallback: JetBrains Mono, IBM Plex Mono
  - Code blocks and technical labels.

## Tokens — Spacing & Shape

| Name | Value | Role |
|------|-------|------|
| `space-1` | 4px | Icon padding, hairline gap |
| `space-2` | 8px | Tag pill inset |
| `space-3` | 12px | Text inline gap |
| `space-4` | 16px | Component padding |
| `space-6` | 24px | Card interior padding |
| `space-8` | 32px | Section gap on mobile |
| `space-12` | 48px | Section gap on desktop |
| `space-16` | 64px | Hero vertical rhythm |
| `radius-sm` | 8px | Buttons, small tags |
| `radius-md` | 24px | Cards, panels |
| `radius-lg` | 48px | Nav pills |
| `radius-xl` | 64px | Hero blocks |

## Guidelines

- Never place mint chip and voltage yellow next to each other at the same weight — yellow must stay a micro-accent.
- Display headlines are always uppercase, condensed, and set at line-height 0.9.
- No shadows. No gradients. If you need elevation, invert the surface to black.
- Border radius is used generously (24–64px) — components read as soft blocks, not chips.