---
name: Thefascination
description: "This site is a strong example of a modern, curated editorial platform that balances sophisticated typography with a clean, image-driven layout."
version: alpha

colors:
  background: "#FAF8EF"
  primary: "#1A202C"
  secondary: "#797472"
  tertiary: "#2EA3F2"
  neutral: "#4C40E0"
  muted-soft: "#797472"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "normal"
  headline:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.02
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.7
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.71
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 2px
  md: 6px
  lg: 12px
  pill: 999px

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

---

## Overview

A curated digital publication exploring the intersection of fashion, lifestyle, and modern culture.

*A high-end digital magazine focused on lifestyle, fashion, and culture.*

## Colors

A warm, off-white background with dark, readable text and vibrant blue and purple accents for emphasis.

- **Background (`#FAF8EF`)** — uses `bg` token
- **Primary text (`#1A202C`)** — uses `ink` token
- **Secondary text (`#797472`)** — uses `ink-soft` token
- **Accent (`#2EA3F2`)** — uses `accent` token
- **Muted (`#4C40E0`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use a transitional-serif for display and headlines to add editorial authority.
- Use a humanist-sans for body text to ensure high readability and a modern feel.
- Combine a script font (like Qwitcher Grypen) sparingly for decorative, handwritten-style accents.

## Layout

A clean, centered-column layout with generous whitespace and clear section headers.

*Rhythm:* Consistent and rhythmic, based on a 4px grid, creating a structured yet breathable layout.

## Elevation & Depth

- none
- 0 0 5px 0 rgba(128, 128, 128, 1)
- Borders: Minimal and clean, used primarily for structural separation with 1px lines.

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Simple, text-based buttons with clean typography and minimal styling.
- **card:** Image-forward cards with clear titles and metadata, often separated by thin lines.
- **chip:** Category labels, sometimes with a colored top border for emphasis.
- **input:** Standard, clean input fields with a 1px border.
- **hero:** Large, image-driven hero section, often featuring a promotional modal overlay.

## Do's and Don'ts

**Don't:**
- Don't use a dark mode — the site exclusively uses a warm, light background (#FAF8EF).
- Don't use a sans-serif for headlines — the site primarily uses a transitional-serif for display text.
- Don't use a vibrant green as an accent — the site uses a vibrant blue (#2EA3F2) and a muted purple (#4C40E0).
- Don't use heavy drop shadows — the site favors clean, flat surfaces with minimal or subtle shadows.
- Don't use a multi-column text layout for articles — the site maintains a single, centered, readable column.
- Don't use rounded corners on cards — the site uses sharp or very slightly rounded corners (2-6px).

---

## System Prompt (paste into AI agent)

```
This is a curated editorial website focused on lifestyle, fashion, and culture, positioned as a sophisticated digital magazine. The design DNA centers on a warm, off-white background (#FAF8EF) with dark, readable text (#1A202C) and vibrant blue (#2EA3F2) and purple (#4C40E0) accents. Typography pairs a transitional-serif for bold headlines with a humanist-sans for highly readable body text. Key critical donts: never use a dark mode, avoid using sans-serif for display headlines, and do not introduce a vibrant green accent color. The layout is clean, centered, and generous with whitespace, featuring image-forward cards and minimal, functional UI components.
```