---
name: Cosmos
description: "Worth including as a prime example of a modern, editorial-style curation platform that balances minimalism with rich visual content."
version: alpha

colors:
  background: "#F9F7F3"
  primary: "#000000"
  secondary: "#282828"
  tertiary: "#BC361B"
  neutral: "#8C8C8C"
  line: "rgba(0, 0, 0, 0.12)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 66px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.64px"
  h2:
    fontFamily: humanist-sans
    fontSize: 38px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.52px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

A premium, editorial visual discovery platform for curating and sharing aesthetic inspiration.

*A high-end visual magazine mixed with a personal digital scrapbook.*

## Colors

Minimalist canvas with high-contrast typography, letting the curated photographic content provide the primary visual interest.

- **Background (`#F9F7F3`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#282828`)** — uses `ink-soft` token
- **Accent (`#BC361B`)** — uses `accent` token
- **Muted (`#8C8C8C`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.12)`)** — uses `line` token

## Typography

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

- Headlines use the transitional serif (cosmosOracle) with tight tracking.
- UI elements use a humanist sans-serif.
- Maintain a high contrast between large display text and background.

## Layout

Centered hero with floating, rounded image cards.

*Rhythm:* Consistent 4px base grid with standard Tailwind-like spacing steps.

## Elevation & Depth

- 0px 4px 8px 0px rgba(0, 0, 0, 0.03)
- 0px 6px 44px 0px rgba(0, 0, 0, 0.15)
- Borders: Subtle 1px solid borders with low opacity (rgba(0,0,0,0.12)).

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons, either solid black with white text or outlined with black text.
- **card:** Rounded image cards with subtle drop shadows and varying rotations.
- **chip:** Pill-shaped toggle tabs for settings (e.g., AI content).
- **input:** Large, rounded pill search bar with subtle border and icons.
- **hero:** Full-width centered layout with a large serif headline and floating image elements.

## Do's and Don'ts

**Don't:**
- Don't use decorative or highly ornate fonts — screenshot shows clean transitional serifs and humanist sans.
- Don't use bright, saturated neon colors — screenshot shows a muted off-white canvas (#F9F7F3) and black text.
- Don't use sharp, square corners — screenshot shows large border-radius (16px) on cards and buttons.
- Don't use heavy, thick borders — screenshot shows very subtle 1px low-opacity borders.
- Don't use dense, text-heavy layouts — screenshot shows ample whitespace and a focus on large imagery.
- Don't use complex, multi-layered gradients — screenshot shows simple, single-tone backgrounds.

---

## System Prompt (paste into AI agent)

```
A premium visual discovery platform (COSMOS) for curating and sharing aesthetic inspiration. The design uses a minimalist off-white canvas (#F9F7F3) to let high-contrast black text (#000000) and photographic content take center stage. Typography combines a clean transitional serif for headlines with a humanist sans-serif for UI elements, utilizing large sizes and tight tracking. Critical donts: do not use neon or overly saturated colors, do not use sharp square corners, do not create dense text-heavy layouts, do not use heavy decorative fonts, and do not use complex, distracting gradients.
```