CURATED · OPEN · FREE

Goodfit Us

A refined and minimalist e-commerce platform with strong typographic presence and a restrained, premium aesthetic.

PremiumCleanTypographyCurationReference

↓ Download design system (20 MB)Open in OpenDesign

Visit: https://goodfit.us

📦 Browse pack contents →

Identity DNA

curateddesign-forwardcleanrefinedsophisticated

A well-curated gallery or boutique storefront.

Color

#4E64DFAccent

#151523Ink

#FFFFFFBG

#F4F4F5BG soft

#F3F4F6BG quiet

#E9E9ECMuted

rgba(21, 21, 35, 0.1)Line

High-contrast monochrome base with a single vibrant blue accent for interactive elements.

Typography

geometric-sans

display24px · 700
body16px · 400
body-semibold16px · 600

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px grid system applied to padding and gaps.

Surfaces

sm · 8px

md · 12px

lg · 20px

pill · 100px

1px solid rgba(21, 21, 35, 0.1) or solid dark borders for contrast

rgba(0, 0, 0, 0.06) 0px 6px 18px 0px · rgba(21, 21, 35, 0.2) 0px 2px 4px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard 12-column grid with generous whitespace and centered content containers.

Motion & Interaction

100msmicro

150mssmall

400msmedium

ease-in-outeasing

Subtle fade-ins · Smooth background transitions · Interactive hover states

Smooth color shifts or subtle elevation changes on interactive elements. · Immediate feedback via color changes or subtle state transitions.

Components

button Pill-shaped (border-radius: 100px) with solid accent color or dark background, featuring high-contrast white text.
card Rounded containers (12-20px radius) with subtle shadows and defined borders.
chip Small, rounded labels or tags, often with dark borders.
input Standard text fields with subtle borders and rounded corners.
hero Large typographic displays with prominent imagery and clear calls-to-action.

Voice & Don'ts

Tone Confident, clean, and curated.
Headlines Bold, geometric sans-serif with tight tracking and high contrast.
CTAs Direct and action-oriented, often using pill-shaped buttons.

Don't use multiple competing accent colors — screenshot shows a single dominant blue accent.
Don't use serif fonts for primary body text — screenshot shows geometric sans-serif.
Don't use sharp, square corners on primary buttons — screenshot shows pill-shaped, rounded buttons.
Don't use overly dark or black backgrounds for main content areas — screenshot shows a predominantly white/light background.
Don't use complex, busy background textures — screenshot shows clean, flat, or subtly gradient backgrounds.
Don't use low contrast between text and background — screenshot shows high-contrast dark text on light backgrounds.
Avoid: Cluttered layouts
Avoid: Overly complex color palettes
Avoid: Unnecessary decorative elements

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a refined, minimalist e-commerce platform with a premium, curated aesthetic. The design relies on a high-contrast monochrome base (white backgrounds, dark ink text) with a single vibrant blue accent (#4E64DF) for interactive elements. Typography is exclusively geometric sans-serif, featuring bold, tightly tracked headlines and clean body text. The layout is spacious and structured, utilizing a 12-column grid with consistent 4px spacing increments. Key components like buttons use distinct pill shapes (border-radius: 100px) and solid color fills. Critical constraints: avoid using multiple accent colors, never use serif fonts for UI text, and do not apply sharp corners to primary interactive elements. Transitions are subtle and brief (0.1s-0.15s), focusing on smooth state changes rather than complex animations.

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