A high-end design studio merged with a modern tech startup.
02
Color
#BD9FFFAccent
#232425Ink
rgba(35,36,37,0.72)Ink soft
#FFF9F4BG
#EDE7E0BG soft
rgba(35,36,37,1.0)Line
High-contrast editorial palette with a warm, off-white base and a vibrant lavender accent for interactive elements.
03
Typography
didone-serif · humanist-sans · monospace
display74px · 400
h148px · 400
body16px · 400
caption11px · 500
Display type is a high-contrast serif with tight tracking. · Body text uses a clean humanist sans-serif. · Small text uses uppercase tracking for labels and navigation.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Vertical rhythm is established through generous padding, typically 80px on major section blocks.
05
Surfaces
sm · 4px
md · 8px
lg · 19px
pill · 999px
1px solid #232425
rgba(35, 36, 37, 0.08) 0px 1px 2px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A single-column editorial layout that expands into a multi-column grid for feature showcases.
07
Motion & Interaction
150msmicro
180mssmall
450msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Fade and slide for content transitions. · Hover color and background shifts on interactive elements.
Subtle color shifts and opacity changes. · Immediate visual feedback with no complex animations.
08
Components
buttonPill-shaped buttons with high-contrast fills (black/white/lavender) and generous padding.
cardFeature cards with clean typography, sometimes accompanied by large imagery.
chipSmall, uppercase text labels for categorization.
inputClean, bordered input fields.
heroMassive serif typography paired with a full-width image or carousel.
09
Voice & Don'ts
ToneConfident, professional, and design-focused.
HeadlinesConcise, impactful statements using a large serif font.
CTAsDirect and action-oriented, often using pill-shaped buttons.
Don't use a bright white (#FFFFFF) for the primary background — the screenshot shows a warm off-white (#FFF9F4) instead.
Don't use generic sans-serif for headlines — the screenshot shows a high-contrast serif font.
Don't use a standard blue for accents — the screenshot shows a distinct lavender (#BD9FFF) for interactive elements.
Don't use sharp, square corners on buttons — the screenshot shows fully rounded, pill-shaped buttons.
Don't use heavy, blocky shadows — the screenshot shows very subtle, almost invisible box-shadows.
Don't use a dense, cramped layout — the screenshot shows generous whitespace and padding around content blocks.
Captured from the live site · real computed styles
11
System prompt
A premium AI image generation platform with a refined, editorial aesthetic. The design relies on a high-contrast palette featuring a warm off-white (#FFF9F4) background, dark ink (#232425), and a vibrant lavender accent (#BD9FFF). Typography pairs a high-contrast didone-serif for headlines with a clean humanist-sans for body text. Critical don'ts: avoid pure white backgrounds, avoid generic sans-serif headlines, and avoid square corners on buttons. The layout is spacious and editorial, prioritizing clarity and visual impact.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
