CURATED · OPEN · FREE

Hourly App

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

Bold TypographyApp UIMinimalMobile UITooling

↓ Download design system (5 MB)Open in OpenDesign

Visit: http://hourly-app.com

📦 Browse pack contents →

Identity DNA

minimalboldplayfulfunctional

A high-contrast, typographic poster for a utility app

Color

#D0021BAccent

#EEE1C1Ink

#0A0A0ABG

rgba(238, 225, 193, 1)Line

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

Typography

grotesque-sans

display217px · 700
headline44px · 700
body16px · 700

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.

Spacing

4px

8px

16px

20px

24px

32px

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

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid #EEE1C1 horizontal rules separating sections

Layout

1280container

1columns

768breakpoints

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

Motion & Interaction

200msmicro

250mssmall

0msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Simple transitions on hover and interaction.

Cursor changes to a pointer on interactive elements. · Standard pointer interaction.

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.

Voice & Don'ts

Tone Direct, punchy, and minimal.
Headlines Ultra-large, tightly packed words.
CTAs Simple lowercase text ('download').

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.
Avoid: Flowery or overly descriptive language.
Avoid: Subtle or muted color palettes.

Inside the pack — real screenshots

Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko