---
name: Evermade Fi
description: "The site is a perfect example of modern editorial web design, blending classic high-fashion typography with a digital-first, high-contrast aesthetic."
version: alpha

colors:
  background: "#2D070B"
  primary: "#FFFFFF"
  secondary: "#2D070B"
  tertiary: "#FF0389"
  neutral: "#FF0389"
  bg-soft: "#FEF0E6"
  bg-quiet: "#FFC7DE"
  line: "rgba(45,7,11,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.48px"

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

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

---

## Overview

An expressive agency portfolio defined by massive serif typography and a high-contrast, vibrant color palette.

*A bold fashion editorial meets a high-end digital agency portfolio.*

## Colors

High-contrast and expressive, using dark burgundy and soft peach as anchors for vibrant pink highlights.

- **Background (`#2D070B`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#2D070B`)** — uses `ink-soft` token
- **Accent (`#FF0389`)** — uses `accent` token
- **Muted (`#FF0389`)** — uses `muted` token
- **Borders (`rgba(45,7,11,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** geometric-sans
- **Mono:** monospace

- Combine elegant, high-contrast serif display types with clean geometric sans-serif for body copy.
- Use monospace fonts for metadata, labels, and secondary text.
- Strictly use uppercase transforms for navigation and category labels.

## Layout

Asymmetric editorial grid featuring massive overlapping type and off-center imagery.

*Rhythm:* Generous whitespace and strict grid alignment.

## Elevation & Depth

- 0px 30px 70px 0px rgba(0,0,0,0.3)
- 0px 4px 10px 0px rgba(0,0,0,0.1)
- Borders: Sharp, thin 1px borders often used in a subtle, semi-transparent manner.

## Shapes

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

## Components

- **button:** Pill-shaped with solid dark backgrounds, or ghost-style with sharp borders.
- **card:** Minimalist case study cards with oversized typography and clean whitespace.
- **chip:** Monospace, uppercase text labels used as tags or metadata.
- **input:** Standard form fields with sharp, rectangular borders and clear labels.
- **hero:** A dramatic layout combining massive, bleeding serif typography with overlapping photography.

## Do's and Don'ts

**Don't:**
- Don't use soft, rounded UI components — screenshot shows sharp rectangular borders and strict pill shapes.
- Don't apply busy, complex backgrounds — screenshot shows solid dark burgundy or clean soft peach.
- Don't use playful, rounded sans-serifs for display text — screenshot shows high-contrast didone-serif.
- Don't clutter the layout with too many elements — screenshot shows generous whitespace and a focused editorial grid.
- Don't use casual, conversational UI labels — screenshot shows structured, uppercase monospace metadata.
- Don't use bright neon greens or blues — screenshot shows a focused palette of dark burgundy, pink, and peach.

---

## System Prompt (paste into AI agent)

```
This design is a bold, expressive agency portfolio that leverages massive didone-serif typography and a high-contrast color palette. The primary anchors are dark burgundy (#2D070B) and soft peach (#FEF0E6), punctuated by a vibrant pink (#FF0389) accent. The typography strictly separates display (didone-serif) from body (geometric-sans) and metadata (monospace), creating a strong editorial hierarchy. Layouts are spacious and asymmetric, using a clean 12-column grid. Critical constraints: Never use rounded, soft UI shapes; strictly use sharp rectangular or full-pill forms. Never use casual or playful typography for display text; always lean into the formal, high-contrast serif. Avoid busy backgrounds; maintain the focus on massive type and clean imagery.
```