---
version: alpha
name: SigmaOS
description: Warm peach canvas, a pink-to-orange gradient CTA stamp, the custom Jokker display face bringing rounded friendliness, and pastel feature cards that feel like illustrated stickers — a browser for people who find Chrome overwhelming and want the web to feel approachable.

colors:
  # Surface / canvas
  background: "#fffcfa"           # the dominant warm cream-peach page fill
  surface: "#fff4ef"              # peach-tinted section bands and feature card fills
  surface-violet: "#f3eeff"       # violet-washed card surface for alternate features
  surface-muted: "#f5f5f5"        # neutral input and code block fill

  # Ink / text
  ink: "#23262b"                  # was rgba(35,38,43,0.95) — near-black body and heading text
  ink-secondary: "#494c50"        # was rgba(73,76,80,0.9) — secondary copy, nav links
  ink-muted: "#666666"            # captions, metadata, fine print
  on-primary: "#ffffff"           # text on dark/near-black filled buttons

  # Brand — the signature pink-to-orange gradient
  primary: "#ff537a"              # gradient start (hot pink) — CTAs, highlights
  primary-end: "#ffa65a"          # gradient end (warm orange) — forms the CTA sweep
  accent-violet: "#9c7aff"        # secondary accent — violet pill features and links
  accent-blue: "#0098e9"          # tertiary — occasional info accent

  # Interactive states
  primary-hover: "#d94768"        # darker pink for CTA hover
  accent-violet-hover: "#8568d9"  # deeper violet on hover
  link-hover: "#ffa65a"           # nav link hover shifts to warm orange

  # Borders
  border: "#f0e4dc"               # warm peach-tinted hairlines around feature cards
  border-violet: "#e4d8ff"        # violet-tinted card borders
  border-standard: "#e5e5e5"      # neutral structural dividers

  # Shadow / depth tints
  shadow-soft: "#000000"          # was rgba(0,0,0,0.05) — Google format requires hex; multi-layered elevation
  shadow-warm: "#ffa65a"          # was rgba(255,166,90,0.63) — orange-tinted shadow on warm elements

typography:
  display-hero:
    fontFamily: "Jokker Bold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 82px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -1px
  display:
    fontFamily: "Jokker Bold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 54px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading:
    fontFamily: "Jokker Bold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "Jokker Semibold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  card-title:
    fontFamily: "Jokker Semibold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, -apple-system, system-ui, Segoe UI, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.5px
  body:
    fontFamily: "Inter, -apple-system, system-ui, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "Jokker Semibold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  label:
    fontFamily: "Jokker Bold, Jokker, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.28px
  caption:
    fontFamily: "Inter, -apple-system, system-ui, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.1px

spacing:
  xs: 8px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 40px
  2xl: 60px
  3xl: 100px

rounded:
  sm: 5px
  md: 8px
  lg: 10px
  xl: 16px
  2xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    backgroundGradient: "linear-gradient(270deg, {colors.primary} 0%, {colors.primary-end} 100%)"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    transform: scale(1.08)
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-ghost-hover:
    textColor: "{colors.link-hover}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: 30px
  card-violet:
    backgroundColor: "{colors.surface-violet}"
    borderColor: "{colors.border-violet}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: 30px
  card-hover:
    boxShadow: "0px 0.796px 2.39px -0.625px {colors.shadow-soft}, 0px 2.41px 7.24px -1.25px {colors.shadow-soft}, 0px 6.38px 19.15px -1.875px {colors.shadow-soft}, 0px 20px 60px -2.5px {colors.shadow-soft}"
  input:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 12px 20px
    borderColor: "{colors.border-standard}"
    borderWidth: 1px
  input-focus:
    borderColor: "{colors.primary}"
    boxShadow: "0 0 0 3px {colors.border}"
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
  nav-link-hover:
    textColor: "{colors.link-hover}"
  badge:
    backgroundColor: "{colors.surface-violet}"
    textColor: "{colors.accent-violet}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# SigmaOS Design System

## Overview

SigmaOS opens on a warm cream-peach canvas (`{colors.background}`) that immediately reads as friendlier than the cold white of most browsers. The page doesn't feel like software — it feels closer to an illustrated product page, with feature cards rendered as peach- and violet-tinted sticker panels, emoji dropped into headings as first-class typographic elements, and a single bold gradient CTA that sweeps from `{colors.primary}` hot pink to `{colors.primary-end}` warm orange. The warmth is deliberate: SigmaOS is selling approachability in a category (browsers) that tends toward chrome-grey utility.

The display typography is all Jokker — a rounded geometric grotesque with a hand-crafted quality that sits somewhere between a contemporary sans and a condensed display face. At 82px with tight `−1px` tracking, it commands the hero without ever feeling aggressive. Inter steps in for body copy and UI micro-text, providing the neutral legibility counterweight that Jokker can't sustain at small sizes. The pairing creates a clear two-register hierarchy: Jokker performs, Inter serves.

Depth is atmospheric rather than structural. Cards float with a multi-stop layered shadow (`{colors.shadow-soft}`) that produces a natural lift without hard edges. Orange-tinted shadows (`{colors.shadow-warm}`) appear on warm-accented elements, giving them a slight glow. The design avoids hard borders in favor of tinted fills — peach for primary feature areas, violet for alternate ones — creating a zoned color system that differentiates content without introducing new typography or iconography.

**Key Characteristics:**
- Warm cream-peach canvas (`{colors.background}`) as the dominant page fill — explicitly warmer than white, softer than kraft
- Hot pink–to–warm orange gradient (`{colors.primary}` → `{colors.primary-end}`) as the one brand stamp, reserved for the primary CTA and logo mark
- Jokker Bold (`{typography.display-hero}`) for all display text — rounded terminals give the product a friendly, accessible personality
- Inter (`{typography.body}`) for body copy — neutral legibility at reading scale, no competition with Jokker at hero scale
- Feature cards use tinted fills — peach (`{colors.surface}`) and violet (`{colors.surface-violet}`) — as a zoning device, not just decoration
- Multi-stop layered shadow on cards (`{colors.shadow-soft}`) produces natural lift without hard drop shadows
- Radius lives mostly at `{rounded.xl}` (16px) — rounded enough to feel friendly, not so circular it reads juvenile
- Pill buttons with scale transforms on hover (`1.08×`) — interaction feedback is physical, not just coloristic
- Violet (`{colors.accent-violet}`) as the secondary accent — balances the warm primary gradient with a cooler, dreamier counterpoint
- Emoji used as first-class design elements in feature headings — part of the voice, not decoration
- Sparse border usage — tinted fills carry structure, hairlines (`{colors.border}`) used only at card edges
- Broad whitespace sections (`{spacing.3xl}` vertical rhythm) give the design breathing room despite the colorful palette

## Colors

### Primary
- **Warm Cream** (`{colors.background}`): The dominant page canvas. A barely-there peach warmth that reads almost white in ambient light but registers warmer than pure white — the foundation of SigmaOS's "friendly browser" positioning.
- **Near-Black** (`{colors.ink}`): Primary heading and body text. Was `rgba(35,38,43,0.95)` — rendered opaque over the warm canvas, giving slightly warmer contrast than pure black.
- **Charcoal Secondary** (`{colors.ink-secondary}`): Navigation links, secondary body text, and supporting copy. Was `rgba(73,76,80,0.9)` — a warm-neutral mid-tone.

### Brand Accent
- **Hot Pink** (`{colors.primary}`): The CTA start stop and logo accent. Used exclusively for the primary button gradient and the brand mark — high-salience, never diluted into UI chrome.
- **Warm Orange** (`{colors.primary-end}`): The gradient end stop. Pairs with `{colors.primary}` to create the signature brand sweep across CTAs and key highlights.
- **Violet** (`{colors.accent-violet}`): The secondary personality accent — card titles for alternate feature panels, link highlights, and badge fills. Balances the warm gradient with a cooler counterpart.

### Text States
- **Link Hover** (`{colors.link-hover}`): Navigation links shift to warm orange on hover — a semantic callback to the brand gradient.
- **Captions** (`{colors.ink-muted}`): Metadata, fine print, and pricing support text at reduced salience.

### Surface & Borders
- **Peach Surface** (`{colors.surface}`): Feature card fills in the primary zone — a desaturated tint of the brand orange, producing a warm sticker-like card.
- **Violet Surface** (`{colors.surface-violet}`): Feature card fills in the secondary zone — complements the warm cards without competing.
- **Peach Border** (`{colors.border}`): Card edge hairlines on peach-surface cards — nearly invisible, more structural signal than visible divider.
- **Violet Border** (`{colors.border-violet}`): Card edge hairlines on violet-surface cards.
- **Shadow Soft** (`{colors.shadow-soft}`): Used in multi-stop layered box shadows — pure black at low opacity, converted to opaque for token compliance.
- **Shadow Warm** (`{colors.shadow-warm}`): Orange-tinted shadow applied to warm elements like the orange accent card — adds a subtle inner glow effect.

## Typography

### Font Family
- **Primary Display**: `Jokker Bold` and `Jokker Semibold` — a custom self-hosted rounded geometric grotesque. Used for all hero, heading, card title, and button text. No Google Fonts equivalent; closest match is Nunito or Outfit for rendering fallback.
- **Body / UI**: `Inter`, with fallbacks: `-apple-system, system-ui, Segoe UI, sans-serif`

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero headline — 82px Jokker Bold, the primary page statement |
| `display` | Section headers — 54px Jokker Bold for major feature intros |
| `heading` | Subsection headlines — 42px Jokker Bold for feature titles and benefit groups |
| `heading-sub` | Card subheadings and callouts — 24px Jokker Semibold |
| `card-title` | Individual feature card titles — 20px Jokker Semibold, often in an accent color |
| `body-large` | Lead-in paragraphs and emphasized UI text — 18px Inter Semibold |
| `body` | Standard prose and UI copy — 16px Inter Regular |
| `button-ui` | CTA and action button labels — 16px Jokker Semibold |
| `label` | Eyebrow labels and uppercase callouts — 16px Jokker Bold at +1.28px tracking |
| `caption` | Metadata, pricing fine print, helper text — 14px Inter Regular |

### Principles
- Jokker owns display and interaction; Inter owns reading. Never mix them at the same size in the same role.
- Jokker at large sizes carries negative tracking (`−1px` at hero scale); at body scale it's set at `0` or slightly positive to maintain legibility.
- Card titles often inherit the card's accent color (`{colors.primary}` or `{colors.accent-violet}`) rather than the standard `{colors.ink}` — type color is a zoning signal, not just decoration.
- No typeface is used at weights above Bold — the personality comes from letterform, not weight escalation.
- Inter carries the neutral utility load: form labels, pricing, feature descriptions — all at regular or medium weight, never competing with Jokker.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with 10px as a secondary increment for tighter UI contexts).

The layout is generously spaced — `{spacing.3xl}` (100px) vertical sections give the colorful palette room to breathe. The dense visual energy of multi-accent cards is balanced by broad whitespace above and below each section.

### Grid & Container
- Max content width: approximately 1100–1200px centered
- Single-column hero with left-justified headline; feature sections switch to 2-column card grids
- Breakpoints at 809px (mobile), 810px (tablet threshold), 1199px (capped desktop)

### Whitespace Philosophy
- Section vertical padding is deliberately generous — the pastel cards need air around them to read as individual elements rather than a dense mosaic.
- Horizontal padding within cards is 30px — enough room to breathe, not so much that the emoji icons and headings feel disconnected from surrounding text.
- Card-to-card gap: 20px — tight enough to group related features, distinct enough to separate them.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, nav bar background |
| Subtle (Level 1) | `0px 0.8px 2.4px -0.625px shadow-soft` | Ambient lift on resting feature cards |
| Card (Level 2) | `0px 2.4px 7.2px -1.25px, 0px 6.4px 19px -1.875px` (multi-stop) | Primary feature card elevation |
| Elevated (Level 3) | `0px 20px 60px -2.5px shadow-soft` | Deepest stop of the layered card shadow |
| Warm Glow | `0px 0.36px 0.65px, 0px 1.37px 2.47px, 0px 6px 10.8px (orange-tinted)` | Orange accent cards — warm ambient glow |
| Focus Ring | `0 0 0 3px {colors.border}` | Form inputs on focus — warm peach ring |

**Shadow Philosophy**: SigmaOS uses a four-stop graduated shadow (`{colors.shadow-soft}`) rather than a single flat drop shadow — the technique produces a natural "paper lifted from table" effect, with light falloff across 60px of depth. Orange-tinted shadows on warm feature cards (`{colors.shadow-warm}`) turn the elevation itself into a brand signal: even the shadows are part of the color system.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `sm` | 5px | Small image crops, thumbnail corners |
| `md` | 8px | Secondary UI elements, input fields in compact contexts |
| `lg` | 10px | Images within cards, icon container fills |
| `xl` | 16px | Feature cards, primary input fields — the dominant radius |
| `2xl` | 20px | Larger modal-like cards and hero image containers |
| `pill` | 9999px | All primary CTA buttons, badge chips |

The radius system favors two registers: `{rounded.xl}` for all content containers (cards, inputs), and `{rounded.pill}` for all action elements (buttons, badges). There is no hard-edge element in the interface — even the smallest images use `{rounded.sm}`. The pervasive rounding reinforces the product's friendly personality without overplaying it.

## 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`** — Pill-shaped CTA with the signature pink-to-orange gradient (`{colors.primary}` → `{colors.primary-end}`). Used for "Download Free" and primary conversion CTAs. Scale-transforms to 1.08× on hover rather than a simple color shift.
- **`button-ghost`** — Transparent nav action; text shifts to `{colors.link-hover}` warm orange on hover. Used for secondary nav links like "Community".

### Cards
- **`card`** (peach) — The primary feature card. Warm peach fill (`{colors.surface}`), peach-tinted hairline border (`{colors.border}`), 16px radius. Multi-stop layered shadow on hover.
- **`card-violet`** — Alternate feature card. Violet fill (`{colors.surface-violet}`), violet border (`{colors.border-violet}`). Same radius and shadow as the peach variant.

### Inputs
Default state: neutral fill (`{colors.surface-muted}`), warm-tinted hairline border. Focus state adds a warm peach focus ring derived from `{colors.border}` — the focus signal is warm, not the electric blue typical of most systems.

### Badges / Tags
Pill-shaped chips in violet fill (`{colors.surface-violet}`) with `{colors.accent-violet}` text. Used for feature callouts, pricing plan labels, and inline content markers. The pill radius matches the CTA button — visual consistency between action and annotation elements.

### Navigation
Single-level flat nav: logo mark left, "Community" text link + "Download Free" gradient pill CTA right. Nav background inherits the warm canvas (`{colors.background}`) — no distinct nav surface. Navigation remains fixed and minimal; no mega-menus or dropdowns visible on the marketing page.

## Do's and Don'ts

### Do
- Use `{colors.primary}` → `{colors.primary-end}` gradient only for primary CTA buttons and the brand mark — its rarity is its power
- Set all display headlines in Jokker Bold (`{typography.display-hero}`, `{typography.display}`) and all body/UI text in Inter (`{typography.body}`)
- Apply `{rounded.pill}` to every button and badge — pill shapes are non-negotiable in this system
- Use `{rounded.xl}` (16px) for cards and inputs — the two-radius system (xl for containers, pill for actions) must stay binary
- Give feature cards a tinted fill (`{colors.surface}` or `{colors.surface-violet}`) instead of a hard outline — the color zone carries more brand signal than a border alone
- Use emoji in feature headings as they are used on the site — they are part of the brand voice, not informal decoration
- Keep vertical section padding at `{spacing.2xl}` or `{spacing.3xl}` minimum — the dense color system needs whitespace to breathe
- Reference `{colors.accent-violet}` for card titles and links in the secondary (violet) zone, and `{colors.primary}` for those in the primary (peach) zone
- Apply the multi-stop layered shadow on elevated cards to produce the branded paper-lift effect

### Don't
- Don't use the pink-orange gradient on secondary actions, badges, or decorative elements — reserve it as the single CTA stamp
- Don't set body text in Jokker at sizes below 18px — it loses legibility; Inter handles small-scale reading
- Don't introduce flat-edge (0px radius) containers — the system has no hard-corner elements
- Don't use mid-range radii like 4px or 12px — the system is intentionally binary: `{rounded.xl}` for containers, `{rounded.pill}` for actions
- Don't replace the warm canvas (`{colors.background}`) with pure white — the warmth is foundational to the friendly-browser positioning
- Don't add blue focus rings — focus indicators must use the warm peach ring (`{colors.border}`) to stay within the color system
- Don't use type weights above Bold (700) — personality comes from Jokker's letterforms, not escalating weight
- Don't introduce sans-serif fonts other than Inter and Jokker — the two-typeface system is a hard constraint
- Don't add a third accent color — the warm-pink and violet pair is complete; a third hue would destabilize the warm/cool balance

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 809px | Single-column layout; feature cards stack vertically; hero text scales down; pill CTA becomes full-width |
| Tablet | 810px–1199px | Two-column card grid collapses to single; navigation simplifies; spacing scale reduces |
| Desktop | > 1199px | Full two-column card grid; hero at maximum type size; nav at full width |

### Touch Targets
- Pill CTAs with generous horizontal padding (24px+) and pill height naturally exceed 44px touch targets
- Feature cards span full or half column width on mobile — large enough for finger interaction without explicit sizing

### Collapsing Strategy
- Card grids collapse from 2-column to 1-column at the 809px breakpoint
- Navigation links collapse to a minimal state; the gradient CTA persists as the primary mobile action
- Hero headline reduces from 82px toward ~48px on small viewports; Jokker Bold maintains legibility at reduced sizes due to generous x-height

### Image Behavior
- Browser window screenshots and feature imagery within cards use `{rounded.lg}` (10px) and are fluid-width within their containers
- Hero product imagery is absent from the extracted page section; feature illustrations are emoji-driven and scale without constraint

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand CTA (gradient start): `{colors.primary}`
- Brand CTA (gradient end): `{colors.primary-end}`
- Secondary accent: `{colors.accent-violet}`
- Border: `{colors.border}`
- CTA text: `{colors.on-primary}`

### Example Component Prompts

- "Build a hero section with `{colors.background}` canvas, an 82px `{typography.display-hero}` headline in `{colors.ink}`, a 16px `{typography.body}` subheadline in `{colors.ink-secondary}`, and a pill CTA using `linear-gradient(270deg, {colors.primary} 0%, {colors.primary-end} 100%)` with `{colors.on-primary}` label text, `{rounded.pill}` radius, and 12px 24px padding."
- "Create a feature card with `{colors.surface}` fill, `1px solid {colors.border}` border, `{rounded.xl}` radius, 30px padding, a centered emoji at 48px, a `{typography.card-title}` title in `{colors.primary}`, a `{typography.heading-sub}` descriptor in `{colors.ink}`, and `{typography.caption}` body copy in `{colors.ink-secondary}`. Apply a four-stop layered box-shadow using `{colors.shadow-soft}` at opacities 0.05 across 0.8px, 2.4px, 6.4px, and 20px blur radii."
- "Build a violet variant feature card using `{colors.surface-violet}` fill, `1px solid {colors.border-violet}` border, `{rounded.xl}` radius, with a `{typography.card-title}` title in `{colors.accent-violet}`. All other dimensions match the peach card variant."
- "Design a navigation bar on `{colors.background}` with the SigmaOS logo mark on the left, a 'Community' ghost link in `{colors.ink-secondary}` using `{typography.body}` that shifts to `{colors.link-hover}` on hover, and a 'Download Free' pill CTA with the pink-orange gradient, `{colors.on-primary}` label in `{typography.button-ui}`, `{rounded.pill}` radius, and 10px 20px padding."
- "Create a badge chip with `{colors.surface-violet}` background, `{colors.accent-violet}` text in `{typography.caption}`, `{rounded.pill}` radius, and 4px 12px padding. Use for feature plan labels and inline callout tags."
- "Produce a two-column feature grid where peach cards (`{colors.surface}`, `{colors.border}`) alternate with violet cards (`{colors.surface-violet}`, `{colors.border-violet}`), each with `{rounded.xl}` corners, 20px gap, and hover state adding the four-stop `{colors.shadow-soft}` layered shadow."

### Iteration Guide

1. Start with the warm canvas (`{colors.background}`) — never substitute pure white; the peach warmth is the foundational brand signal.
2. For primary CTAs, always apply the full gradient (`{colors.primary}` → `{colors.primary-end}`) at `{rounded.pill}` — the gradient is the brand stamp; pills are non-negotiable for action elements.
3. Set display and heading text in Jokker Bold or Jokker Semibold; set body, UI labels, and captions in Inter — never mix roles.
4. Zone feature content with tinted card fills: warm (`{colors.surface}`) for primary features, violet (`{colors.surface-violet}`) for secondary — no white-fill cards.
5. Apply the four-stop layered shadow on elevated cards to produce the paper-lift effect — a single flat `box-shadow` is incorrect for this system.
6. Keep radius binary: `{rounded.xl}` for content containers (cards, inputs), `{rounded.pill}` for action elements (buttons, badges) — no intermediate radii.
7. Introduce emoji as typographic elements in feature headings when following the site's voice — they are part of the design vocabulary, not informal additions.

---

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