---
name: Womp
description: "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."
version: alpha

colors:
  background: "#FCFCFC"
  primary: "#202020"
  neutral: "#8D8D8D"
  bg-soft: "#F2F2F2"
  line: "rgba(238,238,238,1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.1px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 500
    letterSpacing: "0.03px"

rounded:
  sm: 4.5px
  md: 7.5px
  lg: 14px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A clean, accessible platform for turning ideas into physical objects through powerful browser-based 3D tools.

*A modern, browser-based 3D design studio that bridges the gap between digital modeling and physical manufacturing.*

## Colors

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

- **Background (`#FCFCFC`)** — uses `bg` token
- **Primary text (`#202020`)** — uses `ink` token
- **Muted (`#8D8D8D`)** — uses `muted` token
- **Borders (`rgba(238,238,238,1)`)** — uses `line` token

## Typography

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

- 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'

## Layout

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

*Rhythm:* Consistent 8px base rhythm for padding and gaps, with larger 80px vertical padding for section isolation.

## Elevation & Depth

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

## Shapes

- `sm`: 4.5px
- `md`: 7.5px
- `lg`: 14px
- `pill`: 9999px

## Components

- **button:** Two primary styles: filled black with white text and rounded pill shape, and ghost/outlined with dark text and rounded pill shape.
- **card:** Feature cards with large, rounded corners (14px), subtle background color (#F2F2F2), and clean typography below.
- **chip:** Small, monospace uppercase chips with light gray borders used as section dividers.
- **input:** A large, centered prompt box with a light gray background, rounded corners, and a black call-to-action button inside.
- **hero:** A minimal, text-heavy hero section centered on a clean white background, featuring a large interactive prompt box.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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