---
name: Akaru
description: "A masterclass in typography-led design, using custom typefaces and generous whitespace to convey high-end craftsmanship."
version: alpha

colors:
  background: "#F1EFEB"
  primary: "#0E0E0E"
  tertiary: "#E49366"
  neutral: "#B692A1"
  bg-quiet: "#BFCCD8"
  line: "rgba(14, 14, 14, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 96px
    lineHeight: 0.85
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.5px"

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

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

---

## Overview

A bold, minimalist design agency portfolio featuring a custom grotesque typeface and expansive whitespace.

*A high-end architectural firm's monograph.*

## Colors

High contrast typography over muted architectural tones.

- **Background (`#F1EFEB`)** — uses `bg` token
- **Primary text (`#0E0E0E`)** — uses `ink` token
- **Accent (`#E49366`)** — uses `accent` token
- **Muted (`#B692A1`)** — uses `muted` token
- **Borders (`rgba(14, 14, 14, 1)`)** — uses `line` token

## Typography

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

- Use 'Alliance Platt' (serif) for stylized accents if needed, though primarily sans is used.
- Use 'Alliance Neue' (humanist sans) for body and smaller UI text.
- Maintain tight letter-spacing on large display text.

## Layout

Asymmetric split-screen layout with large left-aligned typography.

*Rhythm:* Asymmetrical with generous whitespace.

## Elevation & Depth

- inset 0 0 0 1px #0E0E0E
- inset 0 0 0 1px rgba(255, 255, 255, 0.2)
- Borders: 1px solid #0E0E0E

## Shapes

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

## Components

- **button:** Pill-shaped menu button with solid dark background and white text.
- **card:** Edge-to-edge image blocks without visible borders.
- **hero:** Massive custom display typography filling the left half of the viewport.

## Do's and Don'ts

**Don't:**
- Don't use thin font weights — screenshot shows heavy, bold typography for display.
- Don't clutter the layout with small elements — screenshot shows expansive, clean whitespace.
- Don't use standard system fonts — screenshot features a highly customized geometric display font.
- Don't use bright, saturated backgrounds — screenshot shows a muted, off-white (#F1EFEB) base.
- Don't use square buttons — screenshot shows pill-shaped (999px) buttons and elements.
- Don't center all content — screenshot shows a strong left-aligned, asymmetrical layout.

---

## System Prompt (paste into AI agent)

```
This is a high-end design agency website characterized by a minimalist, bold aesthetic. The layout is asymmetrical, using a massive custom geometric display typeface ('Alliance Platt') for the hero and 'Alliance Neue' for body text. The color palette is dominated by a warm off-white background (#F1EFEB) and deep charcoal ink (#0E0E0E), accented with muted architectural tones like dusty rose (#B692A1), pale blue (#BFCCD8), and a single pop of terracotta (#E49366). Critical donts: never use thin typography; always maintain generous whitespace; never use standard UI button shapes—use pill-shaped ones instead. The design is premium, editorial, and architectural in feel.
```