---
name: Heylow
description: "This site is worth including as a prime example of a restrained, premium design system that uses typography, spacing, and a muted palette to communicate professionalism and considered craftsmanship."
version: alpha

colors:
  background: "#0f0e0c"
  primary: "#faf8f3"
  secondary: "#a8a3a1"
  neutral: "#4a4643"
  line: "rgba(74, 70, 67, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 160px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.25px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "2px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A design & code partner for purpose-led organisations, helping them to show up as considered as their work.

*A high-end, purpose-driven creative studio that values clarity, elegance, and sustainability in both design and digital execution.*

## Colors

Dark, warm, earthy monochromatic palette with high contrast text for clarity and focus.

- **Background (`#0f0e0c`)** — uses `bg` token
- **Primary text (`#faf8f3`)** — uses `ink` token
- **Secondary text (`#a8a3a1`)** — uses `ink-soft` token
- **Muted (`#4a4643`)** — uses `muted` token
- **Borders (`rgba(74, 70, 67, 1.0)`)** — uses `line` token

## Typography

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

- Use tight tracking on large display text for a refined, modern feel.
- Maintain generous line-height (1.6) for body text to ensure readability.
- Navigation and small labels are uppercase with wide letter-spacing.
- All typography maintains a consistent weight of 400 for a calm, unified look.

## Layout

A strong, visible grid structure is revealed through dashed border lines, emphasizing architectural precision.

*Rhythm:* A consistent 4px base grid is used for all spacing, providing a structured and predictable layout rhythm.

## Elevation & Depth

- Borders: Thin, 1px borders in muted earth tones (#4a4643 or #faf8f3) are used to structure the layout and define interactive zones without heavy visual weight.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimalist text-based buttons with uppercase labels and generous padding, defined by subtle borders.
- **card:** Content sections are defined by thin borders and generous whitespace rather than elevated cards.
- **chip:** Small, uppercase text labels used for categorization or metadata.
- **input:** Clean, minimal input fields with bottom borders.
- **hero:** A massive, bold typographic wordmark dominates the viewport, paired with descriptive copy.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated accent colors — screenshot shows a monochromatic, earthy palette.
- Don't use decorative or script fonts — screenshot shows a clean, humanist sans-serif.
- Don't use heavy drop shadows or gradients — screenshot shows flat surfaces with thin borders.
- Don't use uppercase text for body copy — screenshot shows uppercase only for small labels and navigation.
- Don't use thick, heavy borders — screenshot shows thin 1px lines in muted tones.
- Don't use complex, busy layouts — screenshot shows a spacious, grid-based structure with ample whitespace.

---

## System Prompt (paste into AI agent)

```
This is a portfolio website for a design & code partner agency called Heylow. The design is characterized by a calm, sophisticated, and considered aesthetic. Key colors are a deep, warm black (#0f0e0c) background with light, warm off-white text (#faf8f3) and muted gray accents (#a8a3a1, #4a4643). The typography uses a clean, humanist sans-serif font family at various weights, with a strong focus on bold, oversized display type for the wordmark. The layout is spacious and grid-based, with visible structural lines. Critical donts: Do not use bright, saturated accent colors; do not use decorative or script fonts; do not clutter the interface with unnecessary elements or heavy visual effects; do not use uppercase text for body copy; do not use heavy drop shadows; do not use complex, busy layouts.
```