# Omsom · Design system migration spec

> Source: https://omsom.com  ·  Curated by OpenDesign  ·  en

> A great example of a bold, expressive brand identity that uses comic-book aesthetics and high-contrast elements to stand out.

## 1. Identity DNA

The Omsom design system is built like a comic-book panel: bold, graphic, and unapologetically loud. It translates the vibrant energy of Asian flavors into a visual language of high-chroma accents and expressive typography. Every component serves the central analogy of a fearless, flavorful celebration.

**One-liner:** Vibrant, loud, and unapologetic Asian food brand with a comic-book aesthetic.
**Keywords:** bold · loud · flavorful · playful · authentic
**Analogy:** A bold, comic-book-style food brand that unapologetically celebrates Asian flavors.

## 2. Color

The palette is anchored by high-chroma orange and yellow, deployed with confidence against warm photography and soft pastel backgrounds like cream. This creates a dynamic contrast that is both energetic and appetizing.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCF3DA` | main background |
| `--bg-soft` | `#AC9F9F` | card background |
| `--bg-quiet` | `#D69C8C` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#FD5225` | placeholder |
| `--accent` | `#FD5225` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-chroma orange and yellow accents against warm, muted photography and soft pastel backgrounds.

Color is used expressively and boldly, never as a subtle or neutral backdrop.

## 3. Typography

Typography establishes a clear hierarchy: a bold, condensed display serif commands headlines with a 'Proud + Loud' attitude, while a clean sans-serif ensures legibility for body copy. The frequent use of uppercase text adds to the system's assertive, graphic voice.

- **Display:** display-serif
- **Body:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -1px | Headlines and key callouts |
| headline | 42px | 1.0 | 500 | 0px | Section titles |
| body | 16px | 1.5 | 400 | 0px | General text |

**Type rules:**
- Headlines use a bold, condensed display serif.
- Body text uses a clean sans-serif.
- Frequent use of uppercase for emphasis.

## 4. Spacing

Generous spacing between sections creates a deliberate rhythm, allowing bold visuals and typography to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous spacing between sections to allow bold visuals and typography to breathe.

## 5. Surfaces

Depth is conveyed through graphic devices rather than soft shadows. Thin black borders frame imagery, while comic-book-style starburst shapes create dynamic callouts.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin black borders around imagery and a thick, comic-book-style starburst shape for callouts.

## 6. Layout

The layout skeleton begins with a full-width hero image to establish an immediate emotional connection. This transitions into a grid that organizes product photography and editorial quotes, creating a dense but structured narrative flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero imagery followed by a grid of product shots and editorial quotes.

## 7. Motion & Interaction

Motion is smooth and purposeful, with 0.3-second transitions for hover states and interactive elements. Dynamic transform effects on scroll add a layer of playful dynamism without overwhelming the user.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states
  - Dynamic transform effects on scroll

- **Hover:** Cursor changes to pointer; subtle scale or color shifts on interactive elements.
- **Click:** Immediate visual feedback with active states.
- **Transition:** Smooth 0.3s transitions for interactive elements.
- **Keyboard:** Standard focus states for navigation.

## 8. Voice & Don'ts

The editorial voice is confident, bold, and enthusiastic, mirroring the 'Proud + Loud' headline style. Direct, action-oriented copy avoids corporate tone and embraces the brand's authentic personality.

- **Tone:** Confident, bold, and enthusiastic.
- **Headline style:** Proud + Loud
- **CTA style:** Direct and action-oriented.
- **Avoid:** Tone down the flavor profile / Use overly corporate language / Be subtle with colors

### Don'ts
- ❌ Don't use muted pastels as the primary palette — screenshot shows vibrant, high-chroma orange and yellow.
- ❌ Don't use a standard geometric sans-serif for headlines — screenshot shows a bold, condensed display serif.
- ❌ Don't use subtle drop shadows — screenshot shows hard, comic-book-style graphic elements.
- ❌ Don't use a minimalist layout — screenshot shows dense, expressive imagery and text.
- ❌ Don't avoid uppercase text — screenshot shows frequent use of uppercase for emphasis.
- ❌ Don't use a neutral color scheme — screenshot shows a warm, energetic palette.

The system deliberately avoids subtlety, minimalism, and muted pastels, refusing to tone down the vibrant flavor profile of the brand.

## System Prompt (paste into AI tool)

```
Omsom is a bold, expressive food brand that uses a 'Proud + Loud' aesthetic to celebrate Asian flavors. The design features high-chroma orange (#FD5225) and yellow accents against warm photography and soft pastel backgrounds like cream (#FCF3DA). Typography relies on a bold, condensed display serif for headlines and a clean sans-serif for body text. Critical don'ts: avoid muted pastels as the primary palette, avoid standard geometric sans-serifs for headlines, avoid subtle drop shadows, avoid minimalist layouts, avoid lowercase-only text, and avoid neutral color schemes. The overall feel is playful, confident, and highly energetic.
```
