CURATED · OPEN · FREE

Aura Bora

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

beveragedtc

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://www.aurabora.com

📦 Browse pack contents →

Identity DNA

playfulwhimsicalnaturalenergeticorganic

A friendly, illustrated storybook about natural flavors.

Color

#000000Ink

#FFF9EDBG

#FFE2E2BG soft

#E5E5F1BG quiet

#FDE4AAMuted

rgba(0,0,0,1)Line

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

Typography

grotesque-sans · monospace

display120px · 800
h180px · 800
h232px · 800
body17px · 400
caption13px · 400

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

Spacing

4px

8px

16px

26px

60px

8px base grid with generous padding for whitespace

Surfaces

sm · 0px

md · 10px

lg · 15px

pill · 999px

1px solid black

6px 6px 0px rgba(0,0,0,1)

Layout

1280container

12columns

26pxgutter

768 / 1024breakpoints

Centered hero with large typography left and product display right

Motion & Interaction

200msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Scrolling marquee · Hover scaling on buttons

Scale transform and background color shift · Subtle press effect

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

Voice & Don'ts

Tone Friendly, playful, and approachable
Headlines Bold, massive, and heavily outlined in uppercase
CTAs Clear, simple calls to action with pill-shaped borders

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
Avoid: Complex jargon
Avoid: Sterile aesthetics
Avoid: Heavy shadows

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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