---
name: Aura Bora
description: "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."
version: alpha

colors:
  background: "#FFF9ED"
  primary: "#000000"
  neutral: "#FDE4AA"
  bg-soft: "#FFE2E2"
  bg-quiet: "#E5E5F1"
  muted-soft: "#FFDAC0"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 800
    letterSpacing: "-2px"
  h1:
    fontFamily: monospace
    fontSize: 80px
    lineHeight: 0.95
    fontWeight: 800
    letterSpacing: "-1px"
  h2:
    fontFamily: monospace
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 800
    letterSpacing: "0px"
  body:
    fontFamily: monospace
    fontSize: 17px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.3px"
  caption:
    fontFamily: monospace
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.5px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 26px
  xl: 60px

---

## Overview

A playful, illustration-heavy beverage brand that uses bold, outlined typography and soft pastels to convey natural, zero-calorie sparkling water.

*A friendly, illustrated storybook about natural flavors.*

## Colors

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

- **Background (`#FFF9ED`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#FDE4AA`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- Uppercase for labels and navigational elements
- Highly variable letter spacing for display text

## Layout

Centered hero with large typography left and product display right

*Rhythm:* 8px base grid with generous padding for whitespace

## Elevation & Depth

- 6px 6px 0px rgba(0,0,0,1)
- Borders: 1px solid black

## Shapes

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

## Components

- **button:** Rounded pill shape with black outline and transparent or solid background
- **card:** Rounded corners with thick black outlines, often featuring whimsical illustrations
- **chip:** Simple text with black border
- **input:** Rounded rectangular fields with black borders
- **hero:** Split layout featuring massive outlined typography and a product illustration

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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