Dayos — Agentic Enterprise Black — Design Reference
hazard-yellow signal in an ink room
Source: https://www.dayos.com
Theme: light
Category: AI
Mood: dark, bold, technical, typographic, monochrome, precise
Captured: 2026-10-22
Overview
A near-black enterprise stage where enormous condensed capitals do all the shouting and a single hazard yellow does all the pointing. Hero sections are pure #000000 with white and grey headline stacks set in SuisseIntlCond at 0.8–0.9 line-height, while monospaced micro-labels ("HERO · AGENTIC ENTERPRISE OPERATIONS", "LIVE DEMO ENVIRONMENT") run as tracked-out uppercase tags that make the page read like instrumentation. Content sections below flip to white with a large rounded top edge, so the site alternates between black control room and bright editorial card grid.
Technically it is three weights of one typeface family doing everything: SuisseIntlCond 700 for display, SuisseIntl 400/450/500 for body and buttons, SuisseIntlMono for labels and status chips. Colour is strictly monochrome — #000000, #0b0b0b, #f3f3f3, #e5e5e5 — with #fff100 reserved for the single primary CTA, active-state dots and inline links. Surfaces are defined by hairline rgba(255,255,255,0.14–0.28) borders over near-black fills rather than shadows (there are none), radii cluster at 12/16px for cards and 99px pills for buttons and the floating nav, and spacing runs on an 8px base with 80–130px section padding.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Ink Black |
#000000 |
--color-ink |
Hero and section ground, body text on white surfaces, pill-button fill on light pages |
| Panel Black |
#0b0b0b |
--color-surface-raised-dark |
Raised cards and demo panels sitting on the black ground |
| Console Grey |
#1a1a1a |
--color-surface-dark-2 |
Inner demo chrome, nav pill fill, toolbar strips |
| Paper White |
#ffffff |
--color-paper |
Light section ground, headline colour on black, card fill in blog/case-study grids |
| Mist Grey |
#f3f3f3 |
--color-surface-light |
Subtle surface on white sections — filter sidebars, image plates, card backgrounds |
| Hairline Grey |
#e5e5e5 |
--color-border-light |
1px dividers and input/select borders on white sections |
| Dim Grey |
#b5b5b5 |
--color-text-dim |
Secondary headline halves ("NOT BOLTED ONTO IT.") and muted body copy on black |
| Label Grey |
#979797 |
--color-text-muted |
Mono eyebrows, inactive tab labels, metadata on dark |
| Slate Grey |
#444444 |
--color-text-muted-light |
Muted text on white sections |
| Hazard Yellow |
#fff100 |
--color-accent |
Primary CTA fill, active status dots and underlines, inline email links, logo-adjacent highlights |
| Signal Green |
#00fd74 |
--color-success |
Validated/complete state text in the agent run timeline |
| Mint Plate |
#d1ffca |
--color-accent-soft |
Soft tinted plate behind product/illustration imagery in light sections |
Semantic roles
| Role |
Value |
| background |
#000000 |
| surface |
#0b0b0b |
| surface raised |
#1a1a1a |
| border |
rgba(255,255,255,0.16) |
| text |
#ffffff |
| text muted |
#979797 |
| primary |
#fff100 |
| primary text |
#000000 |
| accent |
#d1ffca |
| success |
#00fd74 |
| warning |
#fff100 |
| danger |
#ff6838 |
Tokens — Typography
- Display: SuisseIntlCond (700) — fallbacks: Oswald, Archivo Narrow, Arial Narrow, sans-serif. Only ever used at 700 for headlines, stat numbers and card titles; always tight (-0.03em to -0.04em) with line-height 0.8–0.9. Set in sentence case or caps depending on section — hero uses caps.
- Body: SuisseIntl (400, 450, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. All paragraphs, nav links and button labels. 450/500 for emphasis lines like 'Production ready in 48 hours.'
- Mono: SuisseIntlMono (400, 500) — fallbacks: IBM Plex Mono, JetBrains Mono, ui-monospace, monospace. Uppercase eyebrows, demo-panel labels, step names (REQUEST / UNDERSTAND / EXECUTE), playback chips. Always tracked out ~0.08em at 11–13px.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display |
130px |
0.9 |
700 |
-0.03em |
display |
| H1 / Hero |
65px |
0.8 |
700 |
-0.04em |
display |
| H2 Section |
80px |
0.9 |
700 |
-0.03em |
display |
| H3 Card Title |
32px |
0.9 |
700 |
-0.03em |
display |
| Lead |
28px |
1.3 |
500 |
-0.03em |
body |
| Body |
16px |
1.5 |
400 |
normal |
body |
| Small / UI |
14px |
1.4 |
400 |
normal |
body |
| Mono Label |
12px |
1.2 |
500 |
0.08em |
mono |
Tokens — Spacing & Layout
- Base unit: 8px
- Density: comfortable
- Container max width: 1232px
- Section gap: 120px
- Card padding: 24px
- Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px, 120px
Tokens — Radius
| Element |
Value |
| Pill button / nav capsule / status chip |
99px |
| Card, demo panel, blog tile |
16px |
| Inner panel / overlay callout |
12px |
| Input, select, pagination tile |
6px |
| Micro tags and progress bars |
4px |
| Section top edge (white block over black) |
64px |
Tokens — Shadows
| Name |
Value |
Usage |
| none |
none |
The system uses no drop shadows anywhere — depth comes from near-black surface steps (#000 → #0b0b0b → #1a1a1a) and 1px translucent white hairlines. |
Components
Primary CTA (yellow pill) (button)
| Property |
Value |
| background |
#fff100 |
| color |
#000000 |
| border |
none |
| radius |
99px |
| padding |
0 22px |
| font size |
16px |
| font weight |
500 |
| shadow |
none |
| hover |
slight brightness drop / arrow glyph nudges 2px right; keep fill yellow |
48px tall, label in SuisseIntl 500 followed by a '→' glyph with ~8px gap. Used once per viewport: 'Schedule a Demo', 'Calculate your savings', 'Plan your implementation'.
Ghost text link button (button)
| Property |
Value |
| background |
transparent |
| color |
#ffffff |
| border |
none |
| radius |
0px |
| padding |
0 |
| font size |
16px |
| font weight |
500 |
| shadow |
none |
| hover |
underline or arrow translate; no fill |
44px hit area, sits immediately right of the yellow CTA with a trailing arrow ('See Hero complete real work →', 'Watch the build ↓'). On white sections the colour flips to #000000.
Demo control chip (button)
| Property |
Value |
| background |
rgba(0,0,0,0.72) |
| color |
#ffffff |
| border |
1px solid rgba(255,255,255,0.28) |
| radius |
99px |
| padding |
0 14px |
| font size |
12px |
| font weight |
400 |
| shadow |
none |
| hover |
border to rgba(255,255,255,0.42) |
44px tall mono-set controls floating over the product demo: PAUSE, PLAY, REPLAY, 1.5× PLAYBACK. Uppercase SuisseIntlMono.
Dark panel card (card)
| Property |
Value |
| background |
#0b0b0b |
| color |
#ffffff |
| border |
1px solid rgba(255,255,255,0.16) |
| radius |
16px |
| padding |
24px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
border lifts to rgba(255,255,255,0.28) |
The workhorse container for demo panels and feature blocks. Variants: transparent fill with rgba(255,255,255,0.14) border at 32px padding; rgba(0,0,0,0.55) overlay card at 12px radius / 28px padding.
Light content card (card)
| Property |
Value |
| background |
#ffffff |
| color |
#000000 |
| border |
1px solid #e5e5e5 |
| radius |
16px |
| padding |
24px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
image plate tint deepens; arrow badge stays black |
Blog/case-study tiles: #f3f3f3 image plate on the left, condensed-caps title at 32px/0.9, 14px body, a round black arrow badge top-right and a small source chip at the bottom.
Search / select input (input)
| Property |
Value |
| background |
#ffffff |
| color |
#000000 |
| border |
1px solid #e5e5e5 |
| radius |
6px |
| padding |
0 12px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
border #c6c6c6; focus border #000000 |
40px tall, leading magnifier or trailing chevron icon in #979797, placeholder text in #979797. Only appears in the light filter sidebars.
Floating pill nav (nav)
| Property |
Value |
| background |
rgba(26,26,26,0.9) |
| color |
#ffffff |
| border |
none |
| radius |
99px |
| padding |
0 10px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
80px fixed transparent header; the links live inside a centred dark capsule with ~14px horizontal padding per item. Inactive links #b5b5b5, active link #ffffff. Logo sits far left, yellow CTA far right.
Mono status badge (badge)
| Property |
Value |
| background |
transparent |
| color |
#979797 |
| border |
none |
| radius |
0px |
| padding |
0 |
| font size |
12px |
| font weight |
500 |
| shadow |
none |
| hover |
none |
Uppercase mono labels with a leading state glyph: filled yellow half-circle = in progress, yellow dot = live, outlined circle in #979797 = pending, #00fd74 check = validated. The active one goes #ffffff with a 2px #fff100 underline.
Layout
Fixed 80px transparent header with a centred pill nav and a right-aligned yellow CTA. Hero is a two-column split: left column ~50% holding a mono eyebrow, a giant condensed headline stacked in white then grey, a 16px lead paragraph, a hairline-bounded fact block, then CTA row; right column is a full-bleed product demo panel that runs off the right edge of the viewport. Below the hero, horizontal hairlines segment the tab row and a 'PARTNERED WITH' logo strip. Deeper pages alternate black hero blocks with white content blocks joined by a 64px rounded top corner. Content grids are 2–3 column card layouts with an optional 240px light filter sidebar; text measure stays around 520–835px.
Imagery
Two registers. First: in-product screenshots of Oracle/Workday/SAP consoles embedded in dark rounded panels with mono chrome, step timelines and live status dots — the demo is the hero image. Second: editorial card art — 3D-rendered isometric objects (gears, pie charts, robots) on flat #f3f3f3 or #d1ffca plates, plus AI-illustrated scenes for blog posts. Partner logos are rendered monochrome white on black at small scale.
Motion
Restrained and instrumental: the hero demo auto-plays a scripted agent run with step labels advancing (REQUEST → UNDERSTAND → EXECUTE → VALIDATE), playback speed and pause controls exposed. Arrow glyphs in buttons translate a few pixels on hover; progress underlines in #fff100 grow along the active tab; status glyphs fill rather than spin. No parallax, no entrance bounce.
Responsive
Below ~900px the pill nav collapses to a hamburger at far left with the logo beside it and the yellow 'Schedule a Demo' pill pinned top-right at full 48px height. Tapping the burger opens a full-screen black overlay menu: top-level items in SuisseIntl ~24px white with a trailing '→', sub-items listed beneath in #979797 at the same size, generous 40px group gaps, and a closing contact block with the email in #fff100. The hero stacks to a single column — the demo panel drops below or is omitted, the headline reflows to 4–8 short lines at ~56px with 0.85 line-height (words may break rather than shrink), the lead paragraph widens to full gutter width, and the CTA becomes a full-width yellow pill with the ghost link stacked below it. Horizontal padding tightens to ~24px, section gaps drop from ~120px to ~64px, and card grids become one column.
Do
- Set every headline in SuisseIntlCond 700 at 0.8–0.9 line-height with -0.03em to -0.04em tracking; let lines nearly touch.
- Use the two-tone headline trick: lead clause in #ffffff, trailing clause in #b5b5b5 for emphasis contrast.
- Reserve #fff100 for exactly one primary action per viewport plus tiny status indicators — never as a large background.
- Label everything technical in uppercase SuisseIntlMono at 11–13px with ~0.08em tracking (eyebrows, step names, panel headers).
- Build depth with 1px rgba(255,255,255,0.14–0.28) hairlines over #0b0b0b panels instead of shadows.
- Pair the yellow pill CTA with a bare text link + arrow; never two filled buttons side by side.
- Let the product demo bleed off the right viewport edge so the dark panel reads as a live window.
Don't
- Don't add drop shadows, glows or gradients — the system has zero shadows and flat fills only.
- Don't introduce a second accent hue; green #00fd74 is a status colour only, and the pastel plates are imagery backdrops.
- Don't set display type in SuisseIntl (non-condensed) or at default line-height — the compression is the identity.
- Don't use rounded corners above 16px on cards; only the pill controls (99px) and section top edges (64px) go further.
- Don't put body copy below 14px or mono labels above 13px.
- Don't centre long-form text — hero and section copy are left-aligned against a hairline grid.
- Don't tint the black ground; keep #000000 pure and step only to #0b0b0b / #1a1a1a for surfaces.
Agent prompt
Build a near-black agentic-AI enterprise site: pure #000000 hero grounds with white content blocks joined by a 64px rounded top edge. Type is three cuts of one family — SuisseIntlCond 700 (fallback Oswald/Archivo Narrow) for all display at 65–130px with line-height 0.8–0.9 and -0.03em/-0.04em tracking, SuisseIntl 400/450/500 (fallback Inter) for 16px/1.5 body, nav links and button labels, and SuisseIntlMono (fallback IBM Plex Mono) for 12px uppercase eyebrows and status labels tracked 0.08em. Hero: mono eyebrow 'SECTION · DESCRIPTOR', a giant condensed-caps headline where the first clause is #ffffff and the second #b5b5b5, a 16px lead, a hairline-bracketed fact pair, then one 48px #fff100 pill CTA (radius 99px, padding 0 22px, black 500-weight label + '→') next to a bare white text link; right half is a product-demo panel on #0b0b0b with a 1px rgba(255,255,255,0.16) border, 16px radius, mono column headers, step chips (yellow dot = live, #00fd74 check = validated) and a rgba(0,0,0,0.72) pill 'PAUSE' control with a rgba(255,255,255,0.28) border. Header is fixed 80px, transparent, with a centred dark #1a1a1a 99px nav capsule (links 16px, inactive #b5b5b5, active #ffffff) and the yellow CTA far right. Light sections use #ffffff ground, #f3f3f3 plates, #e5e5e5 hairlines, #000000 text, #444444 muted; cards are 16px radius with 24px padding, 32px condensed-caps titles and a round black arrow badge. Spacing runs on an 8px base (8/16/24/32/48/64/80/120), container ~1232px, section gap 120px. No shadows anywhere, no gradients, no second accent. On mobile collapse the nav into a full-screen black overlay menu with 24px white top-level items plus grey sub-items and a #fff100 email link, stack the hero, and make the CTA a full-width yellow pill.
CSS custom properties
/* Dayos — Agentic Enterprise Black — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-ink: #000000; /* Hero and section ground, body text on white surfaces, pill-button fill on light pages */
--color-surface-raised-dark: #0b0b0b; /* Raised cards and demo panels sitting on the black ground */
--color-surface-dark-2: #1a1a1a; /* Inner demo chrome, nav pill fill, toolbar strips */
--color-paper: #ffffff; /* Light section ground, headline colour on black, card fill in blog/case-study grids */
--color-surface-light: #f3f3f3; /* Subtle surface on white sections — filter sidebars, image plates, card backgrounds */
--color-border-light: #e5e5e5; /* 1px dividers and input/select borders on white sections */
--color-text-dim: #b5b5b5; /* Secondary headline halves ("NOT BOLTED ONTO IT.") and muted body copy on black */
--color-text-muted: #979797; /* Mono eyebrows, inactive tab labels, metadata on dark */
--color-text-muted-light: #444444; /* Muted text on white sections */
--color-accent: #fff100; /* Primary CTA fill, active status dots and underlines, inline email links, logo-adjacent highlights */
--color-success: #00fd74; /* Validated/complete state text in the agent run timeline */
--color-accent-soft: #d1ffca; /* Soft tinted plate behind product/illustration imagery in light sections */
/* Semantic roles */
--background: #000000;
--surface: #0b0b0b;
--surface-raised: #1a1a1a;
--border: rgba(255,255,255,0.16);
--text: #ffffff;
--text-muted: #979797;
--primary: #fff100;
--primary-text: #000000;
--accent: #d1ffca;
--success: #00fd74;
--warning: #fff100;
--danger: #ff6838;
/* Typography */
--font-display: SuisseIntlCond, Oswald, 'Archivo Narrow', 'Arial Narrow', sans-serif;
--font-body: SuisseIntl, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: SuisseIntlMono, 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--text-display: 130px;
--text-display--line-height: 0.9;
--text-display--letter-spacing: -0.03em;
--text-display--font-weight: 700;
--text-h1-hero: 65px;
--text-h1-hero--line-height: 0.8;
--text-h1-hero--letter-spacing: -0.04em;
--text-h1-hero--font-weight: 700;
--text-h2-section: 80px;
--text-h2-section--line-height: 0.9;
--text-h2-section--letter-spacing: -0.03em;
--text-h2-section--font-weight: 700;
--text-h3-card-title: 32px;
--text-h3-card-title--line-height: 0.9;
--text-h3-card-title--letter-spacing: -0.03em;
--text-h3-card-title--font-weight: 700;
--text-lead: 28px;
--text-lead--line-height: 1.3;
--text-lead--letter-spacing: -0.03em;
--text-lead--font-weight: 500;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-ui: 14px;
--text-small-ui--line-height: 1.4;
--text-small-ui--letter-spacing: normal;
--text-small-ui--font-weight: 400;
--text-mono-label: 12px;
--text-mono-label--line-height: 1.2;
--text-mono-label--letter-spacing: 0.08em;
--text-mono-label--font-weight: 500;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
--space-10: 96px;
--space-11: 120px;
--container: 1232px;
--section-gap: 120px;
/* Radius */
--radius-pill-button-nav-capsule-status-chip: 99px;
--radius-card-demo-panel-blog-tile: 16px;
--radius-inner-panel-overlay-callout: 12px;
--radius-input-select-pagination-tile: 6px;
--radius-micro-tags-and-progress-bars: 4px;
--radius-section-top-edge-white-block-over-black: 64px;
/* Shadows */
--shadow-none: none;
}
Tailwind v4 theme
/* Dayos — Agentic Enterprise Black — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-ink: #000000;
--color-surface-raised-dark: #0b0b0b;
--color-surface-dark-2: #1a1a1a;
--color-paper: #ffffff;
--color-surface-light: #f3f3f3;
--color-border-light: #e5e5e5;
--color-text-dim: #b5b5b5;
--color-text-muted: #979797;
--color-text-muted-light: #444444;
--color-accent: #fff100;
--color-success: #00fd74;
--color-accent-soft: #d1ffca;
--color-background: #000000;
--color-surface: #0b0b0b;
--color-surface-raised: #1a1a1a;
--color-border: rgba(255,255,255,0.16);
--color-text: #ffffff;
--color-text-muted: #979797;
--color-primary: #fff100;
--color-primary-text: #000000;
--color-accent: #d1ffca;
--color-success: #00fd74;
--color-warning: #fff100;
--color-danger: #ff6838;
--font-display: SuisseIntlCond, Oswald, 'Archivo Narrow', 'Arial Narrow', sans-serif;
--font-body: SuisseIntl, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: SuisseIntlMono, 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--text-display: 130px;
--text-display--line-height: 0.9;
--text-display--letter-spacing: -0.03em;
--text-display--font-weight: 700;
--text-h1-hero: 65px;
--text-h1-hero--line-height: 0.8;
--text-h1-hero--letter-spacing: -0.04em;
--text-h1-hero--font-weight: 700;
--text-h2-section: 80px;
--text-h2-section--line-height: 0.9;
--text-h2-section--letter-spacing: -0.03em;
--text-h2-section--font-weight: 700;
--text-h3-card-title: 32px;
--text-h3-card-title--line-height: 0.9;
--text-h3-card-title--letter-spacing: -0.03em;
--text-h3-card-title--font-weight: 700;
--text-lead: 28px;
--text-lead--line-height: 1.3;
--text-lead--letter-spacing: -0.03em;
--text-lead--font-weight: 500;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-ui: 14px;
--text-small-ui--line-height: 1.4;
--text-small-ui--letter-spacing: normal;
--text-small-ui--font-weight: 400;
--text-mono-label: 12px;
--text-mono-label--line-height: 1.2;
--text-mono-label--letter-spacing: 0.08em;
--text-mono-label--font-weight: 500;
--radius-pill-button-nav-capsule-status-chip: 99px;
--radius-card-demo-panel-blog-tile: 16px;
--radius-inner-panel-overlay-callout: 12px;
--radius-input-select-pagination-tile: 6px;
--radius-micro-tags-and-progress-bars: 4px;
--radius-section-top-edge-white-block-over-black: 64px;
--shadow-none: none;
--container-site: 1232px;
}
Theme tokens — light + dark
The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.
/* Dayos — Agentic Enterprise Black — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Both schemes come from the site. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--popover: #ffffff; /* estimated */
--popover-foreground: #000000; /* estimated */
--primary: #fff100;
--primary-foreground: #000000;
--secondary: #f3f3f3;
--secondary-foreground: #000000;
--muted: #f3f3f3;
--muted-foreground: #444444;
--accent: #d1ffca;
--accent-foreground: #000000; /* estimated */
--destructive: #ff6838; /* estimated */
--destructive-foreground: #ffffff; /* estimated */
--border: #e5e5e5;
--input: #e5e5e5;
--ring: #fff100; /* estimated */
--radius-small: 6px;
--radius-medium: 12px;
--radius-large: 16px;
--radius: var(--radius-medium);
--font-display: SuisseIntlCond, Oswald, 'Archivo Narrow', 'Arial Narrow', sans-serif;
--font-body: SuisseIntl, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: SuisseIntlMono, 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.dark {
color-scheme: dark;
--background: #000000;
--foreground: #ffffff;
--card: #0b0b0b;
--card-foreground: #ffffff;
--popover: #1a1a1a;
--popover-foreground: #ffffff;
--primary: #fff100;
--primary-foreground: #000000;
--secondary: #1a1a1a;
--secondary-foreground: #ffffff;
--muted: #1e1e1e;
--muted-foreground: #979797;
--accent: #1a1a1a;
--accent-foreground: #fff100;
--destructive: #ff6838;
--destructive-foreground: #000000;
--border: rgba(255,255,255,0.16);
--input: rgba(255,255,255,0.28);
--ring: #fff100;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-small: var(--radius-small);
--radius-medium: var(--radius-medium);
--radius-large: var(--radius-large);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-mono: var(--font-mono);
}
Dayos — Agentic Enterprise Black — Style Reference
hazard-yellow signal in an ink room
Theme: light · Mood: dark, bold, technical, typographic, monochrome, precise
A near-black enterprise stage where enormous condensed capitals do all the shouting and a single hazard yellow does all the pointing. Hero sections are pure #000000 with white and grey headline stacks set in SuisseIntlCond at 0.8–0.9 line-height, while monospaced micro-labels ("HERO · AGENTIC ENTERPRISE OPERATIONS", "LIVE DEMO ENVIRONMENT") run as tracked-out uppercase tags that make the page read like instrumentation. Content sections below flip to white with a large rounded top edge, so the site alternates between black control room and bright editorial card grid.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Ink Black |
#000000 |
--ink |
Hero and section ground, body text on white surfaces, pill-button fill on light pages |
| Panel Black |
#0b0b0b |
--surface-raised-dark |
Raised cards and demo panels sitting on the black ground |
| Console Grey |
#1a1a1a |
--surface-dark-2 |
Inner demo chrome, nav pill fill, toolbar strips |
| Paper White |
#ffffff |
--paper |
Light section ground, headline colour on black, card fill in blog/case-study grids |
| Mist Grey |
#f3f3f3 |
--surface-light |
Subtle surface on white sections — filter sidebars, image plates, card backgrounds |
| Hairline Grey |
#e5e5e5 |
--border-light |
1px dividers and input/select borders on white sections |
| Dim Grey |
#b5b5b5 |
--text-dim |
Secondary headline halves ("NOT BOLTED ONTO IT.") and muted body copy on black |
| Label Grey |
#979797 |
--text-muted |
Mono eyebrows, inactive tab labels, metadata on dark |
| Slate Grey |
#444444 |
--text-muted-light |
Muted text on white sections |
| Hazard Yellow |
#fff100 |
--accent |
Primary CTA fill, active status dots and underlines, inline email links, logo-adjacent highlights |
| Signal Green |
#00fd74 |
--success |
Validated/complete state text in the agent run timeline |
| Mint Plate |
#d1ffca |
--accent-soft |
Soft tinted plate behind product/illustration imagery in light sections |
Tokens — Typography
- Display: SuisseIntlCond (Oswald, Archivo Narrow, Arial Narrow, sans-serif) — weights 700
- Body: SuisseIntl (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/450/500
- Mono: SuisseIntlMono (IBM Plex Mono, JetBrains Mono, ui-monospace, monospace) — weights 400/500
Tokens — Radius
| Element |
Value |
| Pill button / nav capsule / status chip |
99px |
| Card, demo panel, blog tile |
16px |
| Inner panel / overlay callout |
12px |
| Input, select, pagination tile |
6px |
| Micro tags and progress bars |
4px |
| Section top edge (white block over black) |
64px |
Do
- Set every headline in SuisseIntlCond 700 at 0.8–0.9 line-height with -0.03em to -0.04em tracking; let lines nearly touch.
- Use the two-tone headline trick: lead clause in #ffffff, trailing clause in #b5b5b5 for emphasis contrast.
- Reserve #fff100 for exactly one primary action per viewport plus tiny status indicators — never as a large background.
- Label everything technical in uppercase SuisseIntlMono at 11–13px with ~0.08em tracking (eyebrows, step names, panel headers).
- Build depth with 1px rgba(255,255,255,0.14–0.28) hairlines over #0b0b0b panels instead of shadows.
- Pair the yellow pill CTA with a bare text link + arrow; never two filled buttons side by side.
- Let the product demo bleed off the right viewport edge so the dark panel reads as a live window.
Don't
- Don't add drop shadows, glows or gradients — the system has zero shadows and flat fills only.
- Don't introduce a second accent hue; green #00fd74 is a status colour only, and the pastel plates are imagery backdrops.
- Don't set display type in SuisseIntl (non-condensed) or at default line-height — the compression is the identity.
- Don't use rounded corners above 16px on cards; only the pill controls (99px) and section top edges (64px) go further.
- Don't put body copy below 14px or mono labels above 13px.
- Don't centre long-form text — hero and section copy are left-aligned against a hairline grid.
- Don't tint the black ground; keep #000000 pure and step only to #0b0b0b / #1a1a1a for surfaces.
{
"$name": "Dayos — Agentic Enterprise Black",
"$source": "https://www.dayos.com",
"$theme": "light",
"$generated": "inspiration library",
"color": {
"ink": {
"$type": "color",
"$value": "#000000",
"$description": "Hero and section ground, body text on white surfaces, pill-button fill on light pages"
},
"surface-raised-dark": {
"$type": "color",
"$value": "#0b0b0b",
"$description": "Raised cards and demo panels sitting on the black ground"
},
"surface-dark-2": {
"$type": "color",
"$value": "#1a1a1a",
"$description": "Inner demo chrome, nav pill fill, toolbar strips"
},
"paper": {
"$type": "color",
"$value": "#ffffff",
"$description": "Light section ground, headline colour on black, card fill in blog/case-study grids"
},
"surface-light": {
"$type": "color",
"$value": "#f3f3f3",
"$description": "Subtle surface on white sections — filter sidebars, image plates, card backgrounds"
},
"border-light": {
"$type": "color",
"$value": "#e5e5e5",
"$description": "1px dividers and input/select borders on white sections"
},
"text-dim": {
"$type": "color",
"$value": "#b5b5b5",
"$description": "Secondary headline halves (\"NOT BOLTED ONTO IT.\") and muted body copy on black"
},
"text-muted": {
"$type": "color",
"$value": "#979797",
"$description": "Mono eyebrows, inactive tab labels, metadata on dark"
},
"text-muted-light": {
"$type": "color",
"$value": "#444444",
"$description": "Muted text on white sections"
},
"accent": {
"$type": "color",
"$value": "#fff100",
"$description": "Primary CTA fill, active status dots and underlines, inline email links, logo-adjacent highlights"
},
"success": {
"$type": "color",
"$value": "#00fd74",
"$description": "Validated/complete state text in the agent run timeline"
},
"accent-soft": {
"$type": "color",
"$value": "#d1ffca",
"$description": "Soft tinted plate behind product/illustration imagery in light sections"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#000000"
},
"surface": {
"$type": "color",
"$value": "#0b0b0b"
},
"surface_raised": {
"$type": "color",
"$value": "#1a1a1a"
},
"border": {
"$type": "color",
"$value": "rgba(255,255,255,0.16)"
},
"text": {
"$type": "color",
"$value": "#ffffff"
},
"text_muted": {
"$type": "color",
"$value": "#979797"
},
"primary": {
"$type": "color",
"$value": "#fff100"
},
"primary_text": {
"$type": "color",
"$value": "#000000"
},
"accent": {
"$type": "color",
"$value": "#d1ffca"
},
"success": {
"$type": "color",
"$value": "#00fd74"
},
"warning": {
"$type": "color",
"$value": "#fff100"
},
"danger": {
"$type": "color",
"$value": "#ff6838"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"SuisseIntlCond",
"Oswald",
"Archivo Narrow",
"Arial Narrow",
"sans-serif"
],
"$description": "Only ever used at 700 for headlines, stat numbers and card titles; always tight (-0.03em to -0.04em) with line-height 0.8–0.9. Set in sentence case or caps depending on section — hero uses caps."
},
"body": {
"$type": "fontFamily",
"$value": [
"SuisseIntl",
"Inter",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "All paragraphs, nav links and button labels. 450/500 for emphasis lines like 'Production ready in 48 hours.'"
},
"mono": {
"$type": "fontFamily",
"$value": [
"SuisseIntlMono",
"IBM Plex Mono",
"JetBrains Mono",
"ui-monospace",
"monospace"
],
"$description": "Uppercase eyebrows, demo-panel labels, step names (REQUEST / UNDERSTAND / EXECUTE), playback chips. Always tracked out ~0.08em at 11–13px."
}
},
"typography": {
"display": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "130px",
"lineHeight": "0.9",
"fontWeight": 700,
"letterSpacing": "-0.03em"
}
},
"h1-hero": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "65px",
"lineHeight": "0.8",
"fontWeight": 700,
"letterSpacing": "-0.04em"
}
},
"h2-section": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "80px",
"lineHeight": "0.9",
"fontWeight": 700,
"letterSpacing": "-0.03em"
}
},
"h3-card-title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "32px",
"lineHeight": "0.9",
"fontWeight": 700,
"letterSpacing": "-0.03em"
}
},
"lead": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "28px",
"lineHeight": "1.3",
"fontWeight": 500,
"letterSpacing": "-0.03em"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"small-ui": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "1.4",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"mono-label": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "12px",
"lineHeight": "1.2",
"fontWeight": 500,
"letterSpacing": "0.08em"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px"
},
"2": {
"$type": "dimension",
"$value": "8px"
},
"3": {
"$type": "dimension",
"$value": "12px"
},
"4": {
"$type": "dimension",
"$value": "16px"
},
"5": {
"$type": "dimension",
"$value": "24px"
},
"6": {
"$type": "dimension",
"$value": "32px"
},
"7": {
"$type": "dimension",
"$value": "48px"
},
"8": {
"$type": "dimension",
"$value": "64px"
},
"9": {
"$type": "dimension",
"$value": "80px"
},
"10": {
"$type": "dimension",
"$value": "96px"
},
"11": {
"$type": "dimension",
"$value": "120px"
}
},
"radius": {
"pill-button-nav-capsule-status-chip": {
"$type": "dimension",
"$value": "99px"
},
"card-demo-panel-blog-tile": {
"$type": "dimension",
"$value": "16px"
},
"inner-panel-overlay-callout": {
"$type": "dimension",
"$value": "12px"
},
"input-select-pagination-tile": {
"$type": "dimension",
"$value": "6px"
},
"micro-tags-and-progress-bars": {
"$type": "dimension",
"$value": "4px"
},
"section-top-edge-white-block-over-black": {
"$type": "dimension",
"$value": "64px"
}
},
"shadow": {
"none": {
"$type": "shadow",
"$value": "none",
"$description": "The system uses no drop shadows anywhere — depth comes from near-black surface steps (#000 → #0b0b0b → #1a1a1a) and 1px translucent white hairlines."
}
},
"component": {
"primary-cta-yellow-pill": {
"kind": "button",
"background": "#fff100",
"color": "#000000",
"border": "none",
"radius": "99px",
"padding": "0 22px",
"font_size": "16px",
"font_weight": 500,
"shadow": "none",
"hover": "slight brightness drop / arrow glyph nudges 2px right; keep fill yellow",
"notes": "48px tall, label in SuisseIntl 500 followed by a '→' glyph with ~8px gap. Used once per viewport: 'Schedule a Demo', 'Calculate your savings', 'Plan your implementation'."
},
"ghost-text-link-button": {
"kind": "button",
"background": "transparent",
"color": "#ffffff",
"border": "none",
"radius": "0px",
"padding": "0",
"font_size": "16px",
"font_weight": 500,
"shadow": "none",
"hover": "underline or arrow translate; no fill",
"notes": "44px hit area, sits immediately right of the yellow CTA with a trailing arrow ('See Hero complete real work →', 'Watch the build ↓'). On white sections the colour flips to #000000."
},
"demo-control-chip": {
"kind": "button",
"background": "rgba(0,0,0,0.72)",
"color": "#ffffff",
"border": "1px solid rgba(255,255,255,0.28)",
"radius": "99px",
"padding": "0 14px",
"font_size": "12px",
"font_weight": 400,
"shadow": "none",
"hover": "border to rgba(255,255,255,0.42)",
"notes": "44px tall mono-set controls floating over the product demo: PAUSE, PLAY, REPLAY, 1.5× PLAYBACK. Uppercase SuisseIntlMono."
},
"dark-panel-card": {
"kind": "card",
"background": "#0b0b0b",
"color": "#ffffff",
"border": "1px solid rgba(255,255,255,0.16)",
"radius": "16px",
"padding": "24px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "border lifts to rgba(255,255,255,0.28)",
"notes": "The workhorse container for demo panels and feature blocks. Variants: transparent fill with rgba(255,255,255,0.14) border at 32px padding; rgba(0,0,0,0.55) overlay card at 12px radius / 28px padding."
},
"light-content-card": {
"kind": "card",
"background": "#ffffff",
"color": "#000000",
"border": "1px solid #e5e5e5",
"radius": "16px",
"padding": "24px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "image plate tint deepens; arrow badge stays black",
"notes": "Blog/case-study tiles: #f3f3f3 image plate on the left, condensed-caps title at 32px/0.9, 14px body, a round black arrow badge top-right and a small source chip at the bottom."
},
"search-select-input": {
"kind": "input",
"background": "#ffffff",
"color": "#000000",
"border": "1px solid #e5e5e5",
"radius": "6px",
"padding": "0 12px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "border #c6c6c6; focus border #000000",
"notes": "40px tall, leading magnifier or trailing chevron icon in #979797, placeholder text in #979797. Only appears in the light filter sidebars."
},
"floating-pill-nav": {
"kind": "nav",
"background": "rgba(26,26,26,0.9)",
"color": "#ffffff",
"border": "none",
"radius": "99px",
"padding": "0 10px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"notes": "80px fixed transparent header; the links live inside a centred dark capsule with ~14px horizontal padding per item. Inactive links #b5b5b5, active link #ffffff. Logo sits far left, yellow CTA far right."
},
"mono-status-badge": {
"kind": "badge",
"background": "transparent",
"color": "#979797",
"border": "none",
"radius": "0px",
"padding": "0",
"font_size": "12px",
"font_weight": 500,
"shadow": "none",
"hover": "none",
"notes": "Uppercase mono labels with a leading state glyph: filled yellow half-circle = in progress, yellow dot = live, outlined circle in #979797 = pending, #00fd74 check = validated. The active one goes #ffffff with a 2px #fff100 underline."
}
}
}
New
