---
name: Apple
description: "The gold standard for premium hardware presentation, proving that absolute restraint and typography can create a highly effective visual identity."
version: alpha

colors:
  background: "#000000"
  primary: "#1d1d1f"
  secondary: "#86868b"
  tertiary: "#0071e3"
  neutral: "#86868b"
  bg-soft: "#f5f5f7"
  line: "rgba(255,255,255,0.8)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.01em"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0.01em"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.47
    fontWeight: 400
    letterSpacing: "-0.2px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.1px"

rounded:
  sm: 0px
  md: 8px
  lg: 0px
  pill: 980px

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

---

## Overview

A premium hardware showcase defined by cinematic dark layouts, pristine typography, and absolute restraint.

*A high-end product gallery showcasing hardware with cinematic photography and restrained typography.*

## Colors

Extreme contrast between pure black, soft neutral grays, and crisp white text for a premium feel.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#1d1d1f`)** — uses `ink` token
- **Secondary text (`#86868b`)** — uses `ink-soft` token
- **Accent (`#0071e3`)** — uses `accent` token
- **Muted (`#86868b`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.8)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Navigation text is extremely small and tightly spaced.
- Headlines use tight tracking and high weight.
- Body text maintains a generous line height for readability.

## Layout

Full-width edge-to-edge hero sections with centered content.

*Rhythm:* Generous vertical padding around hero sections to emphasize whitespace and focus.

## Elevation & Depth

- rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
- Borders: 1px solid rgba(255,255,255,0.8) for dark outlines, 1px solid #1d1d1f for light elements

## Shapes

- `sm`: 0px
- `md`: 8px
- `lg`: 0px
- `pill`: 980px

## Components

- **button:** Pill-shaped primary buttons with solid background and outline secondary buttons.
- **card:** Full-width product cards defined by large imagery and centered text.
- **hero:** Cinematic full-screen product photography with centered headline and dual CTA buttons.

## Do's and Don'ts

**Don't:**
- Don't use heavy drop shadows — screenshot shows minimal, subtle elevation shadows.
- Don't use complex gradients — screenshot shows solid, flat backgrounds.
- Don't use small, cluttered typography — screenshot shows massive, clean display fonts.
- Don't use bright, clashing colors — screenshot shows a highly restrained palette.
- Don't use complex grid layouts — screenshot shows simple, centered, linear stacking.
- Don't use decorative borders or frames — screenshot shows content breathing in open space.

---

## System Prompt (paste into AI agent)

```
This design represents the ultimate refinement of premium hardware marketing. It relies on massive, centered typography (humanist-sans) against pure black or soft neutral gray backgrounds, creating a cinematic, editorial feel. The primary palette is strictly limited to #000000, #f5f5f7, and #1d1d1f, with a single high-contrast accent color of #0071e3 for primary actions. Key constraints include avoiding visual clutter, resisting the use of decorative elements, and maintaining absolute restraint in the color palette. Motion should be subtle and smooth, focusing on opacity and transform transitions to enhance the premium, seamless feel.
```