---
version: alpha
name: "Cereal"
description: "A travel and style magazine's digital archive rendered as an almost-silent grid — parchment ground, a single near-black ink, two proprietary typefaces, and an ocean of space where decoration refuses to live"

colors:
  # Surface / canvas
  background: "#f7f6ef"           # warm parchment — the defining visual signature; linen, not white
  surface: "#f0efe8"              # slightly deeper parchment for secondary areas
  surface-dark: "#363531"         # near-charcoal — used for footer, inverted blocks

  # Ink / text
  ink: "#363531"                  # the single near-black; warm charcoal, not cold
  ink-muted: "#6b6a64"            # secondary text, captions, metadata — parchment-tinted grey /* estimated */
  on-dark: "#f7f6ef"              # parchment text on charcoal surfaces

  # Brand accent — Cereal carries essentially no chromatic accent
  primary: "#363531"              # ink-as-action; CTAs use the same near-black as text
  on-primary: "#f7f6ef"           # parchment text on filled controls

  # Borders — a single rule weight
  border: "#363531"               # 1px solid bottom rule; the only structural mark
  border-muted: "#c8c7c0"         # lighter variant for less emphatic divisions /* estimated */

  # State tints
  text-hover: "#41403b"           # hover darkening (extracted from dembrandt hover value)
  focus-ring: "#363531"           # underline or 1px border on focus

  # Shadow tints — Cereal uses no shadows
  shadow-soft: "#d4d3cc"          # was rgba(54,53,49,0.15) — Google format requires hex /* estimated, never actually used */

typography:
  display-hero:
    fontFamily: "adobe-text-pro, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
    fontFeature: '"smcp"'
  display:
    fontFamily: "adobe-text-pro, Georgia, 'Times New Roman', serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.25px
    fontFeature: '"smcp"'
  heading-section:
    fontFamily: "adobe-text-pro, Georgia, 'Times New Roman', serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: 0px
    fontFeature: '"smcp"'
  body-large:
    fontFamily: "adobe-text-pro, Georgia, 'Times New Roman', serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "adobe-text-pro, Georgia, 'Times New Roman', serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.42
    letterSpacing: 0px
  nav-link:
    fontFamily: "NeueHaasUnicaPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "NeueHaasUnicaPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  caption:
    fontFamily: "NeueHaasUnicaPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  label-caps:
    fontFamily: "NeueHaasUnicaPro-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.64
    letterSpacing: 0.5px

spacing:
  xs: 2.5px
  sm: 5px
  md: 10px
  lg: 20px
  xl: 40px
  2xl: 80px
  3xl: 100px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 10px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 10px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 10px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 10px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 5px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 5px 0px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  nav-item-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 2.5px 5px
---

# Cereal Design System

## Overview

Cereal's digital presence is, in a word, silence. The site renders as an almost-unbroken field of warm parchment (`{colors.background}`) — not the clinical white of a web default, not the ivory of a lifestyle trend, but a specific aged-linen warmth that evokes the tactile quality of the magazine itself. Against this ground, a single near-black (`{colors.ink}`) does every job: headlines, navigation labels, rules, button fills, caption text. There is no chromatic accent, no primary button in a brand blue, no hover highlight in a contrasting hue. Every text element, every interactive moment, every structural line is the same `{colors.ink}`. The result is an interface that reads less like a website and more like a sequence of beautifully printed pages.

The typographic system is a deliberate pairing of two proprietary typefaces. Adobe Text Pro, a refined text roman with optical sizing and small-caps support (`"smcp"` enabled), handles all editorial text — section labels at 14px, body copy at 12px, and captions at the same register. Neue Haas Unica Pro, the Swiss grotesque by which Cereal navigates its archive, handles every UI chrome moment: navigation links at 11px, image captions at 10px. Both faces are set at conservative weights with essentially no letter-spacing manipulation — the system's restraint extends to the most granular typographic decisions. There is no italic on the navigation, no bold in the body, no expanded tracking to signal importance. The only typographic register is size.

What the site communicates, above all, is that the photography is the product. The archive grid fills the viewport with full-bleed images, each captioned in 10px Neue Haas Unica Pro — the smallest readable note. Navigation amounts to a wordmark, a search field, and an "Information" link. Spacing values of 40px, 80px, and 100px create air between elements that most publication sites would fill with ads or recommendations. Cereal trusts that if you arrived, you are here to look at images. It then stands back and lets you.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) as the definitive brand signature — not white, not beige, but a specific linen tone carried from print to screen
- Single-color design: `{colors.ink}` serves as text, borders, button fills, and interactive states simultaneously — no accent color exists in the system
- Adobe Text Pro with small-caps (`"smcp"`) for all editorial text — a choice that signals print craft rather than digital-native design
- Neue Haas Unica Pro for navigation and captions at 10–11px — the interface speaks in whispers
- Zero border-radius throughout — every corner is hard-cut, matching the precision of a magazine trim line
- 5px base spacing unit scaled in doubles (5 → 10 → 20 → 40 → 80 → 100px) — generous air as brand vocabulary
- No shadows, no gradients, no decorative illustration — surface is flat, hierarchy is spatial
- `1px solid {colors.border}` bottom rules as the sole structural separator — the same line weight as the magazine's text column rules
- Link hover state adds underline decoration only (`text-decoration: underline from-font`) — the restraint of a footnote, not a CTA
- Navigation comprises wordmark + search + information — an interface edited to the minimum viable archive controls
- Motion is opacity-only (0.1s–0.3s ease) — transitions acknowledge interaction without performing it
- Photography grid uses no card chrome, no shadow, no hover lift — images float on parchment, not on surfaces

## Colors

### Primary Canvas
- **Cereal Parchment** (`{colors.background}`): The defining surface. Every screen opens on this warm off-white. Drawn directly from the magazine's paper stock, it makes every photograph appear warm and considered rather than clinical.
- **Deep Parchment** (`{colors.surface}`): A marginally deeper warm tone for secondary zones, modal overlays, and search field backgrounds. The difference is perceptible but barely spoken.
- **Charcoal** (`{colors.surface-dark}`): The opposite register — near-black used for the footer and any inverted content. Warm charcoal, not cold — it reads as aged ink rather than screen-black.

### Ink
- **Cereal Ink** (`{colors.ink}`): The single content color of the entire system. Headlines, navigation labels, body text, category tags, button fills, bottom border rules — all resolve to this warm near-black. Monochromatic by conviction.
- **Ink Muted** (`{colors.ink-muted}`): A warm grey for secondary text, metadata, and captions in contexts where full ink would be too heavy. Estimated from brand knowledge; parchment-tinted to maintain temperature coherence.
- **On Dark** (`{colors.on-dark}`): Parchment text reversed onto charcoal. The same linen warmth, now reading as light.

### Borders and Structure
- **Rule** (`{colors.border}`): The `1px solid` bottom border used to divide sections, separate header from content, and articulate modal overlays. Same value as `{colors.ink}` — the rule is made of the same ink as the text.
- **Rule Muted** (`{colors.border-muted}`): A softer divider tone for less emphatic separations.

### Interaction States
- **Hover** (`{colors.text-hover}`): A fractional darkening of `{colors.ink}` — the hover state for links shifts from `#363531` to `#41403b`. Combined with underline decoration, it marks a moment of attention without drama.
- **Focus Ring** (`{colors.focus-ring}`): The same near-black, applied as a 1px border or underline on keyboard focus.

## Typography

### Font Family
- **Editorial / Heading**: `adobe-text-pro`, with fallbacks: `Georgia`, `'Times New Roman'`, serif. Small-caps feature (`"smcp"`) active on heading-section and display contexts.
- **UI / Chrome**: `NeueHaasUnicaPro-Regular` (self-hosted, `Neue-Haas-Unica-Pro.woff`), with fallbacks: `'Helvetica Neue'`, `Helvetica`, `Arial`, sans-serif.
- **Monospace**: Not present in the system.
- **OpenType Features**: `"smcp"` (small capitals) enabled on Adobe Text Pro heading contexts — a typographic signal that the digital interface shares the same composition standards as the printed magazine.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Feature article titles, major editorial headings (estimated — Cereal's homepage is archive-first) |
| `display` | Section feature headlines, article titles in editorial contexts |
| `heading-section` | Category labels, section heads — 14px Adobe Text Pro with small-caps |
| `body-large` | Article introductions, pull quotes |
| `body` | Standard body copy, form labels, supporting text — 12px Adobe Text Pro |
| `nav-link` | Navigation items, header controls — 11px Neue Haas Unica Pro |
| `button-ui` | Interactive control labels — 11px Neue Haas Unica Pro |
| `caption` | Image captions, timestamps, issue references — 10px |
| `label-caps` | Category filters, tag labels — 11px with fractional positive tracking |

### Principles
- **Adobe Text Pro is the editorial instrument**: A text roman with optical sizing, it brings print-quality reading to a screen that otherwise would reach for system sans. The small-caps feature activates in heading contexts without requiring a separate weight or face.
- **Neue Haas Unica Pro is the navigator**: The Swiss grotesque operates at 10–11px — below the threshold where most UI systems dare to go. Its clarity at small sizes is precisely the point; this is a chrome that refuses to compete with the photography.
- **No weight hierarchy**: Both faces use a narrow range (weight 400 for Unica, weight 400 and 700 for Adobe Text) — importance is communicated through size and spatial context, never bold.
- **No tracking manipulation at display sizes**: Unlike many editorial brands, Cereal does not employ dramatic negative tracking on headlines. The restraint is complete down to the letterform level.
- **Scale without decoration**: The type system moves from 10px to 48px through a single principle — less is more visible. There are no italics, no color shifts, no underlines in the reading flow.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (reflecting the 2.5px and 5px micro-values present throughout the extracted data).

Cereal's spacing philosophy is exceptional air over efficient density. The 40px, 80px, and 100px values appear with real frequency — not as occasional generous moments but as the default breathing room of the grid. Section padding and margin values that most publication sites would compress to 16–24px run at 40–80px here.

### Grid & Container
- Archive grid: multi-column masonry-style image grid, full viewport width, minimal gutter
- Max content width: approximately 1920px (largest extracted breakpoint) with interior margins
- Header: wordmark left-aligned (~90px wide wordmark), search field center, "Information" link right — the most minimal editorial navigation possible
- Breakpoints: 500px → 600px → 768px → 800px → 980px → 1024px → 1100px → 1150px → 1920px — 9 declared breakpoints for fine responsive control

### Whitespace Philosophy
- **Air is editorial quality**: The 80–100px spacing values signal to the reader that this content is not competing for attention. The equivalent of the printed magazine's generous margins, transposed directly to screen.
- **The grid is the design**: Rather than adding chrome around the photography, Cereal uses spacing to create the frame. Each image sits in a field of parchment; the parchment is the layout system.
- **Density as archive, not feed**: The image grid is dense where the photography is; the surrounding space breathes. This is a deliberate hierarchy — the images are the substance, the chrome is nearly invisible.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — the entire site operates flat |
| Modal (Level 1) | `1px solid {colors.border}` outline | Overlay panels, the only elevation signal is an ink rule |
| Focus Ring | `1px solid {colors.focus-ring}` border | Keyboard focus on inputs and interactive elements |

**Shadow Philosophy**: Cereal has no shadows. Not "minimal shadows" — no shadows. The extracted data shows an empty shadows array. Elevation is communicated entirely through spatial separation and the 1px border rule. A modal does not lift off the page with a drop shadow; it is delineated by an ink border, the same ink as the text. This is the most radical application of the "photography is the product" principle: anything that would add visual noise, including shadow depth, has been removed. The surface is exactly as flat as the page of a magazine.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses a single value:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — images, inputs, buttons, modals, any container |

Cereal uses zero border-radius with complete consistency. No pill-shaped buttons, no rounded cards, no softened input fields. Every element is cut with the precision of a printed page trim. This is not a functional choice but an aesthetic one — the sharp corner is the tactile memory of the magazine, translated into pixels.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — filled `{colors.ink}` on `{colors.on-primary}` text; zero radius; minimal 5px vertical padding. Used for subscription CTAs and form submissions. Sharp, authoritative, typographically minimal.
- **`button-ghost`** — same typography on parchment ground; appears as text with spatial context rather than a distinct control shape. Used for secondary actions and navigation.

### Cards

Article cards in the archive grid carry no chrome whatsoever. An image, a 10px caption beneath it in `{typography.caption}`, and the parchment surface. No border, no shadow, no radius, no hover lift. The image is the card.

### Inputs

The search input, the sole form element on the primary interface, inherits the parchment background, `{colors.ink}` text, zero radius, and zero padding. It is styled primarily by its placeholder text and a bottom border on focus. No outline ring, no fill change.

### Navigation

Header navigation is three elements: the Cereal wordmark (SVG, ~90×15.5px), a centered search field, and a right-aligned "Information" text link. A `1px solid {colors.border}` bottom rule separates header from content. All text in `{typography.nav-link}`. On hover, links gain `text-decoration: underline from-font` — the font's native underline positioning, not a CSS approximation.

### Badges / Labels

Category labels and filter controls use `{typography.label-caps}` — 11px Neue Haas Unica Pro with fractional positive tracking — on the parchment surface with no background fill. Archive filter states ("Results · 1340 · Filter · Categories") appear as plain text dividers.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the base — the parchment is not negotiable; it is the brand's most recognizable single visual decision
- Set all heading and body text in Adobe Text Pro with the `"smcp"` OpenType feature active for section labels and categories
- Apply `{colors.ink}` to everything — text, rules, button fills, borders — the monochrome discipline is what makes this system cohesive
- Use `{rounded.none}` universally — zero radius on every element at every scale; the sharp corner is definitional
- Build spacing in multiples of 5px, with generous defaults (40–80px between major sections) — the air is not waste, it is the brand's spatial voice
- Honour the `1px solid {colors.border}` bottom rule as the sole separator — never a background-fill band, never a shadow, only the hairline ink rule
- Let photography fill its grid cell without chrome — no border, no shadow, no hover overlay, no radius; the image is the component
- Keep navigation to the absolute minimum — Cereal's model is wordmark + search + one link; resist adding secondary navigation levels

### Don't
- Don't introduce any chromatic color into the UI — no brand accent, no hover highlight in a second hue, no semantic color unless a clear functional need arises (error states)
- Don't apply any border-radius — not even 2px; the sharp corner is the aesthetic commitment
- Don't add box-shadow or drop-shadow to any element; the site is flat by design, not by omission
- Don't increase font weight beyond what the two typefaces require — Neue Haas Unica Pro stays at 400; Adobe Text Pro at 700 only for the largest display moments
- Don't apply positive letter-spacing to Adobe Text Pro at heading sizes — the face reads best at its natural tracking; the `"smcp"` feature provides differentiation without tracking
- Don't change the background to white (`#ffffff`) — `{colors.background}` is a specific warm tone, not a web default; `#ffffff` would destroy the print warmth immediately
- Don't create a secondary accent color for hover, focus, or selection — `{colors.text-hover}` is a fractional darkening of ink, not a new hue
- Don't use grid gutters or card backgrounds — the parchment IS the grid; images sit directly on it

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <500px | Single-column image stack, navigation collapses to wordmark + hamburger |
| Mobile | 500–599px | 2-column grid begins, captions at 10px maintained |
| Mobile Large | 600–767px | 2-column grid with tighter spacing |
| Tablet Small | 768–799px | 3-column grid, header spacing increases |
| Tablet | 800–979px | 3–4 column grid, full navigation labels |
| Tablet Large | 980–1023px | 4-column grid, section filters visible |
| Desktop Small | 1024–1099px | 4–5 column archive grid |
| Desktop | 1100–1149px | 5-column grid, full editorial layout |
| Wide Desktop | 1150–1919px | Maximum grid columns, full 80–100px section spacing |
| Cinema | ≥1920px | Full-width layout, photography at maximum scale |

### Touch Targets
- Navigation links: 11px type; tap area extended by surrounding padding
- Archive grid cells: full-image tap target; comfortable on all devices
- Search input: `10px 0px` padding — extends tap height via enclosing header row height
- Minimum recommended augmentation: ensure interactive elements reach 44px height on mobile via padding injection

### Collapsing Strategy
- **Navigation**: Wordmark remains; search and "Information" link likely collapse into icon controls on narrow viewports
- **Archive grid**: Scales from cinema-wide (6+ columns) down to single-column stack on mobile
- **Section spacing**: 80–100px section padding progressively reduces; 20–40px at mobile
- **Typography**: Size scale compresses slightly; face selection and weight philosophy unchanged across all breakpoints

### Image Behavior
- Archive grid images: `object-fit: cover` within consistent aspect-ratio cells (landscape 3:2 or 4:3 estimated)
- Full-bleed treatment maintained across all breakpoints — no thumbnail styling, no borders added
- Photography quality is preserved at cost of layout flexibility; Cereal trades density for integrity

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#f7f6ef` — parchment, not white)
- Text: `{colors.ink}` (`#363531`)
- Brand accent: none — use `{colors.ink}` for all CTAs and interactive moments
- Secondary text: `{colors.ink-muted}` (estimated `#6b6a64`)
- Border: `{colors.border}` — 1px solid bottom rule only
- CTA background: `{colors.primary}` (= `{colors.ink}`)

### Example Component Prompts

- "Build a Cereal-style archive header on `{colors.background}` (#f7f6ef). Left-align the wordmark 'CEREAL' in adobe-text-pro 14px weight 700 small-caps, color `{colors.ink}`. Center a borderless search input with placeholder 'Search' in NeueHaasUnicaPro-Regular 11px color `{colors.ink-muted}`. Right-align an 'Information' text link in NeueHaasUnicaPro-Regular 11px color `{colors.ink}`. Separate header from page with `1px solid {colors.border}` bottom rule. Zero border-radius, no shadow, no background change."

- "Create a Cereal archive grid on `{colors.background}`. Images sit directly on parchment with no card chrome — no background, no border, no shadow, no radius. Below each image, a caption in NeueHaasUnicaPro-Regular 10px, line-height 1.70, color `{colors.ink}`. Grid gap: 5px. Image cells: zero radius, object-fit cover. On hover, add no overlay — the image is the whole interaction."

- "Design a minimal Cereal-style button: background `{colors.ink}` (#363531), text `{colors.on-primary}` (#f7f6ef), font NeueHaasUnicaPro-Regular 11px, padding 5px 10px, zero border-radius, no shadow. Hover state: background `{colors.text-hover}` (#41403b), same text and font. Active: opacity 0.85 on the hover state. No color change, no border appearance — the button communicates action through ink weight alone."

- "Build a Cereal article card: full-width image with zero border-radius and zero border, then below it a category label in NeueHaasUnicaPro-Regular 11px color `{colors.ink}` (text-transform: capitalize or none), then a headline in adobe-text-pro 14px weight 700 small-caps color `{colors.ink}`, line-height 1.21. No card background fill. The card sits directly on `{colors.background}`. No shadow, no hover lift — the spacing between cards (10px) is the only separation."

- "Create a Cereal-style modal on `{colors.background}`. Container: zero border-radius, `1px solid {colors.border}` all-round outline (not a shadow), background `{colors.background}`. Heading in adobe-text-pro 14px weight 700 small-caps `{colors.ink}`. Body text in adobe-text-pro 12px weight 400 `{colors.ink}`, line-height 1.42. Close control: a plain × character in NeueHaasUnicaPro-Regular 11px. No shadow, no backdrop blur — the modal is delineated by its ink border alone."

- "Design Cereal filter tabs for the archive: plain text labels in NeueHaasUnicaPro-Regular 11px color `{colors.ink}`, separated by middle-dot characters. Active state: same type with `text-decoration: underline from-font`. No button background, no pill shape, no selected-state fill — the active filter is only an underline on parchment."

### Iteration Guide

1. Start with `{colors.background}` — the parchment ground is the first decision and cannot change; everything else reads warm or cool depending on this choice
2. Use `{colors.ink}` for every element — text, borders, CTAs — resist any urge to introduce a second color until a functional requirement (error, confirmation) demands it
3. Apply zero border-radius to every element at every scale — `{rounded.none}` is not a fallback, it is the style
4. Scale spacing generously — default to 20px gaps, 40px section padding, 80px between major sections; the air is the brand's primary luxury signal
5. Typography is the hierarchy — use size (10px → 11px → 12px → 14px → display) and Adobe Text Pro small-caps to create register; never bold and never a second hue
6. No elevation — flat is mandatory; if depth is needed, use a `1px solid {colors.border}` outline, not a shadow
7. Let photography hold all visual weight — resist adding any graphic element (icon, illustration, decorative rule) that would compete with the images

---

## 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 Cereal. Brand names and trademarks belong to their respective owners.