---
name: Hello Monday
description: "This site is an excellent example of how a restrictive color palette combined with strong typography can create a highly memorable and premium brand identity for a creative studio."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#2C2D2E"
  tertiary: "#DB7093"
  neutral: "#CACACA"
  bg-soft: "#F8F6F5"
  line: "rgba(0, 0, 0, 0.3)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "normal"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

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

A creative agency crafting digital and magical experiences for startups and product departments.

*A high-end editorial magazine meets a modern creative studio.*

## Colors

Stark black and white contrast with a single playful accent color, relying heavily on white space and typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#2C2D2E`)** — uses `ink-soft` token
- **Accent (`#DB7093`)** — uses `accent` token
- **Muted (`#CACACA`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.3)`)** — uses `line` token

## Typography

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

- Display typography uses a classic transitional serif for maximum impact.
- Body typography uses a clean humanist sans-serif for high readability.
- Font weights are predominantly regular (400), with light (300) used sparingly for subtle hierarchy.

## Layout

A clean grid with distinct hero sections, large horizontal dividers, and generous whitespace.

*Rhythm:* Vertical rhythm is established through generous padding and large margins, often using large multiples of the base (e.g., 64px, 71px).

## Elevation & Depth

- Borders: 1px solid rgba(0, 0, 0, 0.3) used for subtle section dividers; no rounded corners.

## Shapes

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

## Components

- **button:** Text-based CTAs with a simple bottom border underline, no background fill.
- **card:** Minimalist case study cards featuring a large image and bold serif text below.
- **hero:** Massive typography dominating the viewport, accompanied by subtle illustrative icons.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on cards or buttons — screenshot shows sharp 90-degree angles.
- Don't add drop shadows to surfaces — screenshot shows flat, clean layouts.
- Don't use a chaotic color palette — screenshot shows a strict black, white, and single-accent scheme.
- Don't hide navigation behind complex mega-menus — screenshot shows a minimal hamburger icon.
- Don't use sans-serif for major headlines — screenshot shows a prominent transitional-serif display font.
- Don't fill every pixel with content — screenshot shows extensive use of white space to create focus.

---

## System Prompt (paste into AI agent)

```
This is a creative agency portfolio site for Hello Monday. The design is minimalist and highly editorial, featuring a stark contrast between massive transitional-serif display fonts and a clean humanist-sans-serif body font. The color palette is predominantly monochrome (black #000000 and white #FFFFFF) with a warm off-white background (#F8F6F5) and a signature playful pink accent (#DB7093). Layouts rely heavily on generous white space, sharp 90-degree corners, and thin dividers. Key design constraints include: always use sharp, non-rounded corners; always use generous vertical spacing; and never use stock photography for team illustrations. The overall feel is sophisticated, confident, and premium.
```