# Aura Bora · Design system migration spec

> Source: https://www.aurabora.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of using bold, illustrative typography and simple pastel colors to create a highly memorable and approachable consumer brand identity.

## 1. Identity DNA

Aura Bora's design system reads like a friendly, illustrated storybook about natural flavors. Every component, from cards to buttons, adopts the **sticker-like, illustrative feel** of a children's book—thick black outlines on soft, organic pastels create an immediate sense of playful approachability.

**One-liner:** A playful, illustration-heavy beverage brand that uses bold, outlined typography and soft pastels to convey natural, zero-calorie sparkling water.
**Keywords:** playful · whimsical · natural · energetic · organic
**Analogy:** A friendly, illustrated storybook about natural flavors.

## 2. Color

The palette is built on a foundation of soft, organic pastels like light beige, pink, and lavender, deliberately avoiding dark or moody tones. Stark black outlines and typography provide high contrast, making each element pop against the airy backgrounds.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF9ED` | main background |
| `--bg-soft` | `#FFE2E2` | card background |
| `--bg-quiet` | `#E5E5F1` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#FDE4AA` | placeholder |
| `--muted-soft` | `#FFDAC0` | weak hint |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast black outlines on soft, organic pastels create a friendly, approachable aesthetic.

The principle is clear: pastels convey the natural, approachable core, while black provides the necessary definition and graphic punch.

## 3. Typography

Typography is a bold mix of a thick grotesque display font for massive headlines and a structured monospace for body text and UI elements. This combination gives the brand its distinctive, playful voice—uppercase for labels and navigation, with highly variable letter spacing for display text that commands attention.

- **Display:** grotesque-sans
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 800 | -2px | Hero headline |
| h1 | 80px | 0.95 | 800 | -1px | Section headline |
| h2 | 32px | 1.2 | 800 | 0px | Subsection headline |
| body | 17px | 1.5 | 400 | -0.3px | Body text |
| caption | 13px | 1.4 | 400 | 0.5px | Captions and labels |

**Type rules:**
- Uppercase for labels and navigational elements
- Highly variable letter spacing for display text

## 4. Spacing

The system is built on an **8px base grid** with generous padding, creating a deliberate and generous whitespace rhythm that lets each section breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 26 / 60 px
- **Rhythm:** 8px base grid with generous padding for whitespace

## 5. Surfaces

Surfaces are defined by a deliberate use of depth and borders, not complex shadows or gradients. Components feature thick 1px black outlines and, where shadows are used, they are a solid, opaque 6px offset—reinforcing the illustrative, sticker-like aesthetic over realistic depth.

- **Radius:** sm 0px · md 10px · lg 15px · pill 999px
- **Shadows:**
  - 6px 6px 0px rgba(0,0,0,1)
- **Borders:** 1px solid black

## 6. Layout

The layout skeleton is a centered, single-column structure that prioritizes clarity and focus. A classic split hero layout features massive outlined typography on one side and a product illustration on the other, anchoring the page with generous whitespace.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 26px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero with large typography left and product display right

## 7. Motion & Interaction

Motion philosophy is minimal but purposeful, designed to add energy without distraction. Simple, smooth transitions on hover states and a continuous scrolling marquee create a sense of lively, organic movement.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Scrolling marquee
  - Hover scaling on buttons

- **Hover:** Scale transform and background color shift
- **Click:** Subtle press effect
- **Transition:** All properties transition smoothly over 300ms
- **Keyboard:** Standard focus outlines

## 8. Voice & Don'ts

The editorial voice is friendly, playful, and approachable, matching the visual tone. Headlines are bold, massive, and heavily outlined in uppercase, while calls to action are clear and simple, framed by pill-shaped borders.

- **Tone:** Friendly, playful, and approachable
- **Headline style:** Bold, massive, and heavily outlined in uppercase
- **CTA style:** Clear, simple calls to action with pill-shaped borders
- **Avoid:** Complex jargon / Sterile aesthetics / Heavy shadows

### Don'ts
- ❌ Use complex gradients — screenshot shows solid pastel backgrounds
- ❌ Use thin, delicate lines — screenshot shows thick 1px black outlines everywhere
- ❌ Use elegant serif fonts — screenshot shows bold, rounded grotesque and monospace
- ❌ Use dark, moody color palettes — screenshot shows light, airy pastels
- ❌ Use rounded rectangles without borders — screenshot shows distinct black outlines
- ❌ Use cluttered layouts — screenshot shows generous whitespace and focused sections

The system deliberately avoids complex jargon, sterile aesthetics, heavy shadows, elegant serif fonts, and cluttered layouts—maintaining a focused, whimsical identity.

## System Prompt (paste into AI tool)

```
Aura Bora is a playful, consumer-focused sparkling water brand. Its identity is built on a whimsical, organic aesthetic using soft pastels like #FFF9ED and #FFE2E2, contrasted with sharp, 1px black outlines (#000000). The typography is a bold mix of a thick grotesque display font for massive headlines and a structured monospace for body text and UI elements. A critical part of the design is the use of thick shadows or outlines on components and text to create a sticker-like, illustrative feel. Do not use delicate or elegant serif fonts. Avoid dark or high-tech color palettes. Always maintain generous whitespace and clear, uppercase labeling for navigation.
```