CURATED · OPEN · FREE

Readymag

A premium design tool platform for creating expressive, gallery-like websites.

tooldesign

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://readymag.com

📦 Browse pack contents →

Identity DNA

creativeexpressivedesign-ledgalleryportfolio

A Swiss-style gallery for digital design tools.

Color

#FF5000Accent

#282828Ink

#444444Ink soft

#FFFFFFBG

#F4F4F4BG soft

#808080Muted

rgba(40,40,40,0.24)Line

High-contrast base with bold, saturated accents and generous white space.

Typography

humanist-sans · system-sans

display80px · 500
headline30px · 400
body16px · 400
caption14px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base grid with tight, intentional spacing for compact UI elements.

Surfaces

sm · 4px

md · 10px

lg · 20px

pill · 999px

1px solid rgba(40,40,40,0.24)

0 2px 8px rgba(0,0,0,0.05)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Smooth opacity transitions for UI state changes. · Subtle transform animations for interactive elements. · Fade-in/out for modal and overlay appearances.

Subtle brightness or opacity change on interactive elements. · Immediate visual feedback with slight transform or color shift.

Components

button Pill-shaped with bold orange background and white text, or outlined with dark borders.
card Image-heavy with tight borders and minimal padding, focusing on visual content.
chip Not prominently featured, used for tags or small status labels.
input Clean text inputs with bottom borders or subtle backgrounds.
hero Large expressive typography paired with a high-density image gallery or bold color blocks.

Voice & Don'ts

Tone Confident, direct, and creatively focused.
Headlines Bold, minimalist, and often experimental or oversized.
CTAs Direct and action-oriented, often using bold primary colors.

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.
Avoid: Jargon-heavy technical language
Avoid: Overly corporate or sterile tone
Avoid: Low-contrast or hard-to-read typography

Inside the pack — real screenshots

Readymag — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko