---
version: alpha
name: "Diaspora Co."
description: "Token-first design system reference for Diaspora Co., a single-origin spice brand whose identity weaves Diaspora Pink, turmeric gold, and warm parchment into a joyful, culturally-rooted spice-shop aesthetic."

colors:
  # Surface / canvas
  background: "#fffceb"       # warm parchment — the spice-paper canvas
  surface: "#ffffff"
  surface-cream: "#fffdf3"    # alternate cream tint for cards
  surface-sage: "#e4e9cd"     # sage green surface for accent panels

  # Text / ink
  ink: "#222222"
  ink-muted: "#3a3a3a"        # slightly softer dark for secondary text
  ink-navy: "#080a5c"         # deep indigo used for section headings and editorial type
  on-background: "#222222"
  on-surface: "#222222"

  # Brand accent — Diaspora Pink
  primary: "#d5137b"          # the brand hot pink; CTAs, swiper, badges, accents
  on-primary: "#ffffff"
  primary-container: "#fce8f3" # light pink tint for soft badge backgrounds — was rgba(213,19,123,0.1), approx #fce8f3 /* estimated */

  # Secondary accents — spice palette
  turmeric: "#ffcf01"         # turmeric gold; promotional banners, callout highlights
  chili: "#f58a23"            # chili orange; product accents, warm highlights
  green: "#326539"            # spice garden green; certifications, freshness indicators
  orange-deep: "#e3341e"      # deep chili red; hero CTA variant /* estimated */

  # State / interaction
  text-hover: "#000000"
  focus-ring: "#d5137b"
  border: "#b1ad98"           # warm parchment-gray border

  # Semantic
  success: "#0b8233"
  warning: "#ffcf01"
  error: "#b40000"

  # Shadow
  shadow-soft: "#d6d6d6"      # was #00000029 (alpha) — flattened rgba(0,0,0,0.161) over white background

typography:
  display-hero:
    fontFamily: "p22-mackinac-pro, 'P22 Mackinac Pro', Georgia, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: -0.5px
  display:
    fontFamily: "p22-mackinac-pro, 'P22 Mackinac Pro', Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "p22-mackinac-pro, 'P22 Mackinac Pro', Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.48px
  heading-sub:
    fontFamily: "p22-mackinac-pro, 'P22 Mackinac Pro', Georgia, 'Times New Roman', serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.625
    letterSpacing: 0px
  body:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.14px
  button-ui:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.16px
  label-uppercase:
    fontFamily: "Fustat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.6px

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

rounded:
  none: 0px
  sm: 5px
  md: 10px
  lg: 14px
  xl: 36px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 16px 28px
    height: 55px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 16px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 16px 28px
    border: 1px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 16px 28px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: 1px solid {colors.border}
  card-sage:
    backgroundColor: "{colors.surface-sage}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: 1px solid {colors.border}
    height: 48px
  input-focus:
    backgroundColor: "{colors.surface-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-turmeric:
    backgroundColor: "{colors.turmeric}"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-green:
    backgroundColor: "{colors.green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Diaspora Co. Design System

## Overview

Diaspora Co. is a single-origin spice brand with a design identity built from the colors of its pantry. The site opens on warm parchment (`{colors.background}`) — the color of aged recipe paper and turmeric dust — then interrupts that quietness with sharp blasts of Diaspora Pink (`{colors.primary}`): a hot, saturated magenta that reads at once as decorative flower, printed label, and South Asian textile dye. Where most food brands choose either earthy restraint or pop-art boldness, Diaspora Co. holds both at once. The spice palette extends to turmeric gold (`{colors.turmeric}`), chili orange (`{colors.chili}`), and garden green (`{colors.green}`) — every color in the system could plausibly be a spice or herb from the markets the brand sources from.

The typography pairing is the second load-bearing design decision. `p22-mackinac-pro`, a warm transitional serif with bracketed serifs and slightly old-style proportions, carries all display headings — its quiet bookishness providing a scholarly counterpoint to the intensity of Diaspora Pink. Body copy renders in `Fustat`, a variable sans-serif from Google Fonts with a slightly geometric, friendly quality. This combination keeps the site legible and culturally grounded without defaulting to the minimalist grotesque stack that most DTC food brands reach for. The deep indigo `{colors.ink-navy}` in large editorial headings signals seriousness of purpose — this is a company doing equitable sourcing, not just selling pretty jars.

The layout is generous and slightly artisanal — section padding runs wide (40px desktop gutters, 120px vertical sections), product cards breathe with 24px internal padding, and the navigation at 90px height communicates confidence rather than efficiency. Badges like "BESTSELLER" and "NEW!" appear in Diaspora Pink or turmeric gold with rounded pill shapes. The system never uses sharp 0px corners anywhere interactive — the house radius is a consistently soft `{rounded.md}` (10px) for buttons and a slightly looser `{rounded.lg}` (14px) for cards, with the occasional full `{rounded.pill}` for badges and chips.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) as the default background — never cold white
- Diaspora Pink (`{colors.primary}`) as the singular brand accent: used exclusively for CTAs, focus rings, swiper pagination, and badges
- p22-mackinac-pro serif for all display and section headings — warm, authoritative, distinctive
- Fustat variable sans for all body, UI, and nav — approachable and legible at small sizes
- Deep navy (`{colors.ink-navy}`) as an editorial ink color for large headings, distinct from body text dark (`{colors.ink}`)
- Spice-palette accents: turmeric `{colors.turmeric}`, chili `{colors.chili}`, green `{colors.green}` support the brand's sourcing story
- Consistent 10px button radius (`{rounded.md}`) and 55px button height — confident, never pill-shaped
- 40px desktop container padding, 120px section padding — the proportions of a premium cookbook
- Sage surface (`{colors.surface-sage}`) for accent panels, carrying the herbal garden within the UI
- "BESTSELLER" and "NEW!" pill badges in Diaspora Pink as social-proof stamps across the catalog

## Colors

### Primary
- **Diaspora Parchment** (`{colors.background}`): The default page canvas — a pale warm cream derived from rice paper and natural dyes. Sets the artisanal, handcrafted tone before any content loads.
- **Ink Dark** (`{colors.ink}`): Primary body text. A near-black charcoal rather than pure black — softened just enough for the warm background without reducing contrast.
- **Ink Navy** (`{colors.ink-navy}`): Deep indigo reserved for large editorial headings and prominent section text. Communicates the brand's mission-driven, sourcing-focused voice.

### Brand Accent
- **Diaspora Pink** (`{colors.primary}`): The hot-pink brand signature. Applied to primary CTAs, swiper pagination dots, badge backgrounds, focus rings, and interactive icons. Never diluted to pastel.

### Spice Palette
- **Turmeric Gold** (`{colors.turmeric}`): Named for the most iconic spice in the catalog. Used in promotional banner text, sale callout chips, and selected badges. Saturated and warm.
- **Chili Orange** (`{colors.chili}`): The warmth of dried chili. Appears in product illustration accents, hero callouts, and warm section highlights.
- **Spice Green** (`{colors.green}`): Garden-fresh deep green for "in stock," freshness indicators, certifications, and the brand's equity messaging. Never sage, always saturated.
- **Deep Chili Red** (`{colors.orange-deep}`): A vivid hero CTA variant for specific landing pages. Reserved — not in the everyday site palette.

### Surfaces
- **Surface White** (`{colors.surface}`): Product card backgrounds and clean UI containers. Used only where maximum contrast is needed against parchment.
- **Surface Cream** (`{colors.surface-cream}`): A tinted card-level parchment, slightly cooler than the page background.
- **Surface Sage** (`{colors.surface-sage}`): The herbal accent panel color — a soft gray-green used in recipe-adjacent moments and category section panels.
- **Soft Pink Container** (`{colors.primary-container}`): Barely-pink badge and tag tint backgrounds. Was `rgba(213,19,123,0.10)` on white — approximated to opaque for token use.

### Borders & Shadows
- **Parchment Border** (`{colors.border}`): A warm stone-gray used on input fields, card outlines, and any visible hairline separating parchment from white content zones.
- **Shadow Soft** (`{colors.shadow-soft}`): Approximated from `rgba(0,0,0,0.16)` — very light depth hint for card hover states.

## Typography

### Font Family
- **Display/Headings**: `p22-mackinac-pro` — an Adobe Typekit transitional serif with warmth and editorial authority. Weight range 400–800 available. No web fallback is quite equivalent; `Georgia` is the graceful fallback.
- **Body/UI/Nav**: `Fustat` — a variable Google Font sans-serif. Supports weight 200–800. Geometric but approachable, legible at 12px caption sizes.
- Note: `Caslon Graphique` appears in the CSS stack as a potential display variant but is not used in primary heading contexts.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero section headings, 72px p22-mackinac-pro — "The Cookbook" campaign moments |
| `display` | Section openers, 48px serif — major landing page headings |
| `heading-section` | H2-level section titles, 36px — "SHOP", "DISCOVER", product category heads |
| `heading-sub` | H3-level sub-heads, 28px — card titles and editorial sub-section anchors |
| `body-large` | Lead paragraphs and intro copy, 18px Fustat — product story text |
| `body` | Standard reading text, 15px Fustat — descriptions, reviews, nav |
| `nav-link` | Header navigation labels, 14px Fustat medium |
| `button-ui` | CTA labels, 15px Fustat semibold with 0.5px letter-spacing |
| `caption` | Metadata, prices, fine print, 12px Fustat |
| `label-uppercase` | Category chips, product badges, UPPERCASE 11px Fustat 700, 1.6px tracking |

### Principles
- **Serif for authority, sans for access**: p22-mackinac-pro communicates the brand's commitment to sourcing and craft; Fustat makes everything usable. The two faces never blur into each other's roles.
- **Navy ink for editorial weight**: Large headings often appear in `{colors.ink-navy}` rather than standard dark — a signal that the copy is speaking as curator, not just interface label.
- **Uppercase for category stamps**: `{typography.label-uppercase}` with 1.6px tracking is the badge and chip voice. It reads as a certification mark rather than a decorative style.
- **Fustat at 600 weight for buttons**: Medium contrast between button labels and body text — clearly interactive without shouting.
- **Heading letter-spacing is positive**: Unlike most brands that track headings tightly, Diaspora Co. uses slight positive tracking (0.48px) on section headings — open, inviting, generous.

## Layout

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

Layout breathes generously. Section padding tops at 120px vertical and 40px horizontal — similar proportions to a cookbook interior. The system doesn't compress aggressively on tablet; content reflows before spacing dramatically shrinks.

### Grid & Container
- Max content width: ~1600px (hero), ~1280px (standard sections)
- Desktop container padding: 40px horizontal
- Nav height: 90px desktop, 60px mobile
- Product grid: 2-column mobile, 3-column tablet, 4-column desktop
- Section vertical spacing: 48–120px between major chapters

### Whitespace Philosophy
- **Cookbook-interior pacing**: Long vertical sections with generous air above and below. Each section reads as a chapter page, not a packed catalog view.
- **Cards breathe**: 24px internal padding on product cards. Images are given full aspect ratio space before title appears below.
- **Banner announcements at 40–51px height**: The top announcement bar is proportionally tall for a DTC site — emphasis on the words, not efficiency.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, color surface only | Page canvas, section panels, nav |
| Hairline (Level 1) | `1px solid {colors.border}` | Input fields, card outlines |
| Card Lift (Level 2) | Subtle `rgba(0,0,0,0.10)` drop shadow | Product card hover states |
| Modal (Level 3) | `rgba(0,0,0,0.3)` backdrop + white container | Cart drawer, cookie notice |
| Focus Ring | `2px solid {colors.primary}` outline | All interactive focus states, `{colors.primary}` pink |

**Shadow Philosophy**: Diaspora Co. is largely flat. The brand's depth comes from the warm-parchment-to-white surface transitions and the high-saturation Diaspora Pink drawing the eye to interactive elements. When shadows appear (card hover, dropdown), they are tight and quiet — never atmospheric. The brand's "lift" is achieved through color, not CSS elevation.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Not typically used — the brand avoids hard corners |
| `sm` | 5px | Input fields, small UI elements |
| `md` | 10px | Buttons (the primary interactive radius) |
| `lg` | 14px | Cards and content containers |
| `xl` | 36px | Large decorative circles, avatar frames |
| `pill` | 9999px | Badges, tags, "BESTSELLER" chips, announcement pills |

The system is soft but not circular. `{rounded.md}` at 10px covers almost every interactive element. `{rounded.pill}` is reserved for badge and chip labels — the system is binary between those two extremes. Sharp 0px corners don't appear.

## Components

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

### Button variants

- **`button-primary`** — Diaspora Pink fill (`{colors.primary}`), white label, 10px radius, 55px height. The definitive CTA: "ADD TO CART", "SHOP NOW", "GET THE BUNDLE". Hover: ink-black fill.
- **`button-secondary`** — Parchment background, ink text, `{colors.border}` outline. For secondary actions, filter resets, "Learn More". Hover: inverts to ink-black fill.

### Cards

Product cards use `{colors.surface}` on `{colors.background}` with `{rounded.lg}` corners and 24px padding. The product image sits at a 1:1 aspect ratio above the metadata zone. "BESTSELLER" and "NEW!" badges float as `{rounded.pill}` stamps in Diaspora Pink or turmeric.

### Inputs

`{rounded.sm}` 5px, 48px height, `{colors.border}` outline, parchment background. Focus state shifts border to `{colors.primary}` pink with no shadow ring. Placeholder text uses ink at reduced opacity.

### Badges / Tags

Pill-shaped (`{rounded.pill}`), 11px label uppercase at 1.6px tracking. Diaspora Pink for "BESTSELLER" and "NEW!", turmeric gold for sale callouts, sage green for stock/freshness indicators.

### Navigation

90px desktop header on parchment background. Logo centered (or left-aligned). Nav links in 14px Fustat medium at `{colors.ink}`. Announcement bar sits above nav at 40–51px height in Diaspora Pink background with white or turmeric text.

## Do's and Don'ts

### Do
- Use `{colors.background}` (parchment `#fffceb`) as the default page canvas — never pure white as the primary background
- Reserve `{colors.primary}` (Diaspora Pink) exclusively for CTAs, focus rings, swiper, and badges — it earns its impact through restraint
- Set all display headings in `{typography.display-hero}` or `{typography.heading-section}` (p22-mackinac-pro) — the serif is the brand's editorial authority
- Use `{colors.ink-navy}` for large editorial headings that need gravitas beyond standard body ink
- Apply `{rounded.md}` (10px) to every button — the system does not use pills for CTAs
- Use `{colors.turmeric}` for sale and urgency callouts — it reads "spice" and "warmth" simultaneously
- Apply `{typography.label-uppercase}` with 1.6px tracking for badge and chip text — it reads as a certification stamp
- Pair Fustat for all UI chrome (nav, buttons, captions) with p22-mackinac-pro for headings — maintain the two-face contract

### Don't
- Don't use pure `#ffffff` as the primary page background — always the warm parchment `{colors.background}`
- Don't use `{colors.primary}` (Diaspora Pink) for body text, borders, or decorative fills — it is only for interactive and notification states
- Don't introduce a mid-range radius (16–32px) — buttons are `{rounded.md}` 10px; badges are `{rounded.pill}`; cards are `{rounded.lg}` 14px. No in-betweens.
- Don't use a sans-serif for display headings — p22-mackinac-pro is the display brand voice
- Don't set headings in raw black (`#000000`) — use `{colors.ink}` or `{colors.ink-navy}` as appropriate
- Don't use atmospheric multi-layer drop shadows — the system is flat with only quiet card-hover depth
- Don't set button labels in all-caps — `{typography.button-ui}` is mixed case, uppercase is only for `{typography.label-uppercase}` badge stamps
- Don't introduce additional accent hues beyond the spice palette — no brand extensions to purple, teal, or coral
- Don't use `{colors.turmeric}` as a background for extended text areas — too warm for reading comfort
- Don't use the sage surface (`{colors.surface-sage}`) for interactive elements — it is a passive content surface only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <375px | Single column, display reduces to 34px, nav collapses, container padding 20px |
| Mobile Standard | 375–500px | Single column layout, announcement bar stacks at 51px |
| Tablet | 500–768px | 2-column product grid, heading scales to 48px, container 20px |
| Desktop | 768–1280px | 3–4 column grid, full nav, 90px header, container 40px |
| Large Desktop | ≥1280px | Max container ~1600px hero, 4-column grid, 120px section padding |

### Touch Targets
- Primary CTA buttons: 55px height minimum — comfortable for thumb taps
- Nav links: full-row touch zones at 60px mobile nav height
- Product cards: full surface is tappable; "ADD TO CART" appears as a CTA overlay on hover/focus
- Badge chips: minimum 28px tap height on mobile

### Collapsing Strategy
- **Nav**: Collapses to hamburger icon at mobile breakpoint; full horizontal menu from tablet up
- **Hero headings**: `clamp(34px, 4.3vw, 72px)` scaling — maintains character without overflow
- **Product grid**: 4-col → 3-col → 2-col → 1-col cascade by breakpoint
- **Section padding**: 120px desktop → 80px tablet → 48px mobile — pacing maintained but compressed
- **Announcement banner**: Adjusts height from 40px desktop to 51px mobile (taller for readability at smaller size)

### Image Behavior
- Product photography at 1:1 aspect ratio within cards at all breakpoints
- Hero images are full-bleed with text overlaid; overlay opacity 0.10 (very light)
- Logo SVG scales proportionally: 140px at <375px, 170px at 375–480px, full size above

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#fffceb parchment)
- Primary text: `{colors.ink}` (#222222)
- Editorial headings: `{colors.ink-navy}` (#080a5c)
- Brand accent / CTA: `{colors.primary}` (#d5137b Diaspora Pink)
- Turmeric callout: `{colors.turmeric}` (#ffcf01)
- Chili accent: `{colors.chili}` (#f58a23)
- Spice green: `{colors.green}` (#326539)
- Sage surface: `{colors.surface-sage}` (#e4e9cd)
- Border: `{colors.border}` (#b1ad98)

### Example Component Prompts

- "Create a hero section on parchment `{colors.background}` with a 72px p22-mackinac-pro heading in `{colors.ink-navy}` at line-height 1.18. Add a subheading in 18px Fustat `{colors.ink}` line-height 1.625. Primary CTA button: `{colors.primary}` fill, white label, `{rounded.md}` radius, 55px height, 28px horizontal padding. Button label in 15px Fustat semibold."
- "Design a product card on `{colors.surface}` white with `{rounded.lg}` 14px corners and 1px `{colors.border}` outline. 1:1 product image top. Below: product name in p22-mackinac-pro 20px `{colors.ink}` at 1.25 line-height. Price in 15px Fustat `{colors.ink}`. A 'BESTSELLER' badge in `{colors.primary}` fill, white text, `{rounded.pill}` 11px Fustat uppercase 1.6px tracking."
- "Build an announcement bar full-bleed in `{colors.primary}` background, 51px mobile height. White Fustat 13px semibold text centered: 'FREE SHIPPING ON ORDERS OVER $75'. On desktop 40px height."
- "Create a category chip filter button: `{colors.surface-sage}` background, `{colors.ink}` text, `{rounded.pill}` shape, `{typography.label-uppercase}` (11px Fustat 700 uppercase 1.6px tracking), 6px 12px padding. Active state: `{colors.primary}` background, white text."
- "Design a spice story editorial section on `{colors.background}`. Eyebrow in `{typography.label-uppercase}` `{colors.primary}` uppercase. Heading in p22-mackinac-pro 36px `{colors.ink-navy}` line-height 1.25 letter-spacing 0.48px. Body in Fustat 15px `{colors.ink}` line-height 1.5. Accent rule: 2px `{colors.primary}` horizontal line 40px wide, centered."

### Iteration Guide

1. Start with parchment `{colors.background}` — never white. The warmth sets the spice-pantry tone before any content.
2. Reserve `{colors.primary}` (Diaspora Pink) for interactive elements only — its impact comes from being the only saturated pink on a warm neutral canvas.
3. Use p22-mackinac-pro at `{typography.display-hero}` or `{typography.heading-section}` for headings; Fustat for everything else — the serif-to-sans contrast is the brand voice.
4. Buttons are always `{rounded.md}` 10px, 55px tall, Fustat semibold — no pill shapes, no icon-only, no all-caps labels.
5. Bring in spice accents (`{colors.turmeric}`, `{colors.chili}`, `{colors.green}`) as tertiary moments — promotional badges, freshness indicators, sourcing callouts. Never as primary surface colors.
6. The deep navy `{colors.ink-navy}` is your editorial ink for big headings — use it when the text needs curatorial authority beyond standard dark.
7. Badge text in `{typography.label-uppercase}` with 1.6px tracking reads as a certification stamp — reserve it for "NEW!", "BESTSELLER", category chips, and stock labels.

---

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