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

# Midday · Design System

> Quiet editorial clarity for the modern business stack

**Theme:** light · **Industry:** saas · **Source:** https://midday.ai/ · **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._

Midday pairs a restrained editorial aesthetic with a product-focused SaaS homepage. Generous white space, serif headlines, fine borders, and large interface previews make a broad business toolkit feel calm and cohesive.

## North star

Keep the product story calm and legible: white space first, precise type second, and interface evidence instead of decoration.

## Overview

The page is built on a white canvas, with near-black headings and muted gray supporting copy. Soft warm-gray surfaces and hairline borders separate content without introducing strong color bands; green appears only as a small functional accent, not as a dominant brand fill. Hedvig Letters Serif gives the hero and selected feature headings an editorial voice, while Hedvig Letters Sans handles navigation, body copy, labels, and controls. The centered hero uses a compact announcement, a large two-line headline, concise supporting text, and a dark trial CTA. Below it, interface imagery is given room to breathe, followed by centered feature sections, orderly grids, restrained testimonial cards, and fine horizontal dividers. The overall rhythm is spacious and low-density: clear section transitions, simple geometry, and little decorative chrome keep attention on the product and its practical benefits.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas and open space around the hero, product previews, and content sections. |
| Editorial Ink | `#121212` | `--color-editorial-ink` | neutral | Primary headings, navigation, body text, and dark text links. |
| Soft Graphite | `#616161` | `--color-soft-graphite` | neutral | Supporting copy, secondary navigation, quiet links, and announcement-pill text. |
| Warm Hairline | `#dbdad7` | `--color-warm-hairline` | semantic | Fine outlines around cards and pill controls, plus subtle section and component dividers. |
| Stone Surface | `#e6e4e0` | `--color-stone-surface` | surface | Occasional pale neutral surface, including understated feature and interface-support areas. |
| Trial Charcoal | `#18181b` | `--color-trial-charcoal` | neutral | Compact primary trial button; the near-black button treatment contrasts with its light label. |
| Ledger Green | `#4caf50` | `--color-ledger-green` | accent | Sparse functional accent, including small status or interface details rather than large page fills. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e6e4e0` (Stone Surface) · `--color-text` → `#121212` (Editorial Ink) · `--color-text-muted` → `#616161` (Soft Graphite) · `--color-border` → `#dbdad7` (Warm Hairline) · `--color-accent` → `#4caf50` (Ledger Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#e6e4e0` | 14.75:1 | AAA |
| `#616161` | `#ffffff` | 6.19:1 | AA |
| `#616161` | `#e6e4e0` | 4.88:1 | AA |
| `#4caf50` | `#ffffff` | 2.78:1 | fail |
| `#4caf50` | `#e6e4e0` | 2.19:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 70%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 70%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Hedvig Letters Sans | `--font-body` | webfont | 400, 500 | Navigation, body copy, controls, labels, and most headings. | Inter |
| Hedvig Letters Serif | `--font-display` | webfont | 400 | Hero headline and selected editorial-style section headings. | DM Serif Display |

- **Hedvig Letters Sans:** Mostly regular weight, with 500 for the trial CTA; keep case natural and tracking generally neutral.
- **Hedvig Letters Serif:** Regular weight; the measured H1 uses subtly tight tracking, while smaller serif headings stay restrained.

### Type scale — Custom (ratio ≈ 2.051, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 508px | 400 | 1 | 0 | — | Hedvig Letters Sans | Oversized brand wordmark treatment in the footer. |
| h1 | 72px | 400 | 1 | -0.025em | — | Hedvig Letters Serif | Centered hero headline, set in the serif face. |
| h2 | 48px | 400 | 1 | 0 | — | Hedvig Letters Sans | Major section headings and feature-group titles. |
| h3 | 24px | 400 | 1.33 | 0 | — | Hedvig Letters Serif | Editorial subheadings and selected feature titles. |
| h4 | 20px | 400 | 1.4 | 0 | — | Hedvig Letters Sans | Smaller feature and supporting section headings. |
| body | 14px | 400 | 1.43 | 0 | — | Hedvig Letters Sans | Descriptions, explanatory paragraphs, and card copy. |
| caption | 11px | 400 | 1.5 | 0 | — | Hedvig Letters Sans | Trial reassurance, metadata, and small interface labels. |
| button | 14px | 400 | 1.43 | 0 | — | Hedvig Letters Sans | Primary trial action and compact control labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Hedvig Letters Sans | Header navigation and footer navigation links. |
| link | 14px | 400 | 1.43 | 0 | — | Hedvig Letters Sans | Inline calls to action and contextual text links. |
| eyebrow | 10px | 400 | 1.5 | 0.05em | uppercase | Hedvig Letters Sans | Uppercase micro-labels and small section identifiers. |

## Spacing & layout

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

The page uses a centered, spacious composition with a measured maximum content width of 1248px. The hero is center-aligned, while later sections alternate between centered feature introductions, two-column product demonstrations, and compact multi-column grids. Keep section gaps generous and element spacing restrained; cards have measured 24px padding, and the overall density is spacious. Thin horizontal rules mark transitions without heavy color bands. Align content to a consistent central frame, allowing product imagery to feel broad while text remains easy to scan.

## Shape & elevation

- Radius: button `9999px` · media `50%` · pill `9999px`
- Shadow `hairline` (footer): `rgba(34, 197, 94, 0.28) 0px 0px 0px 2.44214px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: no prominent card shadows or layered floating panels. Cards and controls rely on measured #dbdad7 hairline borders, while pale #e6e4e0 areas provide occasional surface contrast. Preserve the clean separation and square card treatment; pill-shaped outlines are reserved for compact announcement and integration controls.

## Imagery

Product imagery is primarily interface-focused: large screenshots and video previews show the business dashboard, transaction lists, and connected tools. Frame previews cleanly against the white canvas; the hero product demonstration sits over a dark, textured backdrop visible within the media rather than defining the page palette. Small partner logos and icons appear in compact integration rows. Keep imagery documentary and functional, with no invented decorative photography.

## Components

### Announcement pill

A centered, compact announcement link with muted text, a fine #dbdad7 outline, and fully rounded pill geometry.

### Primary trial CTA

A compact #18181b button with a light label, set beneath the hero copy and followed by small trial reassurance.

### Product preview

Large dashboard imagery presented as evidence of the product; preserve its clean interface details and generous surrounding whitespace.

### Feature navigation grid

A centered set of business-tool categories using small icons, concise titles, and muted one-line descriptors.

### Testimonial card

Square-cornered quote cards with a #dbdad7 outline, measured 24px padding, and restrained customer metadata.

### Integration row

A compact collection of partner logos and names on white, with subtle separators and restrained neutral styling.

### Measured component styles

- **Primary button** (“Start your trial”): background #18181b · text #fafafa · radius 0px · padding 8px 24px · 500 14px Hedvig Letters Sans
- **Secondary button** (“Gmail”): transparent background · text #121212 · border 1px solid #dbdad7 · radius 9999px · padding 6px 12px · 400 16px Hedvig Letters Sans
- **Link** (“Invoicing Invoice management”): transparent background · text #121212 · radius 0px · padding 0px · 400 16px Hedvig Letters Sans
- **Card** (“POLAND Paweł Michalski VC Leaders "Invoi”): transparent background · text #121212 · border 1px solid #dbdad7 · radius 0px · padding 24px · 400 16px Hedvig Letters Sans
- **Navigation item** (“Features Story Download Resources Sign i”): transparent background · text #121212 · radius 0px · padding 0px · 400 16px Hedvig Letters Sans

## Do

- Use white as the dominant canvas.
- Keep the hero headline centered and editorial.
- Use serif selectively for prominent headings.
- Separate content with fine neutral borders.
- Give product previews generous breathing room.
- Reserve green for small functional accents.

## Don't

- Do not introduce large saturated color bands.
- Do not make every heading serif.
- Do not add heavy shadows or glossy effects.
- Do not crowd the hero with extra controls.
- Do not use decorative imagery that competes with the interface.
- Do not round square content cards into pills.

## Agent prompt

Build a new Midday-style SaaS page with a calm editorial character. Use Gallery White (#ffffff) as the dominant canvas, Editorial Ink (#121212) for primary text, and Soft Graphite (#616161) for supporting copy. Apply Warm Hairline (#dbdad7) to subtle dividers and card outlines, with Stone Surface (#e6e4e0) only for quiet contrast. Keep Ledger Green (#4caf50) sparse and functional; use Trial Charcoal (#18181b) for the main CTA. Set headlines in a restrained serif and navigation, body, and controls in a clean sans. Center the hero, give it ample whitespace, and follow with product-interface evidence, clearly separated feature sections, and compact grids. Favor flat surfaces, square content cards, and precise alignment over decoration. Make the product itself the visual focus.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement and headline above copy, trial CTA, and a small row of marks. | Announcement link, Trial action, Trial reassurance | Serif headline, White canvas, Dark CTA, Centered composition |
| 2 | product-showcase | Broad media preview centered within the content frame. | Product demonstration, Visual proof | Dashboard preview, Dark media backdrop, Wide framing |
| 3 | how-it-works | Two-column section with explanatory steps beside a transaction interface. | Step progression, Product walkthrough | Centered section heading, Interface preview, Sparse dividers |
| 4 | feature-grid | Centered introduction above a four-column feature grid. | Feature discovery, Category navigation | Small icons, Short labels, Muted descriptions |
| 5 | stats | Centered heading above a three-column set of time-saving cards. | Operational pain points, Time-saved metric | Outlined cards, Large summary figure, Neutral surfaces |
| 6 | feature-split | Centered heading and copy above a compact checklist and product imagery. | Benefit explanation, Checklist proof, Learn-more link | Product visuals, Pale checklist surface, Muted text link |
| 7 | testimonials | Centered introduction and rating above a four-column quote-card row. | Customer proof, Review browsing | Square outlined cards, Customer metadata, Subtle carousel control |
| 8 | integrations | Centered introduction above compact rows of integration logos. | Integration discovery, View-all link | Logo cloud, Small brand marks, Quiet separators |
| 9 | footer | Multi-column link groups beside a brand note, followed by a thin legal row. | Grouped navigation, Status information, Legal links | Fine divider, Small text, Large wordmark treatment |

## Source CSS custom properties (selected)

```css
--font-hedvig-sans: "Hedvig Letters Sans", system-ui, sans-serif;
--font-hedvig-serif: "Hedvig Letters Serif", Georgia, serif;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--base-color: #71717a;
--base-gradient-color: #fff;
--bg: linear-gradient(90deg,#0000 calc(50% - var(--spread)),var(--base-gradient-color),#0000 calc(50% + var(--spread)));
--background: 0, 0%, 100%;
--foreground: 0, 0%, 7%;
--card-foreground: 240 10% 3.9%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 40, 11%, 89%;
--secondary-foreground: 240 5.9% 10%;
--accent: 40, 10%, 94%;
--accent-foreground: 240 5.9% 10%;
--destructive-foreground: 0 0% 98%;
--muted-foreground: 0, 0%, 38%;
--border: 45, 5%, 85%;
--radius: .5rem;
--chart-axis-text: #707070;
--chart-pattern-bg: white;
--chart-bar-fill-secondary: #6666664d;
--chart-line-secondary: #666;
```

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