CURATED · OPEN · FREE

Ouraring

Premium smart ring for health tracking with a refined, understated aesthetic.

HardwareProductPremiumRefinedClean

↓ Download design system (30 MB)Open in OpenDesign

Visit: https://ouraring.com

📦 Browse pack contents →

Identity DNA

premiumhealthwearableminimalistsophisticated

A luxury health device that blends seamlessly into daily life.

Color

#2A72DEAccent

#000000Ink

#4A4741Ink soft

#F7F1E8BG

#FFFFFFBG soft

#A8A5A0Muted

rgba(0, 0, 0, 0.1)Line

Warm, earthy neutrals with a single clinical blue accent for interactive elements.

Typography

transitional-serif · humanist-sans

display80px · 400
heading40px · 400
body16px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px base grid with generous vertical spacing for premium feel.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid #ECECEC as primary divider

0 1px 0 rgba(255, 255, 255, 0.06) inset

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column content with generous whitespace and occasional side-by-side modals.

Motion & Interaction

150msmicro

300mssmall

500msmedium

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

Smooth fade transitions for state changes · Subtle color and opacity shifts on hover

Smooth color and opacity transitions over 0.15s · Immediate state change with subtle feedback

Components

button Pill-shaped, solid dark background with white text or blue background.
card Clean with subtle borders or no visible cards, relying on photography.
input Rounded pill-shaped input fields with light borders.
hero Large typography headline with cinematic product photography.

Voice & Don'ts

Tone Confident, elegant, and straightforward.
Headlines Short, impactful phrases using lowercase or sentence case.
CTAs Simple, action-oriented verbs like 'Explore' or 'Continue'.

Don't use bright, neon, or aggressive accent colors — screenshot shows a single muted blue accent (#2A72DE) against warm neutrals.
Don't use sharp, rectangular corners on primary buttons — screenshot shows fully rounded pill-shaped buttons (border-radius: 9999px).
Don't use heavy, blocky sans-serif fonts for headlines — screenshot shows a refined serif font for display text (Editorial New).
Don't overcrowd the interface with multiple competing visual elements — screenshot shows generous whitespace and minimal UI chrome.
Don't use stark, pure black backgrounds as the default — screenshot shows a warm off-white background (#F7F1E8) or dark gray (#4A4741).
Don't use small, cramped typography or tight line heights — screenshot shows large, legible type with generous spacing.
Avoid: Aggressive sales language
Avoid: Jargon-heavy technical specs
Avoid: Cluttered visual layouts
Avoid: Loud, high-chroma color schemes

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

A premium health wearable brand website combining refined serif typography with a warm, earthy neutral palette. The design emphasizes cinematic product photography, generous whitespace, and a minimalist interface. Key colors are warm off-white (#F7F1E8), deep charcoal (#4A4741), and a single muted blue accent (#2A72DE). The primary font category is transitional-serif for display and humanist-sans for body text. Critical don'ts: avoid loud neon accents, sharp rectangular buttons, blocky sans-serif headlines, and cluttered layouts. The overall feel should be sophisticated, calm, and premium, prioritizing product beauty over aggressive marketing.

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