# Hourly App · Design system migration spec

> Source: http://hourly-app.com  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in using extreme typography and a restricted palette to create a highly memorable and impactful brand identity.

## 1. Identity DNA

This design system treats the landing page as a high-contrast, typographic poster for a utility app. It is a study in restriction, where a three-color palette and bold, tight-set type create a singular, punchy identity for the Hourly App.

**One-liner:** A productivity app landing page defined by massive, tight-set typography and a stark black-red-cream palette.
**Keywords:** minimal · bold · playful · functional
**Analogy:** A high-contrast, typographic poster for a utility app

## 2. Color

The color system is built on extreme contrast, using a near-black background, warm cream text, and a single vibrant red for accent. This strict tri-color palette ensures every element is immediately legible and visually stark.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0A0A0A` | main background |
| `--ink` | `#EEE1C1` | body text |
| `--accent` | `#D0021B` | single accent |
| `--line` | `rgba(238, 225, 193, 1)` | divider |

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

The principle is absolute clarity through restraint, with no room for subtle or muted color variants.

## 3. Typography

The typographic voice is exclusively bold grotesque sans-serif, used as the primary visual element across all scales. Tight tracking and line-heights give the type a dense, monumental quality, from hero headlines down to small labels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 217px | 0.85 | 700 | -2px | Hero headlines |
| headline | 44px | 1.0 | 700 | -1px | Section headers |
| body | 16px | 1.0 | 700 | 0px | UI text and small labels |

**Type rules:**
- 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.

## 4. Spacing

Spacing rhythm is irregular and driven by the massive typographic blocks rather than a consistent grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 px
- **Rhythm:** Irregular, driven by large typographic blocks rather than a consistent grid.

## 5. Surfaces

Surfaces are flat and borderless, with depth conveyed only through the stark hierarchy of type and the occasional phone mockup. The only graphic element is a simple, thin horizontal rule in cream to separate sections.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid #EEE1C1 horizontal rules separating sections

## 6. Layout

The layout is a full-width, single-column vertical stack. It is punctuated by massive typographic hero sections that fill the viewport and phone mockups that serve as the primary visual breaks.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 1 columns, gutter 0px
- **Breakpoints:** 768 px

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

## 7. Motion & Interaction

Motion is minimal and functional, serving only to confirm interaction. Simple, quick transitions on hover and click states provide feedback without becoming a focal point of the interface.

- **Durations:** micro 200ms · small 250ms · medium 0ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Simple transitions on hover and interaction.

- **Hover:** Cursor changes to a pointer on interactive elements.
- **Click:** Standard pointer interaction.
- **Transition:** 0.2s to 0.25s transitions applied broadly.
- **Keyboard:** Standard navigation

## 8. Voice & Don'ts

The editorial voice is direct, punchy, and minimal, using ultra-large, tightly packed headlines and simple lowercase CTAs. It avoids flowery language in favor of stark, immediate communication.

- **Tone:** Direct, punchy, and minimal.
- **Headline style:** Ultra-large, tightly packed words.
- **CTA style:** Simple lowercase text ('download').
- **Avoid:** Flowery or overly descriptive language. / Subtle or muted color palettes.

### Don'ts
- ❌ 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.

The system deliberately avoids decorative borders, varied backgrounds, light font weights, and drop shadows to maintain its uncompromising high-contrast aesthetic.

## System Prompt (paste into AI tool)

```
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.
```
