A high-end, meticulously curated library for modernist logo design.
02
Color
#fde533Accent
#ffffffInk
#a8afb7Ink soft
#18181bBG
#27272aBG soft
#343538BG quiet
rgba(255, 255, 255, 0.1)Line
High-contrast dark mode with a single bright yellow accent for primary actions.
03
Typography
transitional-serif · grotesque-sans
display96px · 400
body-lg18px · 400
body16px · 400
Use italicized transitional-serif for emphasis within display headlines. · Body text remains consistently grotesque-sans across all UI elements.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A strict 4px grid system creates a clean, predictable vertical rhythm.
05
Surfaces
sm · 4px
md · 20px
lg · 28px
pill · 999px
No visible borders; spatial separation is achieved through background color shifts.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A centered single-column layout with significant negative space to emphasize the typography.
07
Motion & Interaction
150msmicro
400mssmall
1200msmedium
cubic-bezier(0.08, 0.82, 0.17, 1)easing
Smooth, elastic easing for logo animations. · Subtle hover transitions on interactive elements.
Subtle background color shifts on buttons and interactive elements. · Immediate visual feedback with reduced scale or opacity.
08
Components
buttonPill-shaped buttons with either high-contrast yellow fill or subtle grey background.
cardRounded containers with dark backgrounds used to group content sections.
chipSmall inline tags with background fill used for highlighting specific information.
inputNot prominently visible, but follows the established pill-shaped styling.
heroFull-width centered layout dominated by massive typography and floating brand logos.
09
Voice & Don'ts
ToneConfident, authoritative, and minimalist.
HeadlinesDeclarative and bold, using a mix of regular and italicized serif for emphasis.
CTAsDirect and clear, focusing on value propositions like pricing.
Don't use multiple accent colors — screenshot shows only one dominant yellow (#fde533) against a dark background.
Don't use heavy borders — screenshot shows separation achieved through background color blocks and spacing.
Don't use drop shadows — screenshot shows flat, layered surfaces without elevation.
Don't use all-caps for body text — screenshot uses sentence case for readability.
Don't use small display sizes — screenshot shows massive 96px headlines dominating the viewport.
Don't use bright, high-chroma backgrounds — screenshot uses a strict dark mode palette.
Avoid: Avoid cluttered layouts or unnecessary UI elements.
Avoid: Avoid multiple competing accent colors.
Avoid: Avoid casual or overly enthusiastic language.
11
System prompt
This is a premium design tool and curation platform focused on logo inspiration. The visual identity is built on a dark mode palette (#18181b, #27272a, #343538) with a single high-chroma yellow accent (#fde533) for primary calls to action. Typography is a sophisticated pairing of transitional-serif for display headlines (often italicized for emphasis) and grotesque-sans for body text, set at a massive scale. The layout is clean and centered, relying on generous negative space. Critical constraints: never use multiple accent colors, avoid heavy borders or drop shadows, and never use small display sizes for headlines. Maintain a confident, authoritative voice throughout.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
