---
name: Hourly App
description: "Worth including as a masterclass in using extreme typography and a restricted palette to create a highly memorable and impactful brand identity."
version: alpha

colors:
  background: "#0A0A0A"
  primary: "#EEE1C1"
  tertiary: "#D0021B"
  line: "rgba(238, 225, 193, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 217px
    lineHeight: 0.85
    fontWeight: 700
    letterSpacing: "-2px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px

---

## Overview

A productivity app landing page defined by massive, tight-set typography and a stark black-red-cream palette.

*A high-contrast, typographic poster for a utility app*

## Colors

Extreme contrast with a strict three-color palette of black, cream, and red.

- **Background (`#0A0A0A`)** — uses `bg` token
- **Primary text (`#EEE1C1`)** — uses `ink` token
- **Accent (`#D0021B`)** — uses `accent` token
- **Borders (`rgba(238, 225, 193, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- All primary text is set in bold grotesque sans.
- Tight tracking and line-heights are used throughout.
- Text often acts as the primary visual element.

## Layout

Full-width vertical stack with massive typographic hero sections and phone mockups.

*Rhythm:* Irregular, driven by large typographic blocks rather than a consistent grid.

## Elevation & Depth

- Borders: 1px solid #EEE1C1 horizontal rules separating sections

## Shapes

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

## Components

- **button:** Simple text-based call to action ('download') without a bounding box.
- **card:** None, phone mockups are used as the primary visual representations.
- **chip:** None
- **input:** None
- **hero:** Full-screen, dominant typography filling the viewport with a single word.

## Do's and Don'ts

**Don't:**
- Don't use wide letter-spacing — screenshot shows tight tracking.
- Don't use light font weights — screenshot shows exclusively bold text.
- Don't use varied background colors — screenshot shows a solid dark background.
- Don't use drop shadows — screenshot shows completely flat typography.
- Don't use decorative borders or frames — screenshot uses simple horizontal rules.
- Don't use centered text alignment for large blocks — screenshot shows left-aligned and overlapping blocks.

---

## System Prompt (paste into AI agent)

```
This design is a minimalist, high-impact landing page for a mobile app, relying almost entirely on massive, tightly-set bold typography to convey its message. The core palette is restricted to three colors: a near-black background (#0A0A0A), a warm cream for primary text and borders (#EEE1C1), and a vibrant red for accent and emphasis (#D0021B). The typography is a bold grotesque sans-serif, often scaled to massive sizes and set with very tight leading and tracking. Key design constraints include avoiding any light font weights, avoiding wide letter-spacing, avoiding drop shadows or complex backgrounds, and maintaining a stark, high-contrast aesthetic. The layout is a single-column vertical stack with phone mockups breaking up the text blocks.
```