---
name: Displaay
description: "A masterclass in how a type foundry can showcase its craft through its own UI, using custom fonts and a refined, gallery-style presentation."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#020202"
  secondary: "#76756F"
  neutral: "#76756F"
  bg-soft: "#C9C9C8"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.28px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 8px
  md: 10px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 20px
  xl: 25px
  2xl: 32px
  3xl: 48px

---

## Overview

An independent type foundry presenting distinctive retail and custom typefaces with playful, art-directed visuals.

*A creative studio showcasing typographic art through expressive layouts.*

## Colors

Monochrome foundation with bold, high-contrast photography and illustrations defining the color story.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#020202`)** — uses `ink` token
- **Secondary text (`#76756F`)** — uses `ink-soft` token
- **Muted (`#76756F`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- Headings use a clean humanist sans-serif with tight tracking.
- Body text maintains generous line-height for readability.
- Font weight is predominantly regular (400) for a refined, editorial feel.

## Layout

Left-aligned typography with right-aligned action buttons in the hero; grid-based feature cards below.

*Rhythm:* Generous whitespace between sections, with tight internal padding for UI elements.

## Elevation & Depth

- none
- Borders: 1px solid black for buttons and chips, creating a sharp, graphic outline style.

## Shapes

- `sm`: 8px
- `md`: 10px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Outlined pill and rounded-rect shapes with 1px solid borders, transitioning between filled and outlined states on hover.
- **card:** Image-heavy cards with bold typography, featuring bright background colors like yellow or green.
- **chip:** Small outlined tags for categorization like 'New', 'Custom', or 'Retails'.
- **input:** Minimal, likely integrated into the shop functionality.
- **hero:** Large typographic intro statement paired with a high-impact photographic banner.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows or soft gradients — screenshot shows sharp 1px solid borders and flat surfaces.
- Don't center-align all text — screenshot shows a strong left-aligned typographic hierarchy.
- Don't use heavy font weights for everything — screenshot shows a predominant use of regular (400) weight.
- Don't hide the navigation behind complex menus — screenshot shows direct, visible pill-shaped links.
- Don't use muted, pastel colors as the primary palette — screenshot shows a high-contrast black/white/gray base with vibrant image fills.
- Don't use standard system fonts — screenshot uses custom typefaces for all branding and headings.

---

## System Prompt (paste into AI agent)

```
This is an independent type foundry site (Displaay) with a clean, editorial aesthetic grounded in a monochrome palette (#FFFFFF, #C9C9C8, #020202, #76756F). The typography relies on custom humanist-sans fonts with a large display scale and regular weights. The layout is spacious and left-aligned, using sharp 1px black borders for UI components like buttons and chips. Key donts: avoid soft shadows or rounded rectangles without borders, avoid centering all text, and never use generic sans-serif fonts for display headings. The design is refined, playful, and gallery-like, focusing on the visual impact of the type specimens and photography.
```