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

# Daylit · Design System

> Warm enterprise clarity with a confident burgundy core.

**Theme:** light · **Industry:** ai · **Source:** https://www.daylit.com/?dl=anon_786rf1srmv4uh384 · **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._

Daylit pairs a quiet white canvas and warm neutral imagery with deep burgundy typography and action areas. Oversized editorial headlines, proof-rich product visuals, and a restrained lemon accent make the AI finance platform feel approachable and enterprise-ready.

## North star

Keep the interface airy and editorial, using burgundy for hierarchy and action while reserving bright accents for small moments of attention.

## Overview

The page is built on a predominantly white canvas, with deep burgundy (#4d1520) carrying the brand voice across headlines, navigation, links, buttons, and the prominent dark feature and closing CTA bands. Warm off-white (#f2eee7) appears in subtle surfaces, fine borders, and the softly textured hero media; the pale lemon (#faffa7) is a small, high-contrast marker used for announcement and icon details, not a broad background. Tt Commons Pro Variable creates a friendly editorial hierarchy: large, tightly tracked headlines contrast with compact mono labels in Geist Mono. The wide page uses alternating two-column feature rows, centered proof sections, and multi-column content grids with generous white space. Photography and embedded finance-product interfaces make the AI story concrete. Cards remain visually quiet; separation comes from spacing, light hairlines, and rounded controls rather than heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and clean negative space surrounding every major section. |
| Daylit Burgundy | `#4d1520` | `--color-daylit-burgundy` | brand | Primary headings, navigation, links, primary buttons, and deep feature and CTA bands. |
| Muted Rosewood | `#825b63` | `--color-muted-rosewood` | semantic | Body copy and supporting text, softening contrast against the white canvas. |
| Oat Linen | `#f2eee7` | `--color-oat-linen` | surface | Subtle surface fills and thin borders, including restrained interface details. |
| Dusty Parchment | `#d3cac3` | `--color-dusty-parchment` | semantic | Low-emphasis muted text and secondary details. |
| Porcelain Cream | `#fbf9f6` | `--color-porcelain-cream` | surface | Soft input fill and very light interface surfaces. |
| Mulberry Edge | `#662f3d` | `--color-mulberry-edge` | brand | Occasional burgundy-toned borders and outlines; subordinate to the main brand burgundy. |
| Mauve Haze | `#a1848a` | `--color-mauve-haze` | semantic | Low-emphasis secondary text; not a defining surface color. |
| Lemon Signal | `#faffa7` | `--color-lemon-signal` | accent | Small announcement strip and button or interface icon highlights; keep it limited to accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#4d1520` (Daylit Burgundy) · `--color-surface-2` → `#f2eee7` (Oat Linen) · `--color-text` → `#4d1520` (Daylit Burgundy) · `--color-text-muted` → `#825b63` (Muted Rosewood) · `--color-text-subtle` → `#d3cac3` (Dusty Parchment) · `--color-border` → `#f2eee7` (Oat Linen)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4d1520` | `#ffffff` | 14.55:1 | AAA |
| `#4d1520` | `#f2eee7` | 12.58:1 | AAA |
| `#825b63` | `#ffffff` | 5.79:1 | AA |
| `#825b63` | `#4d1520` | 2.51:1 | fail |
| `#825b63` | `#f2eee7` | 5.01:1 | AA |
| `#d3cac3` | `#ffffff` | 1.61:1 | fail |
| `#d3cac3` | `#4d1520` | 9.01:1 | AAA |
| `#d3cac3` | `#f2eee7` | 1.4:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(255, 255, 255), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Tt Commons Pro Variable | `--font-body` | webfont | 500, 600, 400 | Display, headings, navigation, body copy, captions, and most controls. | DM Sans |
| Geist Mono | `--font-mono` | webfont | 400, 500 | Compact uppercase labels and report-style badges. | Space Mono |

- **Tt Commons Pro Variable:** Variable sans with measured 400–600 weights; large headlines use tight negative tracking, while body and navigation remain sentence case.
- **Geist Mono:** Use sparingly for small metadata; uppercase treatment lends a technical, finance-dashboard feel.

### Type scale — Perfect Fourth (ratio ≈ 1.373, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.2 | -0.01em | — | Tt Commons Pro Variable | Large promotional or section display headlines. |
| h1 | 56px | 600 | 1.15 | -0.015em | — | Tt Commons Pro Variable | Primary hero headline and lead page title. |
| h2 | 48px | 500 | 1.2 | -0.01em | — | Tt Commons Pro Variable | Major section headings and high-level content titles. |
| h3 | 40px | 600 | 1.2 | -0.04em | — | Tt Commons Pro Variable | Feature, FAQ, and editorial card headings. |
| body | 18px | 500 | 1.5 | 0 | — | Tt Commons Pro Variable | Explanatory copy, value propositions, and descriptions. |
| caption | 16px | 500 | 1.5 | 0 | — | Tt Commons Pro Variable | Compact supporting text and card details. |
| nav | 18px | 500 | 1.33 | 0 | — | Tt Commons Pro Variable | Header navigation and prominent text links. |
| code | 14px | 400 | 1.71 | 0 | uppercase | Geist Mono | Uppercase eyebrow labels and report-style metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 14, 16, 20, 24, 32, 48, 58, 60, 80 px.
- Section rhythm 80px · element gap 12px · card padding — · max content width 1320px.

The page follows a wide, comfortable layout with a measured maximum width of 1320px. A compact announcement strip and horizontal navigation lead into an asymmetric two-column hero. Subsequent sections alternate centered proof moments, two-column feature splits, a three-column value grid, FAQ and editorial layouts, then a full-width closing CTA and multi-column footer. Maintain generous vertical separation, with an 80px measured section gap and 12px element gap as recurring references. Align most content to the left; reserve centered alignment for section introductions and CTA content.

## Shape & elevation

- Radius: button `6px` · input `6px` · media `6px` · badge `9999px` · nav `6px` · link `6px` · xs `2px` · sm `6px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with whitespace and pale hairlines separating content rather than conspicuous shadows. Use measured 6px rounding for buttons, inputs, navigation, and media, and pill-shaped badges. Layer small finance-status UI panels over photography or textured media sparingly; reserve deep burgundy fills for clearly distinct feature and CTA bands.

## Imagery

Use warm, natural-light photography of people working with phones and laptops, paired with realistic product interface overlays and finance dashboard screens. The hero media is a broad, softly textured pale surface with a floating payment-status element; product screenshots should feel embedded in real workflows rather than presented as abstract illustration. Keep framing restrained and rounded, with soft cream tones and burgundy details. Small decorative marks can use the lemon accent, but photography and product UI remain the focus.

## Components

### Announcement strip

A narrow pale lemon notice band above navigation with compact text, a Read more link, and a small utility icon.

### Primary CTA

Deep burgundy button with light text and a small lemon icon tile; use the measured 6px radius and restrained padding.

### Feature split

Alternating image-and-copy columns with a mono eyebrow, prominent heading, muted paragraph, and paired action links.

### Report badge

Uppercase Geist Mono label with burgundy text, pale border, and pill-shaped outline.

### Product proof card

Photographic or pale interface panel layered with a compact invoice, forecast, or customer-status overlay.

### FAQ accordion

Open, text-led question list with burgundy questions, understated separators, and concise explanatory answers.

### Dark CTA band

Centered light headline and supporting copy on a broad burgundy surface, ending with a lemon-accented action.

### Measured component styles

- **Primary button** (“Get financial insights”): background #4d1520 · text #f2eee7 · radius 6px · padding 0px 16px · 500 16px Tt Commons Pro Variable
- **Link** (“Read more”): transparent background · text #4d1520 · radius 0px · padding 0px · 500 18px Tt Commons Pro Variable
- **Input**: background #fbf9f6 · text #825b63 · border 1px solid #f2eee7 · radius 6px · padding 0px 16px · 400 16px Tt Commons Pro Variable
- **Badge** (“REPORT”): transparent background · text #4d1520 · border 1px solid #f2eee7 · radius 999px · padding 4px 8px · 500 14px Geist Mono · uppercase
- **Navigation item** (“Product Capital Industries Resources Cus”): transparent background · text #4d1520 · radius 0px · padding 0px · 500 18px Tt Commons Pro Variable

## Do

- Use white space to give every section a calm, readable rhythm.
- Set primary text and actions in Daylit Burgundy (#4d1520).
- Keep Lemon Signal (#faffa7) to small markers and action details.
- Pair feature copy with relevant photography or real-looking product UI.
- Use mono uppercase text for short labels, not paragraphs.
- Separate content with pale hairlines and spacing rather than heavy cards.

## Don't

- Do not turn the pale yellow accent into a large background field.
- Do not add gradients, heavy shadows, or decorative borders without evidence.
- Do not make every section a card or use dense dashboard layouts throughout.
- Do not use bright saturated colors that compete with burgundy.
- Do not set long-form body copy in mono or all caps.
- Do not crowd the hero with multiple competing messages.

## Agent prompt

Build a new Daylit-style SaaS page with a wide, airy white canvas (#ffffff), warm supporting surfaces (#f2eee7, #fbf9f6), and a clear burgundy hierarchy (#4d1520). Use Tt Commons Pro Variable or DM Sans for the main interface, with Geist Mono or Space Mono for compact uppercase labels. Create an editorial hero with a large headline, concise supporting copy, and one dominant burgundy CTA; use Lemon Signal (#faffa7) only for small icons or notices. Structure the page with alternating two-column feature sections, proof content, restrained grids, and a strong closing CTA band. Use warm human photography and realistic finance-product UI overlays. Keep controls softly rounded, borders faint, and elevation minimal. Prioritize readable copy and generous whitespace over ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric two-column headline and copy above broad, full-bleed hero media. | Primary demo CTA, ROI calculator link, Floating payment-status proof | Large burgundy headline, Mono eyebrow, Pale textured media, Lemon icon accents |
| 2 | testimonials | Enterprise proof logos and customer-result content arranged across a multi-column area. | Customer case-study links, Outcome-led testimonial | Logo cloud, Prominent metric card, Photo-backed proof |
| 3 | other | Centered section introduction with a short explanatory paragraph. | Rapid onboarding reassurance | Mono section eyebrow, Centered heading, Open whitespace |
| 4 | feature-split | Two-column feature row pairing contextual media with copy and actions. | Demo CTA, Meet the AI agents link | Photo with interface overlay, Left-right split, Compact mono label |
| 5 | feature-split | Alternating two-column feature row with copy opposite its product image. | Demo CTA, Related product link | Customer-priority interface, Alternating alignment, Burgundy heading |
| 6 | feature-split | Two-column feature row combining finance-workflow imagery and explanatory copy. | Demo CTA, Meet the AI agents link | Forecast UI overlay, Warm photographic media, Text-led feature |
| 7 | feature-grid | Deep burgundy feature band with a centered introduction and three-column, multi-row content. | Scannable benefit overview | Light text on dark surface, Product UI tiles, Subtle internal dividers |
| 8 | faq | Two-column block with introductory copy and actions beside a question-and-answer list. | Expandable questions, Demo and FAQ links | Text-led accordion, Fine separators, Open white canvas |
| 9 | content-feed | Editorial introduction followed by three article cards and a wide product interface visual. | View all insights, Article discovery | Three-column article cards, Photography thumbnails, Author and date metadata |
| 10 | other | A wide standalone product image centered between editorial content and the final CTA. | Product capability preview | Large pale dashboard visual, Minimal surrounding chrome |
| 11 | cta | Centered headline, supporting sentence, and single action in a full-width dark band. | Book-a-demo conversion | Burgundy background, Light typography, Lemon-accented button |
| 12 | footer | Multi-column footer with contact details, newsletter form, link groups, and a lower legal row. | Email newsletter signup, Contact links, Utility and legal navigation | Compact link columns, Small form controls, Fine divider |

## Source CSS custom properties (selected)

```css
--_typography---text--body-main--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_color-schemes---text--text-primary: #4d1520;
--_typography---text--body-main--font-size: 1.125rem;
--_typography---text--body-main--line-height: 133%;
--_typography---font-weight--display-500: 500;
--_typography---text--body-main--letter-spacing: 0px;
--_typography---headings--h1--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h1--font-size: 4.75rem;
--_typography---headings--h1--font-weight: 500;
--_typography---headings--h1--letter-spacing: -.02em;
--_typography---font-family--display-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h2--font-size: 3.5rem;
--_typography---headings--h2--letter-spacing: -.015em;
--_typography---headings--h3--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h3--font-size: 2.75rem;
--_typography---headings--h3--font-weight: 500;
--_typography---headings--h3--letter-spacing: -.0125em;
--_typography---headings--h4--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h4--font-size: 2rem;
--_typography---headings--h4--font-weight: 500;
--_typography---headings--h4--letter-spacing: -.04em;
--_typography---headings--h5--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h5--font-size: 1.5rem;
--_typography---headings--h5--font-weight: 500;
--_typography---headings--h5--letter-spacing: -.02em;
--_typography---headings--h6--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h6--font-size: 1.25rem;
--_typography---headings--h6--font-weight: 500;
--_typography---headings--h6--letter-spacing: -.02em;
--_color-schemes---text--body: #825b63;
--color-scheme-1--text<deleted|relume-variable-color-scheme-1-text>: black;
--_typography---headings--h2--font-family: "Tt Commons Pro Variable",Arial,sans-serif;
--_typography---headings--h2--font-weight: 500;
--_primitives---colors--white<deleted|relume-variable-neutral-white>: #fff;
--_color-schemes---border--border-primary: #f2eee7;
--text-color--text-alternate<deleted|relume-variable-text-color-3>: white;
--_site-sizes---element-gap--gap-xsmall: .75rem;
--_color-schemes---button--btn-radius: .375rem;
--_color-schemes---button--primary--btn-primary-background: #4d1520;
--_color-schemes---button--primary--btn-text-primary: #f2eee7;
```

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