---
name: Create
description: "The design effectively balances a playful, creative AI tool identity with a clean, professional SaaS aesthetic."
version: alpha

colors:
  background: "#F9F9F9"
  primary: "#000000"
  secondary: "#18191B"
  neutral: "#6A6A6C"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F2F2F2"
  muted-soft: "#ACADAE"
  line: "rgba(187, 187, 187, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 42px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.17
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  body-large:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 30px

---

## Overview

AI-native platform for turning words into functional apps, sites, and tools.

*A playful yet professional workshop where anyone can build digital products with AI.*

## Colors

Clean, light neutrals with a photographic hero and black contrast for primary actions.

- **Background (`#F9F9F9`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#18191B`)** — uses `ink-soft` token
- **Muted (`#6A6A6C`)** — uses `muted` token
- **Borders (`rgba(187, 187, 187, 1)`)** — uses `line` token

## Typography

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

## Layout

Centered, single-column hero followed by card-based sections.

*Rhythm:* Consistent 4px base with generous padding in sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 10px 15px -3px
- rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
- Borders: 1px solid #BBBBBB

## Shapes

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

## Components

- **button:** Pill-shaped primary button with high contrast, smaller secondary buttons.
- **card:** Large, rounded cards with prominent imagery and descriptions below.
- **chip:** Not clearly visible, likely simple rounded elements.
- **input:** Large, rounded white input field on the hero for user prompts.
- **hero:** Full-bleed photographic background with centered text and input.

## Do's and Don'ts

**Don't:**
- Don't use a stark white background — screenshot shows a light gray (#F9F9F9) background.
- Don't use a purely sans-serif logo — screenshot shows a serif font for 'Any' in the brand name.
- Don't use bright, saturated accent colors as primary backgrounds — screenshot uses a full-bleed photograph.
- Don't use sharp, square corners on major elements — screenshot shows 20px border-radius on cards and inputs.
- Don't use heavy, dark shadows — screenshot shows very subtle, low-opacity shadows.
- Don't make the typography monochromatic and uniform — screenshot shows contrast between serif display and sans-serif body.

---

## System Prompt (paste into AI agent)

```
A friendly, AI-native SaaS platform for building apps with words. Use light gray (#F9F9F9) or white (#FFFFFF) backgrounds, black (#000000) for primary text and CTAs, and subtle gray (#6A6A6C, #ACADAE) for secondary text. Typography mixes a transitional-serif (for display) with a humanist-sans (for body). The layout is centered, clean, and spacious. Critical don'ts: Don't use sharp corners (min 8px radius). Don't use heavy shadows. Don't clutter the interface with complex grids.
```