# Getuntil · Design system migration spec

> Source: https://getuntil.app  ·  Curated by OpenDesign  ·  en

> The site is worth including because it masterfully balances a clean, simple layout with expressive, high-chroma gradients to create an emotionally resonant and playful brand identity.

## 1. Identity DNA

Getuntil is built like a warm, vibrant personal calendar for life's highlights. Its identity centers on the anticipation of countdowns and the personal significance of tracked events, establishing a system where every component serves the emotional core of celebrating meaningful moments.

**One-liner:** A playful countdown app that helps you track the meaningful events in your life.
**Keywords:** countdown · anticipation · meaningful events · personal tracker
**Analogy:** A warm, vibrant personal calendar for life's highlights

## 2. Color

The color system is defined by a stark, clean contrast: a pure white base supports vibrant, multi-color gradients that provide the primary visual interest and emotional tone. High-chroma reds, greens, blues, and oranges are used expressively within gradient compositions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000A6` | secondary text |
| `--muted` | `#00000066` | placeholder |
| `--accent` | `#FF3B30` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Vibrant, multi-color gradients contrast against clean, light backgrounds.

The guiding principle is that vibrant, multi-color gradients should always contrast against clean, light backgrounds to maintain clarity and playful energy.

## 3. Typography

Typography employs a clean humanist-sans-serif, chosen for its friendly, approachable character that complements the playful brand voice. The scale is structured to clearly differentiate hero headlines, section headers, and general body text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 700 | -0.5px | Hero headlines |
| headline | 30px | 1.2 | 700 | 0px | Section headers |
| body | 16px | 1.4 | 400 | 0px | General text |

## 4. Spacing

The layout follows a generous vertical rhythm, with pronounced spacing—such as 80px for hero sections—to create a sense of air and calm focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** generous vertical rhythm with 80px hero spacing

## 5. Surfaces

Surfaces are defined by their form, not their depth; large, rounded rectangles for cards and elements are a key characteristic. Borders and heavy drop shadows are deliberately avoided to keep the interface clean and flat or softly elevated.

- **Radius:** sm 8px · md 16px · lg 32px · pill 999px
- **Borders:** none

## 6. Layout

The skeletal structure is a centered column layout with generous padding, creating a focused and uncluttered reading path. This simplicity supports the expressive use of color and motion within clearly defined bounds.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 px

**Skeleton:** Centered column layout with generous padding

## 7. Motion & Interaction

Motion philosophy favors subtlety and continuity, using smooth transitions at a consistent 220ms ease to connect states without distraction. Interactions are standard and predictable, relying on clear pointer and focus cues rather than elaborate effects.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - smooth transitions

- **Hover:** pointer cursor on interactive elements
- **Click:** standard tap behavior
- **Transition:** all 220ms ease
- **Keyboard:** standard focus outlines

## 8. Voice & Don'ts

The editorial voice is consistently friendly, upbeat, and personal, with headlines that are direct and action-oriented. Language avoids formality and technical jargon, opting instead for clear, encouraging calls to action.

- **Tone:** friendly, upbeat, personal
- **Headline style:** Direct and action-oriented
- **CTA style:** Clear and encouraging
- **Avoid:** formal language / technical jargon / dark, somber tones

### Don'ts
- ❌ don't use sharp corners — screenshot shows soft, large rounded rectangles
- ❌ don't use a dark background — screenshot shows a white/light background
- ❌ don't use muted, desaturated colors — screenshot shows vibrant, high-chroma gradients
- ❌ don't use serif fonts — screenshot shows sans-serif typography
- ❌ don't use complex layouts — screenshot shows a clean, centered single-column layout
- ❌ don't use heavy drop shadows — screenshot shows flat or softly elevated surfaces

The system deliberately avoids formal language, dark backgrounds, muted colors, complex layouts, and heavy shadows to preserve its core identity of playful clarity.

## System Prompt (paste into AI tool)

```
The system is a friendly, playful countdown app landing page. It positions itself as a way to track meaningful life events. Key hex colors include white backgrounds (#FFFFFF), black text (#000000), and vibrant gradients like red (#FF3B30), green (#34C759), blue (#007AFF), and orange. The typography is a clean humanist-sans-serif. Critical donts: Don't use dark mode or a dark background. Don't use sharp corners on cards or buttons. Don't use muted or desaturated colors; embrace high-chroma gradients. Don't use serif fonts. Don't create cluttered layouts; keep it spacious and centered. Don't use heavy drop shadows.
```