---
name: AnOther
description: "Worth including as a benchmark for premium editorial design that achieves sophistication through restraint, generous whitespace, and letting photography carry the visual weight."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000011"
  secondary: "#686868"
  neutral: "#686868"
  line: "rgba(0,0,17,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.6px"

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

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

---

## Overview

An elegant, image-forward editorial magazine focused on art, fashion, and culture.

*A curated gallery of contemporary art and fashion in digital magazine form*

## Colors

A predominantly monochrome palette where stark black text on white provides maximum contrast, allowing photography to carry all color and visual interest.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000011`)** — uses `ink` token
- **Secondary text (`#686868`)** — uses `ink-soft` token
- **Muted (`#686868`)** — uses `muted` token
- **Borders (`rgba(0,0,17,1.0)`)** — uses `line` token

## Typography

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

- Use transitional-serif for all headlines and display text.
- Use humanist-sans for body copy and navigation.
- Maintain generous line-height for readability.

## Layout

Full-width hero images followed by multi-column grids (4-column for article previews). Content centered with generous whitespace.

*Rhythm:* Consistent 4px base scale with generous vertical padding around sections (approx. 206px top padding on content sections) to create visual breathing room.

## Elevation & Depth

- Borders: 1px solid borders used sparingly; primary navigation separated by a thin 1px solid black line.

## Shapes

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

## Components

- **button:** Minimal outlined buttons (1px solid black border, black text, white fill) used for cookie consent.
- **card:** Image-dominant cards with category labels above and serif headlines below; no borders or shadows.
- **hero:** Full-bleed photographic hero image with overlay text positioned on the right side.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — screenshot shows sharp 0px corners on all elements including buttons and cards.
- Don't use bright accent colors — screenshot shows strictly monochrome black/white/gray palette.
- Don't use bold font weights — screenshot shows all elements at fontWeight 400.
- Don't use dense layouts with minimal whitespace — screenshot shows generous padding (206px) between sections.
- Don't use sans-serif for headlines — screenshot shows transitional-serif (Kepler3) for all display text.
- Don't add drop shadows to cards or UI elements — screenshot shows completely flat, shadow-free surfaces.

---

## System Prompt (paste into AI agent)

```
This is a premium editorial magazine website (AnOther Magazine) focused on art, fashion, and culture. Position it as a refined, image-forward digital publication with gallery-like presentation. Key hex colors are #ffffff (background), #000011 (primary ink/text), and #686868 (muted/secondary text). Typography uses transitional-serif (Kepler3) for headlines and humanist-sans (HelveticaNowText) for body text, all at fontWeight 400. Critical donts: never use rounded corners on any element; never introduce bright or neon accent colors; never use bold font weights; never create dense layouts without generous whitespace; never use sans-serif for headlines; never add drop shadows to surfaces.
```