---
name: Godly
description: "This site is an excellent example of how extreme restraint in UI design can elevate the perceived quality and focus of curated content, making it a perfect reference for editorial and gallery layouts."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  line: "rgba(0, 0, 0, 0.05)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.64px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.28px"

rounded:
  sm: 6px
  md: 12px
  lg: 24px
  pill: 9999px

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

---

## Overview

A minimal, high-end curation gallery designed to showcase web design inspiration.

*A pristine, expansive gallery space where the artwork is the only thing that matters.*

## Colors

Strict monochromatic palette that acts as a neutral frame for the diverse colors of the curated content.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Borders (`rgba(0, 0, 0, 0.05)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- All text uses Inter font-family with slight negative letter-spacing.
- Headlines use font-weight 500 for a semi-bold appearance.
- Body text maintains a relaxed 1.5 line height for readability.

## Layout

A central, single-column layout for the hero section, transitioning into a dense, symmetrical masonry grid of content cards.

*Rhythm:* Generous white space and consistent padding create a clean, breathable rhythm.

## Elevation & Depth

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

## Shapes

- `sm`: 6px
- `md`: 12px
- `lg`: 24px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons with solid black backgrounds for primary actions, and subtle, borderless styles for secondary actions.
- **card:** Clean, borderless rectangular cards that prioritize large visual thumbnails with minimal text.
- **chip:** Small, pill-shaped text indicators used for navigation or metadata.
- **input:** Minimal, borderless input fields that blend into the background.
- **hero:** A massive, vertically-centered headline with a lightning bolt icon, accompanied by large, prominent pill-shaped call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows on cards — screenshot shows completely flat, borderless image cards.
- Don't use serif fonts for headlines — screenshot shows a clean, humanist sans-serif throughout.
- Don't use a complex, multi-color UI chrome — screenshot shows a strictly monochromatic black and white interface.
- Don't use sharp, 90-degree corners on primary buttons — screenshot shows fully rounded, pill-shaped buttons.
- Don't use excessive body padding or tight line spacing — screenshot shows generous white space and a relaxed 1.5 line height.
- Don't use flashy gradients or decorative backgrounds — screenshot shows a solid white background that lets the content breathe.

---

## System Prompt (paste into AI agent)

```
You are designing a premium, minimalist web design inspiration gallery. The aesthetic is defined by a strict black-and-white color palette (#FFFFFF background, #000000 text) that acts as a neutral frame for curated content. The typography is exclusively a humanist sans-serif with tight, negative letter-spacing (-0.32px) and a moderate font-weight of 400 for body and 500 for headlines. The layout relies heavily on a symmetrical masonry grid with generous white space. Critical constraints: Do not use serif fonts. Do not apply drop shadows or borders to the main content cards. Do not introduce any chromatic accent colors into the UI chrome. Use pill-shaped buttons with solid fills for primary actions and subtle, borderless elements for secondary interactions.
```