---
name: Eye on Design
description: "A strong example of editorial design principles applied to a digital medium, balancing content with distinctive branding."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#524B48"
  tertiary: "#FF8C8C"
  neutral: "#524B48"
  bg-quiet: "#ECE2E2"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

An editorial design blog featuring curated articles with a distinctive pink and green color palette.

*A premium digital design magazine with a clean, editorial layout.*

## Colors

Clean white canvas with a dominant pink accent and high-contrast black typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#524B48`)** — uses `ink-soft` token
- **Accent (`#FF8C8C`)** — uses `accent` token
- **Muted (`#524B48`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- Headings use a bold grotesque sans-serif
- Body text uses a clean humanist sans-serif
- Uppercase labels with increased letter spacing

## Layout

3-column grid for article cards, single column for main content.

*Rhythm:* Consistent vertical rhythm with generous whitespace between sections.

## Elevation & Depth

- Borders: Solid 2px black for featured elements, minimal elsewhere.

## Shapes

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

## Components

- **button:** Simple text links or small uppercase labels.
- **card:** Image, category label, headline, and short excerpt.
- **chip:** Uppercase category labels in pink.
- **input:** Search functionality integrated into navigation.
- **hero:** Large featured article with bold headline and image.

## Do's and Don'ts

**Don't:**
- don't use a cluttered layout — screenshot shows clean, generous whitespace between elements
- don't use decorative fonts — screenshot shows clean, functional grotesque and humanist sans-serifs
- don't use a dark background — screenshot shows predominantly white backgrounds
- don't use subtle gradients — screenshot shows flat, solid color blocks like the pink accent
- don't use low-contrast text — screenshot shows high-contrast black text on white backgrounds
- don't hide navigation — screenshot shows persistent, clear navigation elements

---

## System Prompt (paste into AI agent)

```
This is an editorial design publication website. It uses a clean, 3-column grid layout with generous whitespace and high-contrast typography. The primary color is a vibrant pink (#FF8C8C) used for accents and category labels, paired with black (#000000) for headings and white (#FFFFFF) for backgrounds. The typography relies on grotesque and humanist sans-serif categories. Critical design constraints: avoid cluttered layouts, decorative fonts, and low-contrast text. Maintain a professional, authoritative tone while keeping the visual presentation clean and focused on the content.
```