CURATED · OPEN · FREE

Footer

A curated design gallery focusing on bold typography and editorial presentation.

designgallery

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.footer.design

📦 Browse pack contents →

Identity DNA

CurationEditorialFooterDesign GalleryMinimal

A clean, typographic gallery curation platform

Color

#242424Ink

rgba(36,36,36,0.64)Ink soft

#FFFFFFBG

#F2F2F2BG soft

#737373Muted

rgba(36,36,36,0.12)Line

Strictly monochromatic with high contrast between white space and dark text

Typography

grotesque-sans · humanist-sans

display32px · 600

Primary text uses 18px with -0.54px tracking · Secondary text uses 14px with -0.42px tracking · Headings use 600 weight · Body text uses 400 weight

Spacing

4px

8px

12px

16px

24px

40px

60px

Consistent spacing increments of 4, 8, 12, 16, 24, 40, 60

Surfaces

sm · 4px

md · 8px

lg · 1600px

pill · 1600px

1px solid rgba(36,36,36,0.12) on cards and buttons

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Multi-column grid layout for gallery cards

Motion & Interaction

150msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle fade transitions on hover · Smooth color and background-color changes · Opacity transitions for state changes

Color and background-color transitions over 0.15s · Standard pointer cursor

Components

button Pill-shaped with 1600px border radius, black or white fill
card Image-heavy with minimal borders and clear typography
chip Small rounded tags for filtering
hero Large typographic introduction with subtle animations

Voice & Don'ts

Tone Professional, clean, and curated
Headlines Bold, tightly tracked, uppercase or large case
CTAs Direct and action-oriented with pill-shaped buttons

Don't use vibrant accent colors — screenshot shows strictly monochromatic palette
Don't use rounded corners except for pill buttons — screenshot shows sharp corners on cards
Don't use drop shadows — screenshot shows flat, border-defined surfaces
Don't use decorative fonts — screenshot uses clean grotesque and humanist sans-serifs
Don't create dense layouts — screenshot uses generous white space and clear hierarchy
Don't use multiple font families — screenshot relies primarily on Inter with varying weights
Avoid: Cluttered interfaces
Avoid: Excessive decorative elements
Avoid: Vague language

Inside the pack — real screenshots

Footer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A minimalist design curation gallery focusing on editorial presentation of web design work. The palette is strictly monochromatic using #FFFFFF backgrounds, #F2F2F2 soft backgrounds, #242424 primary ink, and rgba(36,36,36,0.64) secondary text. Typography uses Inter (humanist-sans for body, grotesque-sans for display) with tight letter spacing. Critical don'ts: avoid vibrant accent colors, avoid rounded corners except on pill buttons, avoid drop shadows, avoid decorative fonts, avoid dense layouts, avoid multiple font families. The design emphasizes clean lines, generous spacing, and clear typographic hierarchy for showcasing curated design work.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko