---
name: Ouraring
description: "Excellent example of premium product branding using restraint, high-quality photography, and refined typography to convey luxury without being ostentatious."
version: alpha

colors:
  background: "#F7F1E8"
  primary: "#000000"
  secondary: "#4A4741"
  tertiary: "#2A72DE"
  neutral: "#A8A5A0"
  bg-soft: "#FFFFFF"
  bg-quiet: "#4A4741"
  muted-soft: "#838280"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-5.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A luxury health device that blends seamlessly into daily life.*

## Colors

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

- **Background (`#F7F1E8`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#4A4741`)** — uses `ink-soft` token
- **Accent (`#2A72DE`)** — uses `accent` token
- **Muted (`#A8A5A0`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

## Layout

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

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

## Elevation & Depth

- 0 1px 0 rgba(255, 255, 255, 0.06) inset
- Borders: 1px solid #ECECEC as primary divider

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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