CURATED · OPEN · FREE

Womp

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

01

Identity DNA

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

02

Color

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

03

Typography

humanist-sans · monospace

• display60px · 400
• h148px · 400
• body16px · 400
• caption12px · 500

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'

04

Spacing

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

05

Surfaces

1px solid borders primarily using #EEEEEE or rgba(32,32,32,1) for high contrast elements.

inset 0 0 0 1px color(srgb 0.85098 0.85098 0.85098)

06

Layout

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

07

Motion & Interaction

Consistent 150ms ease-in-out transitions for all interactive states (background, box-shadow, transform, scale).

Background and box-shadow changes for buttons and interactive elements. · Scale or transform micro-interactions.

08

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.

09

Voice & Don'ts

• Tone Direct, confident, and encouraging.
• Headlines Concise, benefit-driven statements with tight letter-spacing.
• CTAs Action-oriented with arrow icons, using either high-contrast black fills or subtle ghost outlines.

• 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.
• Avoid: Overly technical jargon
• Avoid: Dense paragraphs
• Avoid: Cluttered layouts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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