---
name: Opal Camera Inc.
description: "This site is a textbook example of modern premium hardware branding, balancing minimalist UI with warm, human-centric photography."
version: alpha

colors:
  background: "#FAFAFA"
  primary: "#000000"
  tertiary: "#FFDB01"
  neutral: "#959595"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A premium webcam brand blending warm lifestyle photography with crisp, minimalist product design.

*A premium hardware studio showcasing high-end tech with Apple-like clarity and warmth.*

## Colors

High contrast with a single vibrant yellow accent against clean white and black.

- **Background (`#FAFAFA`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FFDB01`)** — uses `accent` token
- **Muted (`#959595`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Headlines use tight negative letter-spacing.
- Navigation items are small and capitalized or mixed-case.
- The brand wordmark is scaled massively in some sections.

## Layout

Asymmetric layout with large lifestyle photography balancing clean product grids.

*Rhythm:* Generous padding and vertical spacing create a breathable, premium layout.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 10px 30px 0px
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

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

## Components

- **button:** High-contrast pill buttons (yellow with black text) or transparent with subtle borders.
- **card:** Clean product cards with minimal borders and generous whitespace.
- **chip:** N/A
- **input:** Simple newsletter input with an arrow icon.
- **hero:** Full-bleed lifestyle photography with bold, left-aligned typography.

## Do's and Don'ts

**Don't:**
- Don't use multiple accent colors — screenshot shows a single dominant yellow.
- Don't use complex gradients — screenshot shows flat colors and photography.
- Don't use rounded-corner cards with heavy shadows — screenshot uses subtle borders.
- Don't use decorative scripts or serifs — screenshot uses clean geometric sans-serif.
- Don't crowd the layout with too many elements — screenshot shows generous whitespace.
- Don't use bright, neon colors — screenshot uses a restrained palette of black, white, and yellow.

---

## System Prompt (paste into AI agent)

```
Design a premium hardware product site with a focus on clean typography, generous whitespace, and high-quality photography. Use a minimalist palette of black (#000000), white (#FAFAFA), and a single vibrant yellow accent (#FFDB01). Typography should be a geometric sans-serif (Roobert) with tight letter-spacing on headlines. Layouts should be breathable with large lifestyle images and crisp product shots. Critical don'ts: Do not use multiple accent colors, avoid complex gradients, and maintain strict minimalism by avoiding decorative elements or cluttered layouts.
```