---
version: alpha
name: "Casper"
description: "Friendly sleep brand anchored in deep navy warmth, soft pill shapes, and confident custom serif typography designed to make mattress buying feel approachable."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f4f6fb"   # was rgba(30, 48, 110, 0.04) — Google format requires hex
  surface-dark: "#1e306e"

  # Text / ink
  ink: "#151515"
  ink-muted: "#6d6e71"
  on-background: "#151515"
  on-surface: "#1e3063"

  # Brand accent — Casper Navy
  primary: "#1e306e"
  on-primary: "#ffffff"
  primary-container: "#a8a9fc"   # --color-primary-light, periwinkle tint

  # Variant blues
  primary-dark: "#012169"
  primary-mid: "#526699"

  # Sale accent
  sale: "#cb372a"
  on-sale: "#ffffff"

  # State / interaction
  primary-hover: "#243a84"
  focus-ring: "#2f84ed"

  # Borders
  border: "#899ac7"   # was rgba(30, 48, 110, 0.30) — Google format requires hex
  border-subtle: "#e2e6f0"   # was rgba(30, 48, 110, 0.12) — Google format requires hex

  # Shadow tints
  shadow-soft: "#1e306e"   # brand-tinted shadow base

  # Semantic
  success: "#38a169"
  error: "#cb372a"

typography:
  display-hero:
    fontFamily: "New Kansas, Playfair Display, Georgia, serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.44px
  display:
    fontFamily: "New Kansas, Playfair Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.56px
  heading-section:
    fontFamily: "New Kansas, Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.44px
  heading-sub:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.32px
  body-large:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Calibre, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-sale:
    backgroundColor: "{colors.sale}"
    textColor: "{colors.on-sale}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-sale-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px 20px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px 20px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-sale:
    backgroundColor: "{colors.sale}"
    textColor: "{colors.on-sale}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Casper Design System

## Overview

Casper operates in a space where consumer anxiety is high and the purchase is large and invisible until it arrives at the door. The design system answers this challenge with a palette built almost entirely on a single resolute conviction: navy blue is trustworthy. The hero color, Casper Navy (`{colors.primary}`), is deployed with a confidence that few e-commerce brands would risk — it appears in headers, hero sections, primary buttons, link text, and background canvases without relief. The system earns that commitment by pairing it with clean white (`{colors.background}`) and reserving a warm periwinkle (`{colors.primary-container}`) and slate blue (`{colors.primary-mid}`) as harmonic midtones rather than competing accents. The result feels neither corporate nor cold; it feels like the brand of a company that genuinely wants to explain sleep to you.

Typography carries the brand's warmth. New Kansas — Casper's custom display serif — appears at 56–72px with tight negative tracking, bringing editorial weight to what are essentially mattress marketing headlines. Against it, Calibre functions as the workhorse sans: clean, friendly, slightly wide compared to pure geometric grotesques. The pairing creates a page that feels considered rather than assembled. A serif that says "we take rest seriously" over a sans that says "we will make this easy for you." The type scale is generous, living comfortably between 1.15 and 1.6 line-heights across all contexts.

Shape is where the friendliness becomes tactile. Every CTA is a 32px-radius pill — soft enough to look approachable, structured enough to read as purposeful. Card imagery gets a 24px radius, creating the same rounded-corner warmth that Casper leans into across photography and product styling. The only sharp edges in the system appear at 4px — compact badges and tiny chips where the pill would feel oversized. Shadow is present but tethered: soft brand-tinted drops (`{colors.shadow-soft}`) at 18–50px blur give cards lift without ever looking synthetic or dramatic. Casper's design language says: we built something comfortable for sleeping in, and we designed the brand to feel the same way.

**Key Characteristics:**
- Casper Navy (`{colors.primary}`) as the single dominant brand color across surfaces, text, and all interactive elements
- New Kansas custom serif for display at 56–72px (`{typography.display-hero}`, `{typography.display}`) with tight negative tracking
- Calibre as the functional sans (`{typography.body}`) — warm geometric, slightly open
- 32px pill radius on all CTA buttons — rounded but not novelty
- 24px card radius (`{rounded.xl}`) — editorial warmth carried through containers
- Brand-tinted navy shadows (`{colors.shadow-soft}`) rather than neutral gray drops
- Sale red (`{colors.sale}`) as the only warm chromatic break — used strictly for urgency and pricing
- Blue electric focus ring (`{colors.focus-ring}`) derived from the brand's own CSS variable `--color-fill-brand-indigo`
- Generous 8px base grid; section rhythms build in 48–128px steps
- Periwinkle container tint (`{colors.primary-container}`) used sparingly for highlights and badges — restrained palette discipline

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): Primary page background — clean, unobtrusive, lets navy accents dominate.
- **Navy Frost** (`{colors.surface}`): Subtle blue-tinted panel background for section differentiation. Was `rgba(30, 48, 110, 0.04)` on-site; approximated to opaque `#f4f6fb`.
- **Casper Navy** (`{colors.surface-dark}`): Full-saturation navy used as dark section and card canvas.

### Text & Ink
- **Near-Black** (`{colors.ink}`): Primary text on light backgrounds — functionally black, slightly warm.
- **Slate Gray** (`{colors.ink-muted}`): Secondary text, captions, metadata — derived from `--color-greyscale-black-60`.
- **Deep Navy** (`{colors.on-surface}`): Body text on tinted panels, links throughout navigation.

### Brand Accent
- **Casper Navy** (`{colors.primary}`): The system's sole brand color. Applied to primary buttons, nav links, section headers, and dark surface fills. Every CTA starts here.
- **Navy Hover** (`{colors.primary-hover}`): Deepened navy for button and link hover states.
- **Dark Navy** (`{colors.primary-dark}`): Slightly deeper variant used in select hero contexts and sale button hover.
- **Mid Blue** (`{colors.primary-mid}`): Muted periwinkle-gray for secondary button fills and informational surfaces — a harmonic variant, not a contrast accent.
- **Periwinkle Tint** (`{colors.primary-container}`): Lighter blue echo used for badge fills and highlight chips — CSS variable `--color-primary-light`.

### Semantic
- **Sale Red** (`{colors.sale}`): The system's only warm accent — reserved exclusively for sale pricing, urgency banners, and promotional CTA buttons. Never used decoratively.
- **Electric Blue Focus** (`{colors.focus-ring}`): Focus ring color derived from `--color-fill-brand-indigo` equivalent; visible against both white and navy contexts.
- **Success Green** (`{colors.success}`): Form validation and confirmation states only.

### Borders & Shadows
- **Navy Border** (`{colors.border}`): Input field borders and card outlines. Was `rgba(30, 48, 110, 0.30)`; approximated opaque.
- **Subtle Border** (`{colors.border-subtle}`): Light card outlines and dividers. Was `rgba(30, 48, 110, 0.12)`; approximated opaque.
- **Navy Shadow** (`{colors.shadow-soft}`): Shadow base color — navy-tinted rather than neutral gray, reinforcing brand identity in depth.

## Typography

### Font Families
- **New Kansas** (substitute: Playfair Display, Georgia): Casper's custom display serif. Used exclusively for large-scale headlines (56–72px). The slightly rounded letterforms and confident serifs make product marketing copy feel considered rather than transactional.
- **Calibre** (substitute: Inter, system-ui): The functional workhorse sans. Open, slightly wide letterforms read clearly at all body sizes. Used for everything from navigation to product descriptions to button labels.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Largest hero headlines — mattress category names, brand statements |
| `display` | Section headings, hero CTAs, campaign feature copy |
| `heading-section` | Major section openers — product category headers |
| `heading-sub` | Sub-section titles, product card names, feature headers |
| `body-large` | Lead body paragraphs, feature descriptions, quiz UI |
| `body` | Product descriptions, navigation, standard prose |
| `nav-link` | Navigation items, breadcrumbs, tabs |
| `button-ui` | All CTA labels and interactive controls |
| `caption` | Pricing disclaimers, badges, metadata, footnotes |

### Principles
- **Serif for authority, sans for clarity**: New Kansas headlines carry brand weight; Calibre makes everything else readable. The switch is always semantic — never decorative.
- **Negative tracking at display scale**: `display-hero` tracks at -1.44px and `display` at -0.56px, creating tight optical mass for large text blocks.
- **Generous line-heights in body**: 1.6 for body and nav-link, 1.0 for button labels — designed for comfortable reading of longer product descriptions.
- **Weight as hierarchy signal**: Calibre runs at weight 400 for body; weight 500 for nav, buttons, sub-headings; weight 700 only for emphasized body and badge text.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The grid builds generously — the 8px base accumulates quickly toward the 48–128px section rhythms that give the page its breathing room. Tight internal element gaps (8–16px) contrast with expansive section padding, creating a rhythm that moves between close product detail and open whitespace.

### Grid & Container
- Max content width: approximately 1260px (breakpoint pattern suggests 1253px inner container)
- Standard 12-column grid with full-bleed hero sections
- Product grids in 3- or 4-column layouts at desktop, collapsing to 2-up at tablet
- Sticky top navigation with left-aligned logo, centered menu at desktop, right utility icons

### Whitespace Philosophy
- Section padding in the 64–128px range vertically — rest needs room to breathe
- Internal card padding at 24px aligns to the spacing scale
- Image-heavy cards use tight 8px internal gaps so product photography dominates
- Navigation links at 16px gaps — dense but not crowded

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nav, text content, inline elements |
| Subtle (Level 1) | `rgba(30, 48, 110, 0.12) 0px 0px 0px 1px` | Card outlines, input border resting state |
| Card (Level 2) | `rgba(30, 48, 110, 0.1) 0px 18px 50px 0px` | Product cards, review panels, feature blocks |
| Elevated (Level 3) | `rgba(0, 0, 0, 0.15) 0px 8px 15px 0px` | Dropdowns, sticky elements, drawers |
| Dialog (Level 4+) | `rgba(0, 0, 0, 0.4) 0px 9999px 0px 9999px` | Modal overlay — spread shadow creates scrim |
| Focus Ring | `rgb(47, 132, 237) 0px 0px 5px 0px` | Keyboard focus — electric blue glow |

**Shadow Philosophy**: Casper's shadows are navy-tinted at the card level, anchoring depth in brand color rather than neutral gray. The `18px 50px` spread on product cards is generous — it lifts product modules off the page with cloud-like softness. Focus rings skip shadow conventions entirely, using a luminous blue glow from `{colors.focus-ring}` that reads clearly against both white and dark navy backgrounds. The modal scrim is a single massive spread shadow rather than a separate overlay element.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, flush layout dividers |
| `sm` | 4px | Compact badges, small utility chips |
| `md` | 8px | Input fields, video players, modal corners |
| `lg` | 12px | Small cards, tooltip containers |
| `xl` | 24px | Product cards, image banners, feature panels |
| `pill` | 9999px | All CTA buttons — primary, secondary, sale |

The system has two dominant shape languages: pill (interactive controls) and 24px (containers and imagery). The pill communicates approachability for every action; the 24px card radius translates that softness into editorial warmth. The 8px input radius is a deliberate step down — functional, not casual. Badges at 4px read as instructional labels, not rounded callouts.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Casper Navy fill, white text, pill shape. The definitive CTA: "Shop mattresses," "See all reviews." Always starts here.
- **`button-primary-hover`** — Deepened navy on hover, maintaining pill and weight.
- **`button-secondary`** — White fill, navy text, pill shape. Used on dark sections where the primary fill would disappear.
- **`button-sale`** — Sale red (`{colors.sale}`) fill on promotional moments — "Shop sale," "Save up to 30%." The only button that breaks navy doctrine.
- **`button-ghost`** — Navy canvas with white text on hero dark sections. Large-format CTA for quiz entry and compare flows.

### Cards

Card containers at `{rounded.xl}` (24px) carry the same softness as button shapes but at container scale. Product cards on white (`{colors.background}`) rely on brand-tinted shadow (`{colors.shadow-soft}`) for lift; cards on dark sections invert to `{colors.surface-dark}` with white text.

### Inputs

Email and text inputs use `{rounded.md}` (8px), a two-pixel blue border (`{colors.border}`), and generous 16px vertical padding. Focus state removes shadow and activates a sharp focus outline — the `{colors.focus-ring}` blue glow signals keyboard navigation.

### Badges / Tags

Promotional badges and review count chips use `{rounded.pill}` for friendly labeling. Sale badges (`badge-sale`) in `{colors.sale}` red mark pricing. Standard badges in `{colors.surface}` tint are neutral informational tags.

### Navigation

Full-width sticky header with navy text links at `{typography.nav-link}`. Desktop layout: left-aligned wordmark, centered category links, right-side utility icons (search, account, cart). Mobile: hamburger-triggered side drawer with the same link hierarchy.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (Casper Navy) as the foundational color for all interactive elements — buttons, links, section fills, and icon accents.
- Apply `{rounded.pill}` (9999px) to every CTA button. The pill shape is the brand's interactive signature and should never be broken.
- Use New Kansas (`{typography.display-hero}`, `{typography.display}`) exclusively for large-scale display headlines — it only works at size.
- Apply brand-tinted navy shadows rather than neutral gray drops when adding depth to product cards.
- Reserve `{colors.sale}` strictly for sale pricing, urgency banners, and promotional CTAs — it loses impact if used decoratively.
- Use `{rounded.xl}` (24px) for all product cards and image banners to mirror the softness of button shapes at container scale.
- Implement the `{colors.focus-ring}` electric blue glow for keyboard focus — visible against both white and dark navy backgrounds.
- Keep the type system binary: New Kansas for editorial display, Calibre for all functional text.

### Don't
- Don't introduce a secondary brand color alongside Casper Navy — the system's power comes from its monochromatic navy conviction.
- Don't use mid-range radius values (6px, 10px, 16px, 20px) on CTA buttons. The system is either pill or md — mixing in-between values dilutes the shape language.
- Don't apply `{colors.sale}` to standard CTAs or decorative elements; its urgency signal depends on exclusivity.
- Don't use New Kansas at body sizes (below 32px) — the serif's editorial presence collapses at small scale.
- Don't flatten shadows to neutral gray. The `{colors.shadow-soft}` navy tint is a brand signal, not incidental.
- Don't introduce tight letter-spacing in body copy — negative tracking is reserved for display scale only.
- Don't skip the sticky header on scroll. Navigation context is important when product pages are long and decision-making is involved.
- Don't use weight 300 or 900 for primary Calibre body text — those extremes are reserved for specific hero moments only.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single column, 24px horizontal gutters, hero headline scales to ~36px |
| Mobile | 390–767px | Single column layout, nav collapses to hamburger drawer |
| Tablet | 768–1023px | Two-column product grids, hero switches to stacked layout |
| Desktop | 1024–1260px | Full three/four-column grids, sticky nav, expanded hero |
| Large Desktop | >1260px | Content max-width caps, side gutters expand |

### Touch Targets
- Pill buttons with `12px 24px` padding achieve ~44px height with Calibre 16px line-height 1.0
- Large quiz CTAs at `14px 32px` padding exceed 48px touch height comfortably
- Header utility icons (search, cart, account) sized for thumb access at 40–44px
- Navigation links given 16px+ vertical padding on mobile for tap accuracy

### Collapsing Strategy
- Display hero (72px) scales to ~40–44px on mobile; tight negative tracking preserved
- Four-column product grids collapse to 2-up at tablet (768px), single column below 576px
- Section vertical padding compresses from 128px to 48–64px on mobile
- Pill button radius non-negotiable at all sizes — the approachability signal carries to mobile
- Full-bleed hero imagery maintained at all sizes; height constraints adjusted per viewport
- Sticky nav transitions to hamburger menu at 1023px

### Image Behavior
- Product photography is full-bleed within `{rounded.xl}` card containers
- Hero images use CSS object-fit cover with aspect-ratio constraints per breakpoint
- Lazy loading for below-fold product grid imagery; eager loading for hero
- Image banner radius (24px) preserved at mobile scale

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Sale / urgency: `{colors.sale}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

1. **Primary CTA Button**: Build a pill-shaped button with `background-color: #1e306e` (`{colors.primary}`), `color: #ffffff` (`{colors.on-primary}`), `border-radius: 9999px` (`{rounded.pill}`), `padding: 12px 24px`, font Calibre weight 500 16px line-height 1.0. On hover, darken to `#243a84` (`{colors.primary-hover}`).

2. **Product Card**: White card (`{colors.background}`) with 24px border-radius (`{rounded.xl}`), padding 24px, and a brand-tinted shadow `rgba(30, 48, 110, 0.1) 0px 18px 50px 0px`. Product image fills the full card width above the content area with the same 24px top radius. Text headline in New Kansas 500 24px, price in Calibre 500 20px, CTA button below.

3. **Hero Section (Dark)**: Full-width section with `background-color: #1e306e` (`{colors.surface-dark}`). Display headline in New Kansas 600 72px, `color: #ffffff`, tracking -1.44px (`{typography.display-hero}`). Body copy in Calibre 400 20px white, line-height 1.6. CTA button with white fill, navy text, pill shape (`{components.button-secondary}`).

4. **Email Input with CTA**: Input field with `background: #ffffff`, `border: 2px solid #899ac7` (`{colors.border}`), `border-radius: 8px` (`{rounded.md}`), `padding: 16px 20px`, Calibre 400 16px. On focus: border color shifts to `#1e306e` (`{colors.primary}`). Inline submit button to the right: navy pill fill CTA (`{components.button-primary}`).

5. **Navigation Header**: Sticky white header, 64px height. Left: Casper wordmark (navy). Center: nav links in Calibre 500 16px `{colors.on-surface}`, 16px gaps, no underline default, underline on hover. Right: search, account, cart icons in navy. Below 1024px: hide center links, show hamburger icon triggering a full-height side drawer with the same link hierarchy.

6. **Sale Badge + Card**: Product card as above, plus a pill badge in top-left corner: `background: #cb372a` (`{colors.sale}`), `color: #ffffff`, Calibre 500 12px, `padding: 4px 10px`, `border-radius: 9999px`. Price line shows original price strikethrough in `{colors.ink-muted}`, sale price in `{colors.sale}`.

### Iteration Guide

1. Start with `{colors.background}` white canvas and `{colors.primary}` navy as the only two colors — all CTAs, headings, and interactive elements should be navy before any other color is introduced.
2. Set all button and pill-chip border-radius to `{rounded.pill}` (9999px) first — never deviate unless building an input field.
3. Display headlines use New Kansas (`{typography.display-hero}` or `{typography.display}`) with negative tracking; switch to Calibre (`{typography.body}`) at 24px and below.
4. Add navy-tinted card shadow `rgba(30, 48, 110, 0.1) 0px 18px 50px 0px` to any lifted container — not neutral gray.
5. Introduce `{colors.sale}` only when representing promotional pricing or urgency — treat it as a semantic signal, not a palette option.
6. Card and image container radius is always `{rounded.xl}` (24px) — the pill and the container should feel like siblings, not strangers.
7. For dark sections, flip to `{colors.surface-dark}` and switch buttons to the white-fill secondary variant — the navy on navy interaction vocabulary must stay legible.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Casper. Brand names and trademarks belong to their respective owners.