---
version: alpha
name: "Omsom"
description: "Proud, loud Asian pantry brand with a hot coral identity, chartreuse energy, and swirling organic shapes that celebrate unapologetic flavor."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fd5225"           # primary hot coral — dominant brand surface
  surface-alt: "#f7f3da"       # warm parchment — alternate soft-panel background
  surface-dark: "#1a0a00"      # near-black used for footer and dark sections

  # Text / ink
  ink: "#000000"
  on-background: "#000000"
  on-surface: "#ffffff"
  ink-muted: "#3d1a00"         # very dark brown for secondary text on parchment

  # Brand accent
  primary: "#fd5225"           # hot coral-orange — CTAs, logo mark, dominant identity color
  on-primary: "#ffffff"
  primary-hover: "#d7461f"     # darkened coral for button hover /* estimated */

  # Secondary accent
  secondary: "#c8e600"         # chartreuse / lime green — burst callouts, highlight energy /* estimated */
  on-secondary: "#000000"

  # Interaction states
  focus-ring: "#fd5225"
  link-default: "#0000ee"      # browser default blue for inline links
  link-brand: "#fd5225"        # brand coral for styled links

  # Semantic
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#ef4444"

  # Borders / shadows
  border: "#e0d9c8"            # warm gray-beige hairline /* estimated */
  shadow-soft: "#d9c8b0"       # warm tinted shadow /* estimated */

typography:
  display-hero:
    fontFamily: "Whyte Inktrap, Druk Wide, ui-sans-serif, system-ui, sans-serif"
    # custom self-hosted font (YAD4imOwJ8U_0); Whyte Inktrap is the closest commercial match
    fontSize: 107px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  display:
    fontFamily: "Whyte Inktrap, Druk Wide, ui-sans-serif, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Whyte Inktrap, Druk Wide, ui-sans-serif, system-ui, sans-serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Whyte Inktrap, Druk Wide, ui-sans-serif, system-ui, sans-serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  body-large:
    fontFamily: "GT America, Aktiv Grotesk, ui-sans-serif, system-ui, sans-serif"
    # custom self-hosted font (YAD4iiANq5Q_1); GT America or Aktiv Grotesk nearest match
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.024px
  body:
    fontFamily: "GT America, Aktiv Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  nav-link:
    fontFamily: "GT America, Aktiv Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Whyte Inktrap, Druk Wide, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "GT America, Aktiv Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-micro:
    fontFamily: "Times New Roman, Times, serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  blob: 9999px    # organic blob / pill shapes — dominant radius for callouts and CTAs
  full: 9999px    # circular elements — pill radius achieves the same visual effect

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.blob}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.blob}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.blob}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.blob}"
    padding: 14px 28px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.blob}"
    padding: 14px 28px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 32px
  card-parchment:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.blob}"
    padding: 6px 14px
  blob-callout:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.display}"
    rounded: "{rounded.blob}"
    padding: 32px 40px
---

# Omsom Design System

## Overview

Omsom arrived not with a whisper but a war cry: hot coral-orange (`{colors.primary}`) splashed across every surface like a diner neon at 2am, paired with a chartreuse green (`{colors.secondary}`) so bright it feels like it's shouting back. The brand is built on the conviction that Asian American food culture has earned the right to take up space — and the design system makes that argument visually, loudly, and without apology. You're not browsing a pantry section. You're stepping into a cultural manifesto rendered as a Shopify storefront.

The canvas alternates between three registers: a clean white (`{colors.background}`) for breathing room and product contrast, a warm parchment (`{colors.surface-alt}`) that evokes rice paper and recipe cards, and deep near-black (`{colors.surface-dark}`) footer sections anchored in darkness. But the hero mode — the one that defines the brand — is `{colors.primary}` coral as the dominant surface, with swirling organic blob shapes in chartreuse and coral layered on top like graffiti painted over a plate of noodles. Nothing aligns to a grid. Everything is intentional.

The typography tells a parallel story. The primary display face (self-hosted, closest commercial analog Whyte Inktrap) carries wide, confident letterforms with subtle ink-trap notches at joints — a nod to letterpress and print culture. It sits at 107px on the hero, weight 400, line-height 1.4: easy and spacious, not aggressive like a condensed grotesk. The body face (closest match GT America) is clean, generous, and deferential — it knows its job is to make the display face look better by getting out of the way. The resulting pairing is: expressive cultural display type over neutral functional body text.

**Key Characteristics:**
- Hot coral-orange (`{colors.primary}`) as the primary brand surface — not just an accent, a whole canvas
- Chartreuse-lime (`{colors.secondary}`) as the energy color — blob callouts, "SAY HI" bubbles, starburst moments
- Swirling abstract blob patterns on dark backgrounds — organic, irreverent, hand-made energy
- Wide display type at weight 400 with ink-trap details — confident without being aggressive
- Zero sharp-cornered buttons — all CTAs round to `{rounded.blob}` or organic blob shapes
- Parchment (`{colors.surface-alt}`) as the warm neutral, never a cold gray
- Near-black (`{colors.surface-dark}`) used only for footer and dark-mode panels — keeps coral's heat from flattening
- Section rhythm alternates coral → white → parchment → dark — each zone has its own temperature
- Product packaging uses bold wordmarks and high-contrast photography — never lifestyle soft-focus
- Inline links styled in `{colors.link-brand}` coral on white sections, browser-default `{colors.link-default}` blue in editorial passages
- Typography ligatures and contextual alternates explicitly disabled (`"calt" 0`) — keeps display type raw, not precious
- Motion is minimal: 0.3s ease transitions, one looping animation at 1.4s for decorative blob elements

## Colors

### Primary
- **Hot Coral** (`{colors.primary}`): The brand's signature — header nav, CTA hover states, product badge fills, underlined link color. RGB(253, 82, 37): a warm orange-red that reads as coral under daylight, neon under dark backgrounds.
- **White** (`{colors.background}`): The relief canvas — product photography sections, body copy zones, checkout flows. High frequency but never cold — always warmed by the coral or parchment neighbors.

### Brand Accent
- **Chartreuse / Lime** (`{colors.secondary}`): Blob callout fills, speech-bubble moments, energizing counter-accent to the coral. Acts as the exclamation point of the palette — appears in bursts, never as a surface.
- **Warm Parchment** (`{colors.surface-alt}`): Alternate section background used for editorial content and "our story" passages. Sits between white and yellow — reading-friendly, culturally warm.

### Text States
- **Ink Black** (`{colors.ink}`): All body text on light surfaces. Pure black, never softened to a gray.
- **On-Surface White** (`{colors.on-surface}`): Display and heading text on coral or dark surfaces.
- **Dark Brown** (`{colors.ink-muted}`): Secondary text on parchment — warm, editorial, not mechanical gray.
- **Near-Black** (`{colors.surface-dark}`): Footer background, dark-mode sections. Keeps coral's energy from overwhelming the full composition.

### Semantic
- **Link Blue** (`{colors.link-default}`): Browser-default blue (#0000ee) for inline editorial links — Omsom makes no attempt to style these away from the browser default.
- **Link Coral** (`{colors.link-brand}`): Brand-styled links in header and product sections, matching `{colors.primary}`.

### Borders & Shadows
- **Warm Border** (`{colors.border}`): Hairline rules in form inputs and card edges — beige-warm, never cold gray.
- **Warm Shadow** (`{colors.shadow-soft}`): Tinted shadow value aligned to the parchment palette.

## Typography

### Font Family
- **Display / Primary**: Self-hosted custom face (hashed filenames `YAD4imOwJ8U_0`); closest commercial match: **Whyte Inktrap** (Dinamo) — wide, weight 400, with visible ink-trap notches at letter joints. Fallbacks: `Druk Wide, ui-sans-serif, system-ui, sans-serif`.
- **Secondary / Body**: Self-hosted custom face (`YAD4imtLruk_0`, `YAD4iiANq5Q_1`); closest commercial match: **GT America** (Grilli Type) or **Aktiv Grotesk** — clean, neutral grotesque. Fallbacks: `Aktiv Grotesk, ui-sans-serif, system-ui, sans-serif`.
- **Micro / Legal**: Times New Roman — appears at 10px in footer metadata and legal fine print only.
- **OpenType Features**: `"calt" 0, "clig" 0, "liga" 0` — all contextual alternates and ligatures explicitly disabled. The brand wants raw letterforms, not refined calligraphic connections.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headlines — 107px, proud and spacious at line-height 1.4 |
| `display` | Section hero heads — 64px, e.g. product category intros |
| `heading-section` | Uppercase section anchors — 42px, tight line-height 1.0 |
| `heading-sub` | Body-section subheadings — 42px, looser at 1.38 for multi-line passages |
| `body-large` | Lead paragraph text — 24px with tracking 0.024px |
| `body` | Standard reading text — 21px |
| `nav-link` | Header navigation items — 16px |
| `button-ui` | CTA labels — 18px display face on rounded pill/blob buttons |
| `caption` | Product metadata, image captions, badge labels — 14px |
| `label-micro` | Footer legal, fine print — 10px Times New Roman |

### Principles
- **Display type at weight 400**: Omsom does not use bold for impact — it uses size and color. The 107px hero at regular weight is more assured than a 72px bold would be.
- **All ligatures off**: `"calt" 0` forces letterforms apart — no softening, no flow. The type reads as assembled letters, not calligraphy.
- **Two-face system**: Display face for brand voice, grotesque body face for information. Never mix roles — the display face never carries body paragraphs.
- **Upper/lowercase intentional**: Display headlines use title case or all-caps depending on hierarchy level. Body is always sentence case.
- **No mid-size orphans**: The scale jumps from 24px body to 42px headings — there is no 28–36px "in-between" tier. Hierarchy is enforced by contrast, not gradation.

## Layout

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

Omsom's layouts are generous where the brand needs breathing room (hero sections, product pages) and dense where the energy needs to pack in (callout grids, flavor-listing rows). The scale tops out at `{spacing.4xl}` (128px) for full-bleed section transitions — intentional pause between loud color zones.

### Grid & Container
- Max content width: ~1200px for centered content columns
- Breakpoints: 599px / 600px / 899px / 900px / 1199px / 1200px / 1649px / 1650px — an 8-point breakpoint system suggesting a mobile-first responsive architecture
- Hero sections: full-bleed colored panels, display type positioned freely (not grid-locked)
- Product grid: likely 2-column mobile, 3–4 column desktop
- Blob shapes and swirl patterns are decorative layers — positioned absolutely, never part of the content flow

### Whitespace Philosophy
- Generous padding inside coral sections — the hot color needs air or it suffocates
- Tight spacing between product cards — grocery-shelf density, not gallery restraint
- Dark footer section uses padding to give white text room to breathe against `{colors.surface-dark}`

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All primary surfaces — coral panels, white sections, parchment |
| Blob Layer (Level 1) | CSS `z-index` layering, no drop shadow | Decorative swirl/blob shapes sit above section fills |
| Card (Level 2) | Subtle warm drop shadow `{colors.shadow-soft}` 0px 2px 8px | Product cards, info panels |
| Overlay (Level 3) | Soft warm shadow, 16px blur | Modal dialogs, cart drawers |
| Focus Ring | `2px solid {colors.focus-ring}` | Form inputs, interactive buttons |

**Shadow Philosophy**: Omsom is essentially flat. Elevation is communicated through layered organic shapes and color temperature contrast, not through CSS drop shadows. The blob shapes that swirl across dark sections create visual depth through overlap and scale, not shadow. When shadows do appear on cards, they're warm-tinted (matching `{colors.shadow-soft}`) to avoid the cold-gray shadow that would contradict the brand's warmth.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Product photography containers, section panels, hard-edge layout moments |
| `sm` | 4px | Form input fields — the only mid-range radius in the system |
| `blob` | 9999px | All CTAs, speech-bubble callouts, badges, tag chips — fully rounded |
| `full` | 9999px | Circular avatars, icon containers |

Omsom's shape system is nearly binary: panels and sections are completely sharp, and every interactive or callout element is a fully rounded pill or organic blob. The `{rounded.sm}` appears only on input fields — a concession to usability. No "somewhat rounded" cards or "slightly rounded" buttons. The design says: flat panels contain fully rounded objects, and the contrast between those two extremes is part of the visual energy.

## Components

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

### Button variants

- **`button-primary`** — Near-black (`{colors.surface-dark}`) fill, white text, pill radius. The "rest state" CTA is intentionally calm — it pops against coral or white backgrounds without adding to the heat.
- **`button-primary-hover`** — Flips to coral (`{colors.primary}`) on hover, making the interaction feel like the brand is leaning into you.
- **`button-secondary`** — Chartreuse (`{colors.secondary}`) fill, black text, pill radius. Used for high-energy secondary actions and "add to cart" moments.
- **`button-ghost`** — Transparent fill, black border and text, pill radius. Used for tertiary actions where a filled button would overcrowd the composition.

### Cards

- **`card`** — Full coral surface (`{colors.surface}`), white text, no radius. Product feature cards and promotional panels. Sharp edges on coral = deliberate hardness, brand confidence.
- **`card-parchment`** — Warm parchment (`{colors.surface-alt}`) background, black text, no radius. Used for editorial content: recipes, brand story, "about" sections.

### Inputs

- **`input`** — White background, warm border, 4px radius. Minimal, utilitarian. Designed not to compete with the brand's decorative language.
- **`input-focus`** — Adds coral `{colors.focus-ring}` border on focus — the brand's one nod to accessibility-forward interaction design.

### Badges / Tags

- **`badge`** — Chartreuse (`{colors.secondary}`) fill, black text, fully rounded. Used for flavor tags ("Spicy", "NEW", dietary callouts). Reads like a sticker slapped on packaging.
- **`blob-callout`** — Organic pill/blob shape in chartreuse, display-size text. Used for hero callouts: "SAY HI!", "SAUCY NOODLES", social media handle bursts.

### Navigation

- Top nav on white: brand wordmark left or centered, coral-colored logo/links, minimal chrome
- Mobile: hamburger or bottom-sheet drawer
- Sticky behavior: header pins on scroll; announcement strip scrolls away
- Nav links at `{typography.nav-link}` — clean, no uppercase transform, no tracking

## Do's and Don'ts

### Do
- Use `{colors.primary}` coral as a full section surface, not only as an accent — the brand lives in coral
- Apply `{rounded.blob}` to every button and callout element — no mid-range radius anywhere except inputs
- Layer chartreuse `{colors.secondary}` blob shapes on coral or dark backgrounds for brand energy
- Set display headlines in the primary self-hosted face at weight 400 — never bold the display type
- Disable ligatures and contextual alternates explicitly (`font-feature-settings: "calt" 0`) on display text
- Use parchment `{colors.surface-alt}` for any section that needs warmth without coral intensity
- Ground the composition with near-black `{colors.surface-dark}` in footers and dark accent sections
- Keep body copy in the secondary grotesque face at 21–24px — let the display face carry the brand voice
- Match shadow warmth to the palette — use `{colors.shadow-soft}` not a default cold gray

### Don't
- Don't introduce mid-range border-radius (8–48px) on buttons or callouts — the system is binary: `{rounded.none}` on panels, `{rounded.blob}` on interactives
- Don't bold the display type for emphasis — size and color do the work, weight stays at 400
- Don't enable OpenType ligatures on display headlines — the brand wants raw letterforms
- Don't use cold gray for shadows, borders, or muted text — everything warms toward brown, parchment, or coral
- Don't use the body grotesque face for section headings — that is the display face's territory
- Don't introduce a third accent color without strong justification — coral + chartreuse is the complete accent system
- Don't scale the blob/swirl decorations to predictable geometric symmetry — they need to feel organic, irregular, hand-drawn
- Don't place white text on parchment `{colors.surface-alt}` — the warm background needs black ink

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Single column, hero drops to ~60px, blob shapes simplified or hidden |
| Mobile | 600–900px | Single column, 64–80px hero, product cards 2-wide |
| Tablet | 900–1200px | 2–3 column product grid, side-by-side editorial, nav still visible |
| Desktop | 1200–1650px | Full layout, 3–4 column grid, 107px hero, blobs at full scale |
| Wide Desktop | ≥1650px | Container maxes, blobs maintain proportional decorative positioning |

### Touch Targets
- Pill/blob CTAs: minimum 44px tap height with comfortable horizontal padding
- Navigation links: 44px minimum vertical touch zone
- Add-to-cart and checkout buttons: full-width on mobile for maximum tap area

### Collapsing Strategy
- **Header**: Wordmark stays; nav collapses to hamburger drawer on mobile
- **Hero**: 107px display type scales down progressively — line-height 1.4 maintained
- **Product grid**: 4-col → 3-col → 2-col → 1-col
- **Blob decorations**: Absolute-positioned blob shapes likely hidden or scaled at mobile breakpoints to reduce visual noise on small viewports
- **Section alternation**: coral → white → parchment → dark rhythm preserved

### Image Behavior
- Product packaging photography is high-contrast, full-bleed — no soft crop on small screens
- Packaging wordmarks (OMSOM logo on boxes) must remain legible — never scale below readable threshold
- Blob shapes and swirl graphics are CSS/SVG — scale proportionally, never pixelate

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white)
- Primary surface: `{colors.primary}` (hot coral `#fd5225`)
- Alternate surface: `{colors.surface-alt}` (warm parchment `#f7f3da`)
- Dark surface: `{colors.surface-dark}` (near-black `#1a0a00`)
- Text on light: `{colors.ink}` (black)
- Text on dark/coral: `{colors.on-surface}` (white)
- Accent energy: `{colors.secondary}` (chartreuse `#c8e600`)
- CTA: `{colors.primary}` with `{colors.on-primary}` text
- Border: `{colors.border}`
- Focus: `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section with `{colors.primary}` (`#fd5225`) coral background. Center a 107px `{typography.display-hero}` headline in white (`{colors.on-surface}`), line-height 1.4, font-feature-settings 'calt' 0. Below it, 24px `{typography.body-large}` white body text. Add a near-black pill CTA (`{components.button-primary}`) with `{rounded.blob}` radius and 14px 28px padding. Optionally layer an organic blob shape in `{colors.secondary}` chartreuse behind the headline at about 60% opacity."
- "Design a product callout card on `{colors.surface-dark}` near-black background. Place a chartreuse (`{colors.secondary}`) blob/speech-bubble shape (fully rounded, `{rounded.blob}`) containing the text 'SAY HI!' in `{typography.display}` (64px) black (`{colors.on-secondary}`). Beside it, a product packaging photo centered in a white circle. The composition should feel hand-assembled, not grid-locked."
- "Build a flavor badge using `{components.badge}`: chartreuse `{colors.secondary}` background, black `{colors.on-secondary}` text, `{typography.caption}` (14px), `{rounded.blob}` radius, 6px 14px padding. Label examples: 'Spicy', 'Gluten-Free', 'NEW'. Stack 2–3 badges horizontally with 8px gaps."
- "Create a parchment editorial section on `{colors.surface-alt}` (`#f7f3da`). Use `{typography.heading-section}` (42px `{typography.display}` family, line-height 1.0) for the section title in `{colors.ink}` black. Body at `{typography.body}` (21px grotesque) in `{colors.ink}`. Keep the container width ~900px, padding `{spacing.2xl}` (64px) vertically. No shadows, no borders — let the warm background carry the section."
- "Design a navigation bar on white (`{colors.background}`). Left: Omsom wordmark in `{colors.primary}` coral. Right: nav links at `{typography.nav-link}` (16px) in `{colors.ink}` black with coral hover color. Add a cart icon button as a near-black `{components.button-primary}` pill, 14px 28px padding. The nav should feel lightweight and warm — no dark header bar, no separator shadow."
- "Generate a full-width announcement strip above the header. Background: `{colors.primary}` coral. Text: `{typography.caption}` in `{colors.on-surface}` white. Content: rotating messages like 'Free shipping on orders over $50' or 'New flavors — explore the pantry'. Centered text, no pills, no padding except 12px vertical."

### Iteration Guide

1. **Start with `{colors.primary}` coral as your default section background** — let brand sections breathe in coral, reach for white or parchment only for editorial relief
2. **Never bold the display type** — scale up or change color; weight stays 400
3. **Disable font ligatures** on display text: `font-feature-settings: "calt" 0, "clig" 0, "liga" 0`
4. **Every button rounds to `{rounded.blob}`** — treat sharp corners as a signal that something is a panel or a photo, not an interactive element
5. **Chartreuse `{colors.secondary}` is the exclamation mark** — use it for burst callouts and badges, not as a background surface
6. **Organic blob shapes add energy** — they should be irregular, never perfectly circular or perfectly oval; CSS border-radius with asymmetric values (e.g. `70% 30% 30% 70% / 60% 40% 60% 40%`) achieves the hand-drawn effect
7. **Warm everything** — avoid cold grays for borders, shadows, or muted text; route all neutrals through the parchment and brown tones

---

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