---
name: Zora
description: "This site exemplifies the 'less is more' philosophy, using extreme restraint in UI elements to ensure the creator's visual content remains the absolute focus."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#121212"
  secondary: "#4D4D4D"
  tertiary: "#00DF00"
  neutral: "#878787"
  bg-soft: "#F5F5F5"
  line: "rgba(77,77,77,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 34px
    lineHeight: 1.18
    fontWeight: 500
    letterSpacing: "-0.84px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 21px
    lineHeight: 1.33
    fontWeight: 500
    letterSpacing: "-0.84px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.33
    fontWeight: 410
    letterSpacing: "-0.225px"
  small:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.23
    fontWeight: 410
    letterSpacing: "-0.195px"

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 minimalist social platform for sharing and collecting digital art and NFTs.

*Instagram for digital art and web3 collectors*

## Colors

Monochrome UI with high-contrast text and neon accent for action states.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#121212`)** — uses `ink` token
- **Secondary text (`#4D4D4D`)** — uses `ink-soft` token
- **Accent (`#00DF00`)** — uses `accent` token
- **Muted (`#878787`)** — uses `muted` token
- **Borders (`rgba(77,77,77,1.0)`)** — uses `line` token

## Typography

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

- Use Monument Grotesk for all interface text.
- Maintain tight tracking for display and body sizes.
- Use 410 weight for body, 500 for emphasis.

## Layout

3-column desktop layout: thin sidebar, central feed, right rail. Single-column mobile feed.

*Rhythm:* Consistent 4px grid-based spacing.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 5px 10px 0px
- rgba(0, 0, 0, 0.07) 0px 15px 25px 0px
- Borders: 1px solid #4D4D4D

## Shapes

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

## Components

- **button:** Pill-shaped for primary actions (Sign up), rounded for secondary (Follow).
- **card:** Content cards with large media areas and metadata below.
- **chip:** N/A
- **input:** Search bar with rounded corners and grey placeholder.
- **hero:** Full-width media feed (images, videos).

## Do's and Don'ts

**Don't:**
- don't use warm color palettes — screenshot shows a strict monochrome UI with green accents
- don't use decorative serif fonts — screenshot shows only sans-serif typography (Monument Grotesk)
- don't use complex shadows — screenshot shows minimal, flat elevation
- don't use rounded-square buttons for primary CTAs — screenshot shows pill-shaped 'Sign up' buttons
- don't use dark mode for the default state — screenshot shows a white background theme
- don't use multi-column text layouts — screenshot shows a single central feed column for content

---

## System Prompt (paste into AI agent)

```
Zora is a minimalist, creator-focused social platform for digital art and NFTs. The design DNA features a clean, white (#FFFFFF) background with dark ink (#121212) and neutral grey (#878787) for text, accented by a vibrant neon green (#00DF00). Typography is exclusively Grotesque Sans (Monument Grotesk), using a 410 weight for body text and 500 for emphasis, with tight negative letter-spacing. The layout follows a 3-column desktop structure with a central feed and 1280px max-width container. Critical constraints: never use decorative serifs, avoid warm color palettes, and maintain the 4px grid spacing. Interactions are fast (120ms) with cubic-bezier easing.
```