# Readymag · Design system migration spec

> Source: https://readymag.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies a design-led platform that balances premium, editorial aesthetics with the functional needs of a design tool, making it a strong reference for creative digital products.

## 1. Identity DNA

The system is conceived as a Swiss-style gallery for digital design tools, where the architecture prioritizes clarity and the exhibit—creative work—remains the focal point. Every decision, from the grid to the type scale, supports this gallery metaphor, ensuring the platform itself recedes to let user expression take center stage.

**One-liner:** A premium design tool platform for creating expressive, gallery-like websites.
**Keywords:** creative · expressive · design-led · gallery · portfolio
**Analogy:** A Swiss-style gallery for digital design tools.

## 2. Color

Color operates on a principle of high-contrast clarity, establishing a pristine white ground against deep charcoal ink for maximum legibility. A deliberate accent palette of bold orange and electric purple provides visual punctuation, marking calls to action and key highlights without cluttering the neutral base.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F4` | card background |
| `--ink` | `#282828` | body text |
| `--ink-soft` | `#444444` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#FF5000` | single accent |
| `--line` | `rgba(40,40,40,0.24)` | divider |

**Color principle:** High-contrast base with bold, saturated accents and generous white space.

The core principle is function: contrast drives readability, while saturated accents direct user attention with purpose.

## 3. Typography

Typographic voice is split between expressive display and utilitarian function, using a humanist sans for dramatic headlines and system fonts for interface text to ensure optimal rendering. This duality allows the platform to present bold, gallery-like statements while maintaining clean, unobtrusive usability for tools and navigation.

- **Display:** humanist-sans
- **Body:** system-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 500 | -2px | Main hero headlines |
| headline | 30px | 1.3 | 400 | -0.8px | Section headers and feature cards |
| body | 16px | 1.5 | 400 | -0.04px | Standard paragraph and UI text |
| caption | 14px | 1.7 | 400 | 0px | Small supporting text and captions |

**Type rules:**
- Use Geometric/Humanist sans for display headlines.
- Use system fonts for UI elements.
- Ensure tight letter-spacing for large display text.

## 4. Spacing

Spacing follows a strict 4px base grid, creating a compact, intentional rhythm that tightens around interactive elements while allowing generous whitespace in presentation areas.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with tight, intentional spacing for compact UI elements.

## 5. Surfaces

Surfaces are defined by subtle depth and precise delineation, using light shadows to lift interactive cards from the ground and fine, translucent borders to structure dense visual galleries without visual weight.

- **Radius:** sm 4px · md 10px · lg 20px · pill 999px
- **Shadows:**
  - 0 2px 8px rgba(0,0,0,0.05)
- **Borders:** 1px solid rgba(40,40,40,0.24)

## 6. Layout

The structural skeleton is a standard 12-column grid with flexible gutters, designed to accommodate both high-density image galleries and expansive typographic layouts. This framework provides the necessary order for expressive content, ensuring alignment and rhythm even in the most content-rich portfolio displays.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard 12-column grid with flexible gutters and high-density gallery layouts.

## 7. Motion & Interaction

Motion is treated as a functional enhancement rather than decoration, with smooth opacity transitions defining state changes and subtle transforms marking interactivity. The philosophy prioritizes efficiency and purpose, ensuring animations clarify the interface's mechanics without distracting from the primary visual content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth opacity transitions for UI state changes.
  - Subtle transform animations for interactive elements.
  - Fade-in/out for modal and overlay appearances.

- **Hover:** Subtle brightness or opacity change on interactive elements.
- **Click:** Immediate visual feedback with slight transform or color shift.
- **Transition:** Smooth opacity and transform transitions for all interactive states.
- **Keyboard:** Standard focus outlines with high-contrast visibility.

## 8. Voice & Don'ts

Editorial voice is confident, direct, and creatively focused, mirrored in bold, often oversized headline styles and action-oriented call-to-action labels. The system deliberately avoids corporate sterility and technical jargon, maintaining a tone that speaks peer-to-peer with a design-literate audience.

- **Tone:** Confident, direct, and creatively focused.
- **Headline style:** Bold, minimalist, and often experimental or oversized.
- **CTA style:** Direct and action-oriented, often using bold primary colors.
- **Avoid:** Jargon-heavy technical language / Overly corporate or sterile tone / Low-contrast or hard-to-read typography

### Don'ts
- ❌ Don't use decorative or script fonts — screenshot shows clean, functional sans-serif typography.
- ❌ Don't use low-contrast colors for text — screenshot shows high-contrast black and white with bold accents.
- ❌ Don't use complex, cluttered layouts — screenshot shows clear, grid-based gallery layouts.
- ❌ Don't use rounded, bubbly UI components everywhere — screenshot shows sharp, intentional borders and pill shapes for buttons only.
- ❌ Don't use muted, pastel color palettes — screenshot shows bold, saturated colors like orange and purple.
- ❌ Don't hide visual content behind interactions — screenshot shows high-density image galleries as primary content.

The system deliberately excludes decorative fonts, low-contrast text, and cluttered layouts, reinforcing its commitment to functional beauty and content-first presentation.

## System Prompt (paste into AI tool)

```
This is a premium design tool platform for creating expressive, gallery-like websites. The primary background is white (#FFFFFF) with dark ink (#282828) for text, accented by a bold orange (#FF5000) for CTAs and purple (#8800FF) for highlights. Typography uses a humanist-sans display font and system sans-serif for body text. Critical donts: don't use decorative fonts, don't use low-contrast text, and don't use cluttered layouts. The layout is grid-based with high-density visual galleries and generous white space, focusing on showcasing design work.
```
