---
title: "Dayos design system"
variant: extended
source: https://www.dayos.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/dayos-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dayos · Design System

> Enterprise AI with a bold editorial edge

**Theme:** light · **Industry:** ai · **Source:** https://www.dayos.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dayos pairs a restrained grey canvas with oversized black typography and a dimensional 3D hero illustration. The result feels direct and editorial, using a compact navigation and generous open space to keep attention on the headline.

## North star

Let oversized, condensed black typography lead on a quiet grey canvas, while keeping interface controls restrained and imagery dimensional.

## Overview

The homepage is anchored by a soft light-grey canvas (#e5e5e5), with black (#000000) doing the heavy lifting for the oversized, all-caps hero headline. White (#ffffff) appears in the pill-shaped navigation field and as a clean supporting surface; a lighter grey (#f3f3f3) provides subtle surface variation. The visual identity comes from typography and composition rather than a saturated brand accent. A large, tightly stacked headline occupies the left side of the hero, balanced by a rendered, dimensional object on the right. Its vivid yellow, magenta, and green details belong to the illustration, not the measured interface palette. Body copy is compact and readable beneath the headline. The header keeps the brand mark, centered navigation, and dark demo CTA distinct without adding visual clutter. Spacious margins and restrained interface styling let the headline and product imagery carry the page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Concrete | `#e5e5e5` | `--color-soft-concrete` | brand | Dominant page canvas behind the navigation and hero; the quiet grey foundation for the high-contrast layout. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation pill and clean surface details; also appears in the rendered hero object. |
| Headline Ink | `#000000` | `--color-headline-ink` | semantic | Hero headline, brand mark, primary text, and dark Schedule a Demo CTA. |
| Quiet Charcoal | `#444444` | `--color-quiet-charcoal` | neutral | Secondary navigation labels and other muted interface text. |
| Soft Graphite | `#979797` | `--color-soft-graphite` | neutral | Subdued navigation text in less prominent or inactive states. |
| Cloud Surface | `#f3f3f3` | `--color-cloud-surface` | surface | Light navigation surface variation against the grey canvas. |
| Near-Black Surface | `#1a1a1a` | `--color-near-black-surface` | surface | Dark inverse surface detail in the navigation styling. |

### Semantic aliases

`--color-canvas` → `#e5e5e5` (Soft Concrete) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f3f3f3` (Cloud Surface) · `--color-surface-3` → `#1a1a1a` (Near-Black Surface) · `--color-text` → `#000000` (Headline Ink) · `--color-text-muted` → `#444444` (Quiet Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#1a1a1a` | 1.21:1 | fail |
| `#444444` | `#e5e5e5` | 7.73:1 | AAA |
| `#444444` | `#ffffff` | 9.74:1 | AAA |
| `#444444` | `#f3f3f3` | 8.78:1 | AAA |
| `#444444` | `#1a1a1a` | 1.79:1 | fail |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SuisseIntl | `--font-body` | webfont | 500, 400 | Body copy, navigation, captions, and supporting interface text. | Inter |
| SuisseIntlCond | `--font-display` | webfont | 700 | Display headlines, especially the stacked hero statement. | Roboto Condensed |

- **SuisseIntl:** Use regular and medium weights; keep supporting text neutral, compact, and mostly sentence case.
- **SuisseIntlCond:** Use bold, uppercase display lettering with tight negative tracking and compressed line spacing.

### Type scale — Custom (ratio ≈ 6.5, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 130px | 700 | 0.9 | -0.03em | uppercase | SuisseIntlCond | Large uppercase, tightly stacked hero headline. |
| body | 20px | 400 | 1.2 | 0 | — | SuisseIntl | Supporting hero paragraph beneath the main headline. |
| caption | 14px | 500 | 1.3 | -0.01em | — | SuisseIntl | Small supporting labels and compact secondary text. |
| nav | 14px | 500 | 1.3 | -0.01em | — | SuisseIntl | Compact, medium-weight navigation links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 16, 24 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width —.

Build the first viewport as a spacious two-part hero: oversized headline and supporting copy aligned left, dimensional product artwork to the right. Keep the brand mark at the left of a compact top navigation, with links centered in a white pill and the dark demo CTA at the far right. Preserve broad open areas around the content and clear separation between header and hero. Use a restrained, editorial rhythm rather than dense cards or boxed content; the measured spacing system is based on an 8px unit with a spacious section gap.

## Shape & elevation

- Radius: nav `9999px` · xs `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is mostly flat: the measured data reports no shadows and no border palette. Rely on contrast and surface changes rather than outlines. The rounded white navigation field and dark CTA provide the main layer separation; the hero render supplies depth through its own lighting, materials, and overlapping forms.

## Imagery

Use a large, polished 3D-rendered object as the hero counterweight to the headline. The composition is cropped close enough to feel substantial while remaining isolated against the grey canvas. Its bright yellow, magenta, and green elements are illustrative product details, not interface accents. Keep the render dimensional and tactile, with visible material contrast and no enclosing card.

## Components

### Header

Place the Dayos mark at the left, compact navigation links centrally in a white pill, and a black Schedule a Demo CTA at the right.

### Navigation links

Use SuisseIntl medium at the measured 14px nav size, with muted charcoal text and restrained spacing.

### Primary CTA

A dark, pill-like Schedule a Demo control with white label text; keep it visually distinct from the unboxed links.

### Hero headline

Set the core statement in bold SuisseIntlCond, uppercase, with measured 130px display size, tight line-height, and negative tracking.

### Hero supporting copy

Set a short paragraph under the headline in SuisseIntl regular at the measured 20px body size and compact line-height.

### Hero product render

Use a prominent, dimensional 3D composition on the right; vivid colors belong to the artwork rather than interface controls.

### Measured component styles

- **Primary button** (“Platform”): transparent background · text #444444 · radius 0px · padding 0px 16px · 500 14px SuisseIntl
- **Navigation item** (“Platform”): transparent background · text #444444 · radius 0px · padding 0px · 500 14px SuisseIntl

## Do

- Lead with one oversized uppercase headline.
- Use the grey canvas as the dominant page background.
- Keep the navigation compact and visually quiet.
- Balance left-aligned copy with large right-side imagery.
- Use black for the headline and primary CTA.
- Preserve generous open space around the hero.

## Don't

- Do not turn the layout into a dense dashboard.
- Do not introduce unmeasured interface accent colors.
- Do not place the hero content inside a heavy card.
- Do not use a wide, light-weight display headline.
- Do not add decorative shadows or borders without evidence.
- Do not mistake illustration colors for brand UI colors.

## Agent prompt

Build a new Dayos-style SaaS page with a restrained editorial composition. Use Soft Concrete (#e5e5e5) as the main canvas, Headline Ink (#000000) for high-impact text and primary actions, and Gallery White (#ffffff) for a quiet navigation surface. Set the display statement in a bold condensed sans, uppercase, tightly tracked, and visually dominant. Use a compact SuisseIntl-like sans for navigation and supporting copy. Arrange copy on the left and a substantial, dimensional product render on the right, leaving generous negative space between regions. Keep navigation links understated and make the demo action dark and clear. Treat vivid colors inside 3D artwork as illustrative details, not new interface accents. Avoid card-heavy layouts, ornamental borders, and unnecessary shadows.

## Source CSS custom properties (selected)

```css
--cl-bg1: #fff;
--cl-bg2: #f3f3f3;
--cl-color1: #000;
--cl-color2: #000;
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-in-back: cubic-bezier(.6, -.28, .735, .045);
--ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
--ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
--grid-column-gap: 2.4rem;
--rounded-margin: 6.4rem;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dayos-com