A digital gallery platform bridging music, art, and technology.
02
Color
#000000Ink
#5A5A5AInk soft
#3A3A3ABG
rgba(0,0,0,0.6)Line
High-contrast monochrome palette with gray mid-tones.
03
Typography
humanist-sans
display49px · 400
heading31px · 400
body18px · 400
caption13px · 400
Large headings use tight negative letter-spacing. · Text is predominantly black on gray backgrounds. · Uppercase is used frequently for tags and labels.
04
Spacing
4px
9px
13px
18px
27px
36px
54px
72px
4.5px base unit with consistent increments.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid black or 1px solid rgba(0,0,0,0.6) used for structure.
none
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Masonry-style asymmetric grid.
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
Smooth 0.2s opacity and background-color transitions.
Subtle color changes or opacity shifts. · Immediate response with micro-transitions.
08
Components
buttonMinimal outline buttons with uppercase text.
cardGrid-based editorial cards with images and tags.
chipSmall, pill-shaped outline tags.
inputMinimal text input with bottom border.
heroFull-width center-aligned headline over a 3D rotating object.
09
Voice & Don'ts
ToneProfessional and sophisticated.
HeadlinesLarge, center-aligned, and lowercase or mixed case.
CTAsUnderstated, often outline-style or simple text links.
Don't use bright accent colors — screenshot shows a monochrome palette.
Don't use bold font weights — screenshot shows only weight 400.
Don't use rounded corners for main elements — screenshot shows mostly sharp or 4.5px radii.
Don't center-align all text — screenshot shows left-aligned navigation and tags.
Don't use drop shadows — screenshot shows completely flat surfaces.
Captured from the live site · real computed styles
11
System prompt
This is a refined editorial platform for an art-tech collective. The design DNA features a monochrome palette with a medium gray (#3A3A3A) background, black ink (#000000), and subtle gray accents (#5A5A5A). Typography is strictly humanist-sans with a 400 font weight, utilizing a tight negative letter-spacing for large, expressive headlines. The layout is a clean, asymmetric masonry grid with minimal 1px borders. Critical donts: never use bright, saturated accent colors; never use bold or italic font weights; and never use heavy drop shadows or complex gradients.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
