---
name: Wearemotto
description: "This site is an excellent study in the power of extreme typographic scale and restraint to create a premium, authoritative brand presence."
version: alpha

colors:
  background: "#F4F3F0"
  primary: "#1B1B1C"
  secondary: "#717476"
  neutral: "#848484"
  muted-soft: "#4D5153"
  line: "rgba(0, 0, 0, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 153px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading-1:
    fontFamily: humanist-sans
    fontSize: 99px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.38
    fontWeight: 500
    letterSpacing: "normal"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 19px
  xl: 24px
  2xl: 32px
  3xl: 38px

---

## Overview

A bold, type-led agency site that commands attention through massive display fonts and expansive whitespace.

*A high-end architectural firm for brand strategy*

## Colors

High-contrast monochrome with a warm neutral base

- **Background (`#F4F3F0`)** — uses `bg` token
- **Primary text (`#1B1B1C`)** — uses `ink` token
- **Secondary text (`#717476`)** — uses `ink-soft` token
- **Muted (`#848484`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1)`)** — uses `line` token

## Typography

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

- Massive, all-caps display type dominates the layout
- Tight line heights (1.0) for large display text
- Medium weight (500) used consistently across all text

## Layout

Full-bleed hero with a wide multi-column grid for portfolio items

*Rhythm:* Generous vertical spacing with 158px top padding for major sections

## Elevation & Depth

- Borders: 1px solid black for active CTA underlines

## Shapes

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

## Components

- **button:** Text link with a solid black 1px underline
- **card:** Image-heavy portfolio grid items with minimal text labels
- **hero:** Massive split-level headline with a left-aligned descriptor and downward arrow indicator

## Do's and Don'ts

**Don't:**
- Don't use multiple accent colors — screenshot shows a strictly monochrome palette with a warm off-white background.
- Don't use small, centered headlines — screenshot shows massive, left-aligned display type that spans the viewport.
- Don't use heavy drop shadows or 3D effects — screenshot shows completely flat, 2D surfaces.
- Don't use rounded buttons or cards — screenshot shows sharp edges or very specific circular pills.
- Don't use serif fonts — screenshot shows a strictly sans-serif typographic system.
- Don't use dense, multi-column text layouts — screenshot shows extreme whitespace and a single-column reading flow for primary content.

---

## System Prompt (paste into AI agent)

```
This is a high-end agency and consultancy site characterized by massive, bold display typography and expansive whitespace. The primary colors are a warm off-white background (#F4F3F0) and deep black text (#1B1B1C), creating a sophisticated, high-contrast aesthetic. The typography uses geometric and humanist sans-serif categories, with display headlines set at extreme sizes (150px+) using a tight 1.0 line height and medium weight. Interactions are smooth and refined, relying on subtle opacity and color shifts. Critically, do not use rounded corners, drop shadows, or bright accent colors; the design relies purely on typographic scale and spatial rhythm. Avoid cluttered layouts and ensure all headlines remain left-aligned and uppercase for maximum impact.
```