# Womp · Design system migration spec

> Source: https://womp.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of restrained, modern SaaS design where typography and white space do the heavy lifting, allowing complex product imagery to shine.

## 1. Identity DNA

Womp operates as a modern, browser-based 3D design studio, a digital workshop bridging the conceptual gap between modeling on screen and manufacturing in the physical world. Its design system is built to support this function with clarity and precision, letting the complexity of the work be the focus rather than the interface itself.

**One-liner:** A clean, accessible platform for turning ideas into physical objects through powerful browser-based 3D tools.
**Keywords:** 3D creation · browser-based · physical product design · speed
**Analogy:** A modern, browser-based 3D design studio that bridges the gap between digital modeling and physical manufacturing.

## 2. Color

The palette is a disciplined monochrome spectrum, engineered for high contrast and neutrality. A near-white ground, deep ink text, and soft gray surfaces create a stage where the 3D product imagery is the only actor.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCFCFC` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#202020` | body text |
| `--muted` | `#8D8D8D` | placeholder |
| `--line` | `rgba(238,238,238,1)` | divider |

**Color principle:** High-contrast monochrome palette with soft gray surfaces, ensuring the 3D product imagery remains the focal point.

The system's principle is restraint: the interface provides a clean, professional backdrop that never competes with the work being created within it.

## 3. Typography

Typography employs a humanist-sans category set at a regular weight, used for both commanding display and readable body text. This consistent voice, paired with a functional monospace for technical labels, communicates directness and accessibility.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | -1.5px | Hero headlines |
| h1 | 48px | 1.0 | 400 | -1px | Section headlines |
| body | 16px | 1.5 | 400 | -0.1px | Default text |
| caption | 12px | 1.33 | 500 | 0.03px | Micro labels and UI elements |

**Type rules:**
- Use tight letter-spacing for large display text
- Maintain consistent regular weight (400) for primary text
- Use monospace for technical labels like 'OR LAUNCH A QUICK APP'

## 4. Spacing

A consistent 8px base rhythm governs all padding and gaps, creating a predictable and harmonious spatial structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 px
- **Rhythm:** Consistent 8px base rhythm for padding and gaps, with larger 80px vertical padding for section isolation.

## 5. Surfaces

Surface depth is suggested not by shadow, but by precise, subtle boundaries. A palette of 1px solid borders and inset box-shadows in soft grays defines elevation with quiet clarity.

- **Radius:** sm 4.5px · md 7.5px · lg 14px · pill 9999px
- **Shadows:**
  - inset 0 0 0 1px color(srgb 0.85098 0.85098 0.85098)
- **Borders:** 1px solid borders primarily using #EEEEEE or rgba(32,32,32,1) for high contrast elements.

## 6. Layout

The foundational layout skeleton begins with a generous, centered single-column hero, establishing a singular focus. This then opens into a structured 2-column grid for feature presentation, maintaining order without clutter.

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

**Skeleton:** Centered single-column hero with generous vertical whitespace, transitioning to a 2-column grid for feature cards.

## 7. Motion & Interaction

Motion philosophy is one of minimal, efficient communication. All interactive state changes are standardized to a quick 150ms ease-in-out transition, reinforcing the system's emphasis on speed and direct response.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Consistent 150ms ease-in-out transitions for all interactive states (background, box-shadow, transform, scale).

- **Hover:** Background and box-shadow changes for buttons and interactive elements.
- **Click:** Scale or transform micro-interactions.
- **Transition:** All interactive elements share a standardized 150ms ease-in-out transition.
- **Keyboard:** Standard focus management implied by interactive states.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and encouraging, mirroring the tool's promise of accessible power. Headlines are concise and benefit-driven, with CTAs that use clear action language.

- **Tone:** Direct, confident, and encouraging.
- **Headline style:** Concise, benefit-driven statements with tight letter-spacing.
- **CTA style:** Action-oriented with arrow icons, using either high-contrast black fills or subtle ghost outlines.
- **Avoid:** Overly technical jargon / Dense paragraphs / Cluttered layouts

### Don'ts
- ❌ Don't use decorative gradients or complex backgrounds — screenshot shows a clean, near-white solid background.
- ❌ Don't use all-caps for headlines — screenshot shows sentence or title case for primary display text.
- ❌ Don't use rounded square or sharp corners — screenshot shows a mix of tight pills and generous 14px radii.
- ❌ Don't use high-chroma accent colors — screenshot shows a strictly monochrome palette with no dominant bright colors.
- ❌ Don't use heavy drop shadows — screenshot shows only subtle 1px inset borders for elevation.
- ❌ Don't clutter the layout with multiple columns — screenshot shows a very focused, single-column centered hero.

The system deliberately forgoes decorative gradients, high-chroma accents, and complex animations, choosing instead a path of maximum clarity and performance.

## System Prompt (paste into AI tool)

```
A clean, monochrome SaaS design for a 3D creation tool, using a near-white background (#FCFCFC), dark ink (#202020), and soft grays (#F2F2F2, #8D8D8D). Typography relies on a humanist-sans font at regular weights (400) for both display and body, with monospace used for micro-labels. Critical donts: avoid high-chroma accent colors (none exist), avoid decorative gradients (use solid colors), avoid cluttered layouts (use generous whitespace), avoid heavy shadows (use subtle inset borders), avoid all-caps headlines, and avoid complex animations (use fast 150ms transitions). The site emphasizes clarity and speed, making the 3D imagery the primary focal point.
```