A high-end digital magazine focused on lifestyle, fashion, and culture.
02
Color
#2EA3F2Accent
#1A202CInk
#797472Ink soft
#FAF8EFBG
#4C40E0Muted
rgba(0,0,0,0.1)Line
A warm, off-white background with dark, readable text and vibrant blue and purple accents for emphasis.
03
Typography
transitional-serif · humanist-sans
display96px · 700
headline30px · 700
body18px · 400
caption14px · 400
Use a transitional-serif for display and headlines to add editorial authority. · Use a humanist-sans for body text to ensure high readability and a modern feel. · Combine a script font (like Qwitcher Grypen) sparingly for decorative, handwritten-style accents.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent and rhythmic, based on a 4px grid, creating a structured yet breathable layout.
05
Surfaces
sm · 2px
md · 6px
lg · 12px
pill · 999px
Minimal and clean, used primarily for structural separation with 1px lines.
none · 0 0 5px 0 rgba(128, 128, 128, 1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A clean, centered-column layout with generous whitespace and clear section headers.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth opacity and transform transitions for modals and interactive elements. · Subtle hover effects on links and buttons.
Subtle color changes or opacity shifts on interactive elements. · Immediate visual feedback with a slight transform or opacity change.
08
Components
buttonSimple, text-based buttons with clean typography and minimal styling.
cardImage-forward cards with clear titles and metadata, often separated by thin lines.
chipCategory labels, sometimes with a colored top border for emphasis.
inputStandard, clean input fields with a 1px border.
heroLarge, image-driven hero section, often featuring a promotional modal overlay.
09
Voice & Don'ts
ToneCurated, sophisticated, and slightly playful.
HeadlinesBold and declarative, often using a serif font for authority.
CTAsDirect and clear, using all-caps for emphasis.
Don't use a dark mode — the site exclusively uses a warm, light background (#FAF8EF).
Don't use a sans-serif for headlines — the site primarily uses a transitional-serif for display text.
Don't use a vibrant green as an accent — the site uses a vibrant blue (#2EA3F2) and a muted purple (#4C40E0).
Don't use heavy drop shadows — the site favors clean, flat surfaces with minimal or subtle shadows.
Don't use a multi-column text layout for articles — the site maintains a single, centered, readable column.
Don't use rounded corners on cards — the site uses sharp or very slightly rounded corners (2-6px).
Avoid: Avoid overly aggressive or salesy language.
Avoid: Avoid cluttered layouts or excessive visual noise.
Avoid: Avoid using more than 2-3 font families.
Avoid: Avoid overly bright or neon color palettes.
Avoid: Avoid dense, unbroken blocks of text without imagery.
Avoid: Avoid complex, multi-layered shadows or gradients.
Captured from the live site · real computed styles
11
System prompt
This is a curated editorial website focused on lifestyle, fashion, and culture, positioned as a sophisticated digital magazine. The design DNA centers on a warm, off-white background (#FAF8EF) with dark, readable text (#1A202C) and vibrant blue (#2EA3F2) and purple (#4C40E0) accents. Typography pairs a transitional-serif for bold headlines with a humanist-sans for highly readable body text. Key critical donts: never use a dark mode, avoid using sans-serif for display headlines, and do not introduce a vibrant green accent color. The layout is clean, centered, and generous with whitespace, featuring image-forward cards and minimal, functional UI components.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
