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

# Readymag · Design System

> Make the web more like you.

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

Readymag’s homepage pairs a restrained black-and-white interface with a fast-moving collage of expressive website work. Rounded orange calls to action anchor the page while editorial typography and varied project imagery demonstrate the range of the design tool.

## North star

Keep the interface quiet and legible so expressive, varied project work and unmistakable orange actions take center stage.

## Overview

The page uses a mostly white canvas and black text to keep its product story legible against a lively stream of portfolio work. Bright orange appears sparingly in the primary actions and in project imagery; the pinks, blues, and varied photographic tones belong chiefly to the showcased work, not the core interface palette. A centered white hero panel sits over a full-bleed collage, creating a clear reading zone without muting the examples behind it. Typography is compact and confidently weighted, with tightly tracked display headings and quieter gray supporting text. The page alternates broad white content sections with a stark black product demonstration band, then returns to a white CTA and dark footer. Image grids use contrasting projects rather than a uniform art direction, making the product feel versatile. Rounded pill navigation and oversized orange CTA shapes soften the otherwise sharp editorial layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, hero panel, navigation pills, and light text on dark sections. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary text, black product-demo band, footer, and inverse surfaces. |
| Soft Concrete | `#e5e5e5` | `--color-soft-concrete` | surface | Pale neutral surface used in secondary interface and content areas. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | semantic | Muted supporting text, including the hero subtitle beneath the main statement. |
| Signal Orange | `#ff5900` | `--color-signal-orange` | accent | Prominent orange calls to action and orange elements within showcased project work. |
| Charcoal Type | `#282828` | `--color-charcoal-type` | neutral | Secondary dark text and media details; not a defining page background. |
| Burnt Orange | `#ec520b` | `--color-burnt-orange` | accent | Measured Sign up button fill; a close companion to the brighter primary orange. |
| Marigold | `#ff9c00` | `--color-marigold` | accent | Warm orange-yellow accent seen in secondary visual elements, not a dominant interface color. |
| Graphite Surface | `#313131` | `--color-graphite-surface` | surface | Dark secondary surface detail; distinct from the main black footer and demo band. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e5e5` (Soft Concrete) · `--color-surface-2` → `#000000` (Editorial Ink) · `--color-surface-3` → `#313131` (Graphite Surface) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999999` (Quiet Gray) · `--color-accent` → `#ff5900` (Signal Orange) · `--color-accent-2` → `#ec520b` (Burnt Orange) · `--color-accent-3` → `#ff9c00` (Marigold) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#313131` | 1.61:1 | fail |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#313131` | 13.01:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#e5e5e5` | 2.26:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#313131` | 4.57:1 | AA |

### Gradients

- `linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| custom_190030 | `--font-custom-190030` | webfont | 500, 400 | Most-used webfont for compact navigation, links, captions, and controls. | Inter |
| custom_157067 | `--font-display` | webfont | 400 | Regular-weight display and section heading styles, including measured h2 and h4 roles. | DM Sans |
| -apple-system | `--font-apple-system` | system | 400 | System sans-serif used in measured interface buttons. | Inter |
| custom_189785 | `--font-body` | webfont | 500 | Medium-weight headline and body styles, including measured h1, h3, and body roles. | Inter |

- **custom_190030:** Measured at weights 400 and 500; small interface labels are compact, generally mixed case.
- **custom_157067:** Regular weight with notably tight negative tracking on measured headings.
- **-apple-system:** Measured regular weight; keep button labels clean and unembellished.
- **custom_189785:** Measured weight 500; display text uses tight negative tracking and close line spacing.

### Type scale — Major Third (ratio ≈ 1.236, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 500 | 1.05 | -0.04em | — | custom_189785 | Hero headline introducing the product’s creative promise. |
| h2 | 40px | 400 | 0.95 | -0.045em | — | custom_157067 | Prominent section headings across the homepage. |
| h3 | 38px | 500 | 1.05 | -0.055em | — | custom_189785 | Subsection headings for feature and editorial content. |
| h4 | 30px | 400 | 1.03 | -0.053em | — | custom_157067 | Smaller supporting feature headings. |
| body | 18px | 500 | 1.11 | -0.033em | — | custom_189785 | Supporting statements and explanatory copy. |
| caption | 10px | 500 | 1.2 | 0 | — | custom_190030 | Compact labels and image or project captions. |
| link | 12px | 500 | 1.5 | 0 | — | custom_190030 | Navigation, footer links, and short text actions. |

OpenType features in use: `"dlig" 0, "hlig" 0, "liga" 0, "rlig" 0, "smcp" 0`, `"liga"`, `"ss02"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 11, 15, 16, 20, 24, 45 px.
- Section rhythm — · element gap — · card padding — · max content width —.

A full-bleed, image-rich hero opens the page, with a centered panel and floating pill navigation layered above it. Below, wide content sections align headings to the left and arrange examples in compact multi-column grids. A black product-demo band interrupts the white sections before the page returns to capability tiles, editorial content, and a prominent CTA. Keep section widths generous and align content consistently, but do not impose a measured max-width: none was recorded. Rhythm comes from alternating dense galleries and open white space rather than decorative separators.

## Shape & elevation

- Radius: button `9999px` · card `102px` · xs `4px` · sm `8px` · md `102px` · pill `9999px`
- Shadow `inset` (other, button): `rgb(0, 0, 0) 0px 0px 0px 0px inset`

The design relies on flat color fields and image-led layering rather than pronounced shadows or outlined cards. A white hero panel sits visibly above its busy collage, and pill-shaped navigation controls float over the hero. Use clean edges and restrained separation; the measured shadow is effectively zero, and no consistent border color was recorded.

## Imagery

Use a varied collage of website projects, interface captures, editorial artwork, photography, and colorful graphic compositions. Keep images in rectangular tiles and combine contrasting visual styles to communicate creative range. The hero’s layered project montage is the dominant visual, while later grids provide smaller examples. Product UI imagery should remain crisp and legible; the measured bright colors in project thumbnails are examples, not extra brand colors.

## Components

### Floating pill navigation

Place compact rounded light controls over the hero collage, with navigation centered and account actions aligned to the right.

### Hero statement panel

Use a prominent white panel over the full-bleed montage, with a black headline, gray supporting copy, and a wide orange pill CTA.

### Project gallery

Present contrasting website examples in a tight multi-column image grid with small captions.

### Product demo band

Set a centered product-editor preview and short white explanatory copy against a solid black section.

### Capability mosaic

Combine differently sized feature tiles with colorful interface details and dark panels instead of uniform text-only cards.

### Large CTA

Use a broad, highly rounded orange action surface with centered white text, followed by a restrained customer-logo row.

### Dark footer

Group compact, low-contrast link columns on a black background and keep legal links visually subordinate.

### Measured component styles

- **Primary button** (“Sign up”): background #ec520b · text #ffffff · radius 200px · padding 0px 24px · 400 0px -apple-system
- **Secondary button** (“Solutions”): background #f4f4f4 · text #000000 · radius 200px · padding 0px 24px · 400 16px -apple-system
- **Link** (“Readymag blog”): transparent background · text #ffffff · radius 0px · padding 0px 0px 1px 0px · 500 12px custom_190030
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 20px · 400 14px custom_190030
- **Card** (“Get started”): background #ff5900 · text #ffffff · radius 102px · padding 0px · 400 40px custom_37866

## Do

- Use white and black as the primary interface foundation.
- Reserve orange for high-priority actions and selected accents.
- Let the hero collage show a range of visual styles.
- Keep headings tight, clear, and left-aligned in content sections.
- Alternate bright content areas with occasional black sections.
- Use rounded pill forms for navigation and major actions.

## Don't

- Do not make project-thumbnail colors the site-wide palette.
- Do not add prominent shadows or decorative outlines.
- Do not force every gallery image into one art direction.
- Do not crowd the hero statement with competing copy.
- Do not turn every section into a dark surface.
- Do not use orange for long passages of text.

## Agent prompt

Build a new Readymag-style page with a clean white canvas (#ffffff), crisp black typography (#000000), and muted gray supporting copy (#999999). Use orange (#ff5900) for the main action, with #ec520b reserved for a secondary sign-up treatment. Start with a full-bleed, varied portfolio collage and layer a centered white hero panel over it; place compact pill navigation above the imagery. Follow with spacious white sections containing tightly arranged project galleries, then use a black (#000000) band for a product demonstration. Keep imagery expressive and varied, but treat vivid project colors as artwork rather than interface tokens. Use compact, tightly tracked sans-serif headings, subdued borders, minimal elevation, and rounded pills for key controls. Finish with a prominent orange CTA and a restrained dark footer.

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