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

# Contractbook · Design System

> Calm contract software with playful, high-contrast accents

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

A spacious contract-management homepage pairs confident black typography with warm off-white surfaces and vivid blue and yellow accents. Rounded content panels, customer stories, video, and hand-drawn illustrations make a complex business product feel approachable.

## North star

Let warm neutral space and decisive black type lead, then use vivid blue, yellow, and rounded media panels as deliberate focal points.

## Overview

Contractbook builds a calm, spacious canvas from warm off-white #f7f7f3, with large white panels that separate content without heavy outlines. Near-black #1a1a1a carries navigation, headings, and much of the interface text; pure black is also measured in text and card content. Strong electric blue #1009f6 and sunny yellow #ffba09 create the page’s most recognizable contrast, appearing in the graphic backdrop, CTA buttons, and testimonial or feature panels. Pale blue and small green or lilac touches appear as supporting blocks and illustration details, rather than competing with the core palette. Abcwhyte is used throughout: bold, large, left-aligned headlines anchor sections, while compact navigation, captions, and body copy keep information legible. The layout favors a centered, constrained content area, generous section gaps, rounded cards, and broad two-column compositions. Product footage, customer portraits, logos, and playful hand-drawn motifs bring warmth to the otherwise restrained software interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | brand | Primary navigation and headings, dark button text, inverse footer surface, and frequent hairline borders. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Cards and badges set against the warm page canvas, plus white text on the blue demo CTA. |
| Warm Canvas | `#f7f7f3` | `--color-warm-canvas` | surface | Dominant background across the hero and main content sections. |
| True Black | `#000000` | `--color-true-black` | neutral | Measured text and card copy; a secondary near-black text tone beside Soft Ink. |
| Misted Stone | `#f0f0ec` | `--color-misted-stone` | surface | Muted testimonial cards, form fields, and supporting card surfaces. |
| Signal Yellow | `#ffba09` | `--color-signal-yellow` | accent | Primary demo-request buttons and small illustrated or card accents. |
| Electric Blue | `#1009f6` | `--color-electric-blue` | accent | Graphic backdrop, demo CTA, and high-contrast testimonial or feature panels. |
| Sky Panel | `#add3e5` | `--color-sky-panel` | surface | Pale-blue supporting panels, including the compliance feature block and blue-section inset. |
| Moss Green | `#304801` | `--color-moss-green` | accent | A testimonial card accent; use as a contained highlight, not a general page surface. |
| Footer Haze | `#d4d4d0` | `--color-footer-haze` | neutral | Minor measured footer detail, not a defining page background. |
| Lilac Sketch | `#e3c7de` | `--color-lilac-sketch` | semantic | Small lilac shapes within illustrated media; not a core interface color. |
| Muted Graphite | `#6d6868` | `--color-muted-graphite` | neutral | Minor footer text or detail, secondary to the primary dark text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f7f7f3` (Warm Canvas) · `--color-surface-2` → `#1a1a1a` (Soft Ink) · `--color-surface-3` → `#f0f0ec` (Misted Stone) · `--color-surface-4` → `#add3e5` (Sky Panel) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#1a1a1a` (Soft Ink) · `--color-text-subtle` → `#f0f0ec` (Misted Stone) · `--color-border` → `#1a1a1a` (Soft Ink) · `--color-accent` → `#ffba09` (Signal Yellow) · `--color-accent-2` → `#1009f6` (Electric Blue) · `--color-accent-3` → `#304801` (Moss Green) · `--color-on-accent` → `#1a1a1a` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f3` | 19.55:1 | AAA |
| `#000000` | `#1a1a1a` | 1.21:1 | fail |
| `#000000` | `#f0f0ec` | 18.38:1 | AAA |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f7f7f3` | 16.21:1 | AAA |
| `#1a1a1a` | `#f0f0ec` | 15.23:1 | AAA |
| `#f0f0ec` | `#ffffff` | 1.14:1 | fail |
| `#f0f0ec` | `#f7f7f3` | 1.06:1 | fail |
| `#f0f0ec` | `#1a1a1a` | 15.23:1 | AAA |

### Gradients

- `linear-gradient(270deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgb(255, 255, 255) 104%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Abcwhyte | `--font-body` | webfont | 400, 700 | Site-wide font for navigation, headings, body copy, captions, links, and buttons. | Inter |

- **Abcwhyte:** Measured weights 400 and 700; strong bold headlines, restrained sentence case, and no measured letter spacing.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.25 | 0 | — | Abcwhyte | Hero headline; large, bold, left-aligned product promise. |
| h2 | 32px | 700 | 1.3 | 0 | — | Abcwhyte | Major section headlines and prominent customer-story statements. |
| h3 | 31.5px | 700 | 1.3 | 0 | — | Abcwhyte | Feature and content subsection headings. |
| h4 | 28px | 700 | 1.3 | 0 | — | Abcwhyte | Smaller feature or supporting card headings. |
| body | 16px | 400 | 1.5 | 0 | — | Abcwhyte | Hero description, feature explanations, and general paragraph copy. |
| caption | 14px | 400 | 1.4 | 0 | — | Abcwhyte | Compact supporting notes and form or media details. |
| button | 14px | 700 | 1 | 0 | — | Abcwhyte | Bold labels on primary and outlined CTA buttons. |
| nav | 12.5px | 700 | 1 | 0 | — | Abcwhyte | Compact bold labels in the primary site navigation. |
| link | 12.5px | 400 | 1.5 | 0 | — | Abcwhyte | Small inline and footer links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 5, 6, 7, 9, 11, 12, 14, 16, 18, 21, 22, 24, 28, 42, 48, 56 px.
- Section rhythm 96px · element gap 14px · card padding 48px · max content width 1156px.

Use a centered content column with a measured maximum width of 1156px, generous 96px section rhythm, and a spacious overall density. The hero and many feature sections use two-column compositions; center selected section headings and testimonials. Keep the warm canvas visible around large rounded white panels. The footer switches to a dark, multi-column link layout. Preserve broad whitespace between content groups rather than compressing the long page into dense rows.

## Shape & elevation

- Radius: button `9999px` · input `4px` · card `24px` · media `50%` · badge `11px` · nav `9999px` · link `24px` · xs `4px` · sm `11px` · md `16px` · lg `24px` · xl `40px` · pill `9999px`
- Shadow `hairline` (other): `rgb(136, 136, 136) 0px 0px 1px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is primarily flat: large white and pale-gray panels sit directly on the warm canvas, with contrast and corner rounding defining their edges. A subtle measured hairline shadow appears only as a minor detail. Avoid strong drop shadows; dark borders are more characteristic on outlined pill buttons and navigation controls.

## Imagery

Mix customer and spokesperson video stills with product-related visuals, customer portraits, and a logo strip. Use rounded media frames inside larger rounded panels. Hand-drawn eye, doodle, and line accents add an informal editorial quality. Bright illustrated yellow and blue surfaces can be vivid, but should remain contained within feature or media compositions rather than replacing the calm page canvas.

## Components

### Pill CTA buttons

Rounded pill actions include a yellow #ffba09 demo button with dark text, an outlined dark-text trial button, and a blue #1009f6 demo CTA with white text.

### Rounded content cards

Large cards use 24px corners and generous 48px padding; white and #f0f0ec surfaces support testimonials and feature content.

### Form fields

Inputs use #f0f0ec fills, dark text, and small roughly 4px corners, contrasting with the larger rounded form container.

### Navigation pills

Compact bold navigation sits in rounded white bars; key actions are presented as a pill-shaped outlined or filled button.

### Media panels

Video and imagery sit in rounded frames within split layouts, with small play controls over the footage.

### Testimonial cards

Customer quotes use muted, blue, or green card surfaces, with customer identity and compact supporting details.

### Dark footer

A full-width #1a1a1a footer groups numerous small, subdued links into multiple columns.

### Measured component styles

- **Primary button** (“Request a demo”): background #ffba09 · text #1a1a1a · radius 999px · padding 15.8px 28px · 700 14px Abcwhyte
- **Secondary button** (“Schedule your demo”): background #1009f6 · text #ffffff · radius 999px · padding 10.5px 22.8px · 400 15.75px Abcwhyte
- **Link** (““We just saved €70,000 by re-negotiating”): background #f0f0ec · text #000000 · radius 24px · padding 48px · 400 14px Abcwhyte
- **Input** (“0-1 2-9 10-49 50-499 500-999 1000-1999 2”): background #f0f0ec · text #1a1a1a · radius 4.375px · padding 9.1px 14px · 400 14px Abcwhyte
- **Card** (“"This saved me 15-20 hours of manual wor”): background #f0f0ec · text #000000 · radius 24px · padding 48px · 400 14px Abcwhyte
- **Badge** (“Import & Extract”): background #ffffff · text #1a1a1a · radius 10.5px · padding 4.9px 14px · 400 14px Abcwhyte
- **Navigation item** (“Help Centre Contact sales Log in”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 14px Abcwhyte

## Do

- Use #f7f7f3 as the main content canvas.
- Set headings in bold Abcwhyte or a close sans-serif substitute.
- Reserve #1009f6 and #ffba09 for decisive focal points.
- Use generous whitespace between major sections.
- Group content in large rounded cards and panels.
- Keep forms and dense footer links visually quieter.

## Don't

- Do not make the entire page a saturated color field.
- Do not use heavy shadows to separate every card.
- Do not crowd the hero with dense copy or controls.
- Do not treat illustration-only colors as core brand colors.
- Do not replace the rounded CTA style with square buttons.
- Do not use multiple competing display typefaces.

## Agent prompt

Build a new Contractbook-style SaaS page with Abcwhyte or Inter, using bold, clear headlines and compact, legible supporting text. Use Warm Canvas #f7f7f3 for the main background and Soft Ink #1a1a1a for navigation and headings. Create spacious centered content within a measured 1156px maximum width, using two-column feature layouts and broad section gaps. Make Paper White #ffffff and Misted Stone #f0f0ec rounded cards the main content containers. Use Electric Blue #1009f6 and Signal Yellow #ffba09 sparingly for strong CTA and feature-panel accents; Sky Panel #add3e5 can soften a blue feature area. Add rounded video or customer media, restrained hand-drawn details, and a logo strip. Keep elevation mostly flat, with pill buttons, subtle borders, and a dark multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero content in a large white rounded panel over a vivid geometric blue and pale-blue backdrop. | primary demo CTA, secondary free-trial CTA, review ratings | bold left-aligned headline, rounded video frame, hand-drawn eye illustration |
| 2 | feature-grid | Long warm-canvas section with centered headings, alternating two-column content, and a pale-blue compliance panel. | benefit-led storytelling, compliance reassurance, repeat demo CTA | centered section title, split feature blocks, pale-blue callout card |
| 3 | testimonials | Centered heading above a horizontal carousel of colorful customer quote cards, followed by navigation controls and customer logos. | testimonial carousel, previous and next controls, customer proof | blue, yellow, and green cards, large rounded corners, logo strip |
| 4 | feature-split | Full-width electric-blue band framing an inset pale-blue two-column content panel with copy and video. | feature explanation, embedded video | blue outer band, pale-blue inset, rounded video |
| 5 | contact | Two-column contact panel with introductory copy and social proof at left, multi-field form at right. | lead capture, company qualification fields, demo scheduling CTA | rounded white panel, pale-gray inputs, yellow doodle accent |
| 6 | footer | Full-width dark footer with brand marks, several link columns, company details, contact information, and legal links. | multi-category navigation, contact access, legal links | dark surface, small muted type, multi-column link groups |

## Source CSS custom properties (selected)

```css
--radius-2: 24px;
--radius-3: 40px;
--radius-1: 16px;
--background-color: transparent;
--radius-0-5: 8px;
--radius-1-5: 20px;
--radius-2-5: 2.5rem;
--radius-0-75: .75rem;
```

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