---
name: Sketch
description: "This site is a prime example of a modern, professional SaaS product that uses typography and whitespace to create a premium feel."
version: alpha

colors:
  background: "#f5f5f5"
  primary: "#212123"
  secondary: "#000000"
  neutral: "#0000006b"
  bg-soft: "#ffffff"
  bg-quiet: "#f0f0f0"
  muted-soft: "#00000052"
  line: "rgba(0,0,0,0.32)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.5px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A professional, high-contrast design platform that centers the user's work within a refined, dark-themed UI.

*A premium, focused toolkit that feels like a well-crafted studio environment.*

## Colors

High-contrast neutrals with a subtle warm gradient in the hero to create focus and depth.

- **Background (`#f5f5f5`)** — uses `bg` token
- **Primary text (`#212123`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Muted (`#0000006b`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.32)`)** — uses `line` token

## Typography

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

- Display font is a transitional serif with high contrast.
- Body text uses a neutral humanist sans-serif.
- Letter spacing is tightly tracked on large display sizes.

## Layout

Centered content with generous padding and a clear visual hierarchy.

*Rhythm:* Based on a 4px grid with generous whitespace for breathing room.

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 1px 4px 0px
- rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
- Borders: Subtle 1px borders in rgba(0,0,0,0.32) for definition.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Dark, rounded rectangles with high contrast text.
- **card:** Rounded containers with subtle shadows, used for feature showcases.
- **chip:** Small, rounded labels with background color and uppercase text.
- **input:** Minimalist, rounded input fields with subtle borders.
- **hero:** Large, split-section layout with a prominent serif headline and a soft gradient background.

## Do's and Don'ts

**Don't:**
- Don't use low-contrast text — screenshot shows high-contrast ink on light backgrounds.
- Don't use overly decorative fonts for body text — screenshot uses a clean humanist sans.
- Don't use harsh, bright accent colors for primary actions — screenshot uses dark, high-contrast buttons.
- Don't clutter the layout with too many elements — screenshot maintains generous whitespace.
- Don't use sharp, square corners for primary components — screenshot uses rounded corners (20px, 12px).
- Don't use thin, light fonts for large headlines — screenshot uses a bold, high-contrast serif.

---

## System Prompt (paste into AI agent)

```
This is a premium design tool website positioned as a focused, professional toolkit for designers. Key hex colors include a light gray background (#f5f5f5), high-contrast dark ink (#212123), and subtle muted tones for secondary text. Typography features a transitional-serif for display headlines (like 'Designers, welcome home.') and a humanist-sans for body copy. Critical donts: 1. Don't use low-contrast text; the design relies on high legibility. 2. Don't use overly decorative fonts for body text; maintain clarity. 3. Don't clutter the layout; preserve the generous whitespace that creates focus. 4. Don't use harsh, bright accent colors for primary buttons; keep them dark and high-contrast. 5. Don't use sharp, square corners for components; use the established rounded corner system. 6. Don't use thin, light fonts for large headlines; use the high-contrast serif font for impact.
```