---
name: It's Nice That
description: "This site is a quintessential example of modern editorial design, successfully blending traditional serif typography with a vibrant, digital-first content strategy."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2B2B2B"
  secondary: "#676767"
  tertiary: "#6219FF"
  neutral: "#676767"
  bg-soft: "#F4F4F4"
  bg-quiet: "#FFEDD1"
  line: "rgba(43,43,43,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.47
    fontWeight: 400
    letterSpacing: "0.09px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "1px"

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

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

---

## Overview

A leading online publication and community championing global creativity through visual journalism and curated projects.

*A vibrant creative director's mood board brought to life as a daily digital publication.*

## Colors

High-contrast black-and-white base with a vibrant purple accent and warm pastel sections for content curation.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2B2B2B`)** — uses `ink` token
- **Secondary text (`#676767`)** — uses `ink-soft` token
- **Accent (`#6219FF`)** — uses `accent` token
- **Muted (`#676767`)** — uses `muted` token
- **Borders (`rgba(43,43,43,1.0)`)** — uses `line` token

## Typography

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

- Use transitional-serif for large, authoritative headlines and display text.
- Use humanist-sans for all body copy and functional UI elements to maintain high readability.
- Maintain tight tracking (-1px) on large display type for a modern editorial feel.
- Use generous line-height (~1.5) for body text to ensure comfortable reading.

## Layout

Classic editorial magazine layout with a clean top navigation, horizontal feed, and varied grid-based content sections.

*Rhythm:* 8px baseline grid used for consistent vertical rhythm and component spacing.

## Elevation & Depth

- 0px 24px 38px 0px rgba(0, 0, 0, 0.08)
- 0px 9px 46px 0px rgba(0, 0, 0, 0.08)
- 0px 11px 15px 0px rgba(0, 0, 0, 0.08)
- Borders: Minimal solid 1px borders in dark ink color (#2B2B2B) for structural separation.

## Shapes

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

## Components

- **button:** Pill-shaped buttons with solid accent color (purple) or outlined styles, often featuring a right-pointing arrow icon.
- **card:** Clean rectangular cards featuring a mix of full-bleed images or graphics paired with serif headlines and sans-serif metadata.
- **chip:** Small, pill-shaped tags with a solid purple background and white text for categorizing content.
- **input:** Rounded search input integrated into the floating bottom navigation bar.
- **hero:** A prominent header area featuring a bold, centered serif logo with a subtagline, positioned above a horizontal scrolling feed.

## Do's and Don'ts

**Don't:**
- Don't use a dark mode interface — the screenshot shows a predominantly white and light-warm background palette.
- Don't use purely geometric sans-serif fonts for headlines — the screenshot shows a distinct transitional serif for display text.
- Don't hide behind complex, multi-layered drop shadows — the screenshot shows very subtle, soft box-shadows.
- Don't use a grid of identical square cards — the screenshot shows a varied layout with mixed aspect ratios and horizontal feeds.
- Don't use a single monolithic background color — the screenshot shows a multi-tonal approach with white, light gray, and warm peach sections.
- Don't use neon or overly saturated accent colors everywhere — the screenshot restricts high-chroma color to a specific purple accent.

---

## System Prompt (paste into AI agent)

```
Design a clean, editorial website inspired by It's Nice That. Position it as a premium digital publication for the creative community. Use a white (#FFFFFF) base with light gray (#F4F4F4) and warm peach (#FFEDD1) backgrounds. Primary ink color should be dark gray (#2B2B2B) with a vibrant purple (#6219FF) as the sole high-chroma accent. Use a transitional-serif font for headlines and a humanist-sans for body text. Layouts should be magazine-inspired, allowing for varied image aspect ratios and horizontal scrolling feeds. Critical donts: never use a dark mode base, never use geometric sans for display text, and never use harsh, saturated colors for backgrounds. Keep interactions fast with 0.1s transitions. Focus on generous white space and clear typography hierarchy.
```