← OpenDesign CURATED · OPEN · FREE
Milieu Grotesque
A curated platform for premium typefaces and design foundries.
type foundry
01
Identity DNA
Typography Foundry Design Fonts Curation
A high-end gallery for type designers.
02
Color
#1A73E8Accent
#1E242CInk
#576579Ink soft
#FFFFFFBG
#F4F4F4BG soft
#313945Muted
rgba(30,36,44,1.0)Line
High contrast dark text on clean light surfaces, with a strong blue accent for interactive elements.
03
Typography
grotesque-sans · humanist-sans
display 56px · 500heading 26px · 400body 13px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent use of multiples of 4px for padding and margins.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Solid 1px borders using the primary ink color.
rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width hero sections transitioning into structured grid layouts for content cards.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
Smooth transitions on all interactive elements · 0.5s duration for broader layout shifts
Subtle color shifts or opacity changes on interactive elements. · Immediate feedback with no significant scale transform.
08
Components
button Solid accent color buttons with pill-shaped radius and white text. card Image-heavy cards with minimal chrome, often featuring full-bleed photography. chip Small, rounded tags used for filtering or categorization. input Search bar with a prominent lens icon and 'AI Search' call-to-action. hero Large, dramatic photographic backgrounds with overlaid text and high-contrast typography. 09
Voice & Don'ts
Tone Professional, authoritative, and creatively sophisticated. Headlines Bold, clean, and often oversized to showcase the typefaces. CTAs Direct and action-oriented, using strong color contrast. don't use rounded, friendly icons — screenshot shows sharp, geometric UI elements don't apply drop shadows everywhere — screenshot shows mostly flat, clean surfaces don't use a multi-color rainbow palette — screenshot shows a disciplined blue-and-dark-neutral scheme don't use script or decorative fonts for UI — screenshot shows strictly functional sans-serifs don't use low-contrast gray text — screenshot shows high-contrast dark ink for readability don't use cluttered backgrounds behind text — screenshot shows clean white or solid dark sections Avoid: Playful or whimsical language Avoid: Overly complex jargon Avoid: Cluttered layouts Avoid: Unnecessary decorative elements 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
A sophisticated type foundry marketplace with a clean, editorial aesthetic. Key colors are ink #1E242C on white #FFFFFF with a blue accent #1A73E8. Typography utilizes grotesque and humanist sans-serif categories. Critical donts: avoid whimsical icons, minimize drop shadows, avoid multi-color palettes, strictly use functional sans-serifs, ensure high-contrast text, and maintain clean backgrounds for legibility.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is worth including as a masterclass in professional typography-driven design, balancing bold creative expression with functional e-commerce.
