# Goodfit Us · Design system migration spec

> Source: https://goodfit.us  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a refined, minimalist design system with a clear focus on typography and a restrained color palette, making it suitable for premium product or editorial contexts.

## 1. Identity DNA

Goodfit Us operates with the deliberate calm of a well-curated gallery. Its system is built on a foundation of typographic confidence and chromatic restraint, where every element earns its place through clear function and refined form. The result is a design language that feels both contemporary and timeless, like a boutique storefront that needs no signage beyond its own carefully arranged contents.

**One-liner:** A refined and minimalist e-commerce platform with strong typographic presence and a restrained, premium aesthetic.
**Keywords:** curated · design-forward · clean · refined · sophisticated
**Analogy:** A well-curated gallery or boutique storefront.

## 2. Color

The palette is a study in contrast and focus. A monochrome base of white and deep ink provides the canvas, while a single vibrant blue accent serves as the system's sole interactive highlight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F5` | card background |
| `--bg-quiet` | `#F3F4F6` | quiet area |
| `--ink` | `#151523` | body text |
| `--muted` | `#E9E9EC` | placeholder |
| `--accent` | `#4E64DF` | single accent |
| `--line` | `rgba(21, 21, 35, 0.1)` | divider |

**Color principle:** High-contrast monochrome base with a single vibrant blue accent for interactive elements.

The principle is clear: color is a functional tool, not a decorative one, used sparingly to direct attention and confirm interaction.

## 3. Typography

Type is the primary voice of the system, set exclusively in geometric sans-serif for a clean, contemporary character. Headings are bold and tightly tracked for impact, while body text maintains a comfortable, readable scale.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.0 | 700 | -1px | Headings and key promotional text |
| body | 16px | 1.6 | 400 | normal | Primary body text |
| body-semibold | 16px | 1.6 | 600 | normal | Emphasized body text and navigation |

## 4. Spacing

All spatial relationships are governed by a consistent 4px grid, creating a predictable and harmonious rhythm across padding and gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid system applied to padding and gaps.

## 5. Surfaces

Surface treatments employ subtle, layered shadows to create a gentle sense of depth without visual weight. Borders are defined but delicate, using semi-transparent dark tones to maintain the high-contrast principle without harshness.

- **Radius:** sm 8px · md 12px · lg 20px · pill 100px
- **Shadows:**
  - rgba(0, 0, 0, 0.06) 0px 6px 18px 0px
  - rgba(21, 21, 35, 0.2) 0px 2px 4px 0px
- **Borders:** 1px solid rgba(21, 21, 35, 0.1) or solid dark borders for contrast

## 6. Layout

The structural skeleton is a standard 12-column grid, designed for generous whitespace and centered content containers. This framework ensures a spacious, uncluttered feel that supports focused reading and browsing.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a functional signal rather than a decorative flourish. Transitions are brief and smooth, typically between 0.1 and 0.15 seconds, providing immediate feedback on interaction without lingering animation.

- **Durations:** micro 100ms · small 150ms · medium 400ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Subtle fade-ins
  - Smooth background transitions
  - Interactive hover states

- **Hover:** Smooth color shifts or subtle elevation changes on interactive elements.
- **Click:** Immediate feedback via color changes or subtle state transitions.
- **Transition:** Consistent 0.1s to 0.15s ease-in-out transitions on most interactive properties.
- **Keyboard:** Standard focus management for interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, clean, and curated—direct in its communication and devoid of unnecessary embellishment. This tone extends to every interface label and call-to-action, prioritizing clarity over cleverness.

- **Tone:** Confident, clean, and curated.
- **Headline style:** Bold, geometric sans-serif with tight tracking and high contrast.
- **CTA style:** Direct and action-oriented, often using pill-shaped buttons.
- **Avoid:** Cluttered layouts / Overly complex color palettes / Unnecessary decorative elements

### Don'ts
- ❌ 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.

## System Prompt (paste into AI tool)

```
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.
```