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

# EarlyDog · Design System

> Calm cloud expertise with bold geometric energy

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

EarlyDog pairs a warm, quiet canvas and oversized black-and-blue headlines with lively geometric illustrations. A spacious service narrative leads to a crisp blue footer, keeping the cloud-operations offer clear and approachable.

## North star

Keep the canvas calm and spacious, then use oversized black-and-blue typography and geometric artwork for the visual punch.

## Overview

The page builds its identity around a warm cream canvas (#fff9f0), which gives the large, near-black (#000609) display type and vivid blue (#0a65db) emphasis room to stand out. Blue is used selectively in the hero headline, illustrations, and full-width footer rather than as a constant background. The typography contrasts Degular Display’s heavy, expressive headings with the more restrained Usual sans-serif for body copy and controls. A two-column hero pairs a left-aligned message with a large geometric illustration; subsequent service blocks alternate image and text placement, creating a steady editorial rhythm. Illustrations use bold primary-like shapes, fine black linework, and checkerboard motifs, but remain supporting artwork rather than a replacement for the restrained brand palette. Generous whitespace separates content groups. Outlined pill buttons and one dark filled CTA provide clear interaction cues, while the blue footer anchors the page with compact navigation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000609` | `--color-deep-ink` | brand | Primary headings, body text, fine illustration linework, and outlined or filled CTA borders. |
| Warm Canvas | `#fff9f0` | `--color-warm-canvas` | surface | Dominant page background and the light text color used on the dark CTA. |
| Signal Blue | `#0a65db` | `--color-signal-blue` | accent | Headline emphasis, selected illustration elements, and the full-width footer background. |
| Footer White | `#ffffff` | `--color-footer-white` | neutral | Small footer text; a measured minor color, not the main page canvas. |

### Semantic aliases

`--color-canvas` → `#fff9f0` (Warm Canvas) · `--color-text` → `#000609` (Deep Ink) · `--color-text-muted` → `#ffffff` (Footer White) · `--color-border` → `#000609` (Deep Ink) · `--color-accent` → `#0a65db` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000609` | `#fff9f0` | 19.48:1 | AAA |
| `#ffffff` | `#fff9f0` | 1.05:1 | fail |
| `#0a65db` | `#fff9f0` | 5.15:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| usual | `--font-body` | webfont | 400, 700 | Body copy, navigation, captions, and buttons. | Inter |
| degular-display | `--font-display` | webfont | 700 | Display headlines and major section headings. | Space Grotesk |

- **usual:** Use regular weight for copy and navigation, bold for CTA labels; keep case natural and tracking restrained.
- **degular-display:** Use bold weight and large, compact headline shapes; retain the measured slight positive tracking and natural case.

### Type scale — Golden Ratio (ratio ≈ 1.593, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 116px | 700 | 1.03 | 0.009em | — | degular-display | Oversized hero display headline. |
| h1 | 80px | 700 | 1.1 | 0.013em | — | degular-display | Primary page headline and major campaign messaging. |
| h2 | 52px | 700 | 1.23 | 0.019em | — | degular-display | Service-section and closing CTA headlines. |
| h3 | 22px | 400 | 1.82 | 0 | — | usual | Supporting section headings and service labels. |
| body | 18px | 400 | 1.78 | 0 | — | usual | Explanatory service and company copy. |
| caption | 16px | 400 | 1 | 0 | — | usual | Small supporting labels and footer details. |
| button | 18px | 700 | 1 | 0 | — | usual | Bold labels on pill-shaped CTAs. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 14, 16, 20, 24, 30, 32, 40, 44, 48, 56, 72, 76, 96 px.
- Section rhythm 128px · element gap 32px · card padding — · max content width 1200px.

Use a spacious, centered page frame with a measured maximum width of 1200px. The hero and service stories use two-column compositions with left-aligned copy; alternate image and text sides across successive feature sections. Keep the hero visually dominant, then separate each service block with generous vertical breathing room. A centered closing CTA transitions directly into a full-width footer band. Overall density is low, with ample canvas around both text and illustrations.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.

The design is predominantly flat, without measured shadows or gradient treatments. Separate sections through whitespace and occasional subtle hairlines rather than raised cards. Buttons use a strong dark outline or filled dark treatment, with a fully rounded pill shape; illustrations layer shapes and linework as graphic compositions.

## Imagery

Use custom flat geometric illustrations rather than photography or 3D. Combine circles, rectangles, checkerboard tiles, triangles, and thin radial linework in bright blue and warm contrasting colors. Keep artwork large and crisp beside the service copy, with simple, open compositions and no photographic textures. Illustration colors may be more varied than the measured core brand palette.

## Components

### Top navigation

Minimal header with a compact menu icon at the upper left and a bold Talk to us link with a small blue directional mark at the upper right.

### Hero

Large left-aligned black headline with a blue phrase, concise supporting paragraph, and oversized geometric illustration in a two-column arrangement.

### Alternating service features

Service stories pair short headings and copy with geometric artwork, alternating which side holds the text and illustration.

### Outlined CTA button

Use a 3px solid #000609 border, 9999px radius, and bold 18px Usual label for secondary actions.

### Filled CTA button

Use #000609 fill and border with #fff9f0 text, a 3px border, 9999px radius, and bold 18px Usual label.

### Footer

Full-width #0a65db band with compact navigation links and small light legal and copyright text.

### Measured component styles

- **Primary button** (“Talk to us”): background #000609 · text #fff9f0 · border 3px solid #000609 · radius 9999px · padding 14.4px 29.6px · 700 18px usual
- **Secondary button** (“Why you need us”): transparent background · text #000609 · border 3px solid #000609 · radius 9999px · padding 20px 29.6px · 700 18px usual
- **Link** (“Talk to us”): transparent background · text #000609 · radius 0px · padding 0px 0px 0px 250px · 700 18px usual
- **Navigation item**: transparent background · text #000609 · radius 0px · padding 0px · 400 18px usual

## Do

- Use #fff9f0 as the dominant canvas.
- Reserve #0a65db for deliberate emphasis and the footer band.
- Set major headlines in a bold display face.
- Keep body copy dark, readable, and left aligned.
- Alternate the image and text sides in service features.
- Use simple geometric illustrations with crisp edges.
- Make CTA buttons fully pill-shaped.

## Don't

- Don’t replace the warm canvas with stark white.
- Don’t use blue as a background for every section.
- Don’t crowd the page with dense cards or content.
- Don’t add shadows or gradients absent from the measured style.
- Don’t make illustrations photographic or realistic 3D.
- Don’t use a generic grid of identical feature cards.

## Agent prompt

Build a new EarlyDog-style SaaS page with a spacious, editorial layout and a measured maximum width of 1200px. Use Warm Canvas (#fff9f0) for the main surface, Deep Ink (#000609) for copy and outlines, and Signal Blue (#0a65db) for selective headline emphasis and a strong footer band. Set large headings in a bold display sans similar to Degular Display; use a clean sans such as Inter for body copy, navigation, and controls. Lead with a two-column hero: left-aligned message and large flat geometric artwork. Follow with alternating service-story layouts, generous whitespace, and a concise closing CTA. Use pill-shaped outlined or dark-filled buttons. Keep depth flat: no shadows, gradients, or card-heavy layouts. Treat illustration colors as artwork, not additional core brand colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long cream-colored content section with a two-column hero and alternating service-feature rows. | menu navigation, hero CTA, alternating service details | oversized split-color headline, geometric illustrations, outlined pill buttons, spacious sections |
| 2 | footer | Full-width blue band with a single compact row of navigation links and smaller legal details below. | site-wide navigation, legal links | solid blue background, small light text, compact link row |

## Source CSS custom properties (selected)

```css
--para-spacing-xs: 16px;
--para-spacing-sm: 16px;
--para-spacing-lg: 24px;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
```

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