Dzen Design System Deep Dive

1. Brand Overview

Dzen is the kind of platform that wants to feel familiar and effortless. You open it, and it’s clean, no-nonsense, but not sterile. The visual language is rooted in a restrained palette and a typographic system that doesn’t try to shout, but still holds its own in a crowded UI. There’s a strong editorial undertone — headings are clear, links are obvious, and interactive elements carry just enough weight to be noticed without screaming for attention.

The vibe: pragmatic, slightly utilitarian, with moments of warmth. The primary text color is almost black (#06060f with 87% opacity), which keeps content legible and serious. Secondary surfaces lean into light grays (rgb(232, 234, 237) and #f0f0f0) — they give breathing room without pulling focus. This is a design for readers, scrollers, and casual clickers.

Typography is built around Stella Sans, with system font fallbacks. No fancy experimental faces — just solid sans-serif readability. They use weights like 590 and 600 often, which is interesting. That’s slightly heavier than the typical “medium” (500) but not as heavy as bold (700). It’s a deliberate choice for UI elements: heavier text feels clickable without looking like a headline.

The layout runs on an 8px spacing scale. That grid discipline shows up everywhere — from button padding to card margins. Corners range from subtle (2px and 4px) to generous (20px and 50% for circles). This isn’t random — Dzen has mapped radius sizes to component types: small UI controls get 4–8px, big cards and images get 16–20px, avatars go full circle.

Buttons are tactile — hover states scale up slightly (1.06) and drop opacity for feedback. Active states shrink (0.98) and often invert colors. The focus states are clear but not intrusive. Links are mostly underlined in default states, with hover color changes. Cards prefer soft shadows over hard borders.

All in all, Dzen’s design system is a study in restrained consistency. It’s not about dazzling the user — it’s about making sure every pixel is doing its job without drawing unnecessary attention.

2. Color System

2.1 Primary Colors

The main brand color is rgba(6, 6, 15, 0.87) — normalized as #06060f. That’s a near-black with slight transparency, used for primary text and iconography. It’s a safe, high-contrast choice. Psychologically, it signals seriousness and focus. Unlike brands that lean into bright primaries (think Facebook’s blue or YouTube’s red), Dzen’s primary is about grounding the interface.

Secondary is rgb(232, 234, 237) — a soft, neutral gray (#e8eaed). It’s used for surfaces and secondary buttons. This keeps the UI polite and easy on the eyes.

They sprinkle in functional accents: #0000ee (classic link blue), #ff5317 (orange highlight), and rgb(255, 204, 0) for CTAs.

2.2 Complete Palette

Every color is used with intent. No random shades — each has a role in the hierarchy.

2.3 Color Relationships

Contrast is strong. Primary text (#06060f) over white easily passes WCAG AA and AAA. Link blue (#0000ee) is accessible on white — although it’s the default browser blue, so it feels familiar.

Secondary surfaces (#e8eaed) against primary text are fine for body copy but might fail AAA for small text. The orange accent (#ff5317) over white is high contrast, making it good for alerts.

Dark mode isn’t explicitly defined here — but the palette has enough neutral tones to invert easily.

2.4 Usage Guide

• Primary text + white: Always legible.
• Secondary surface + primary text: Good for buttons, cards.
• Link blue: Keep it for actual links — don’t use for decorative text.
• Orange accent: Use sparingly — it’s strong.
• Avoid mixing multiple saturated colors; the system works because it’s mostly neutral plus one accent at a time.

3. Typography

3.1 Font Families

The core font is Stella Sans. Fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Arial. This is a pragmatic stack — it ensures consistent rendering across platforms.

System fonts (-apple-system) are used in some headings and links. No Google Fonts, no Adobe — this is likely a custom or licensed font.

3.2 Type Scale

3.3 Hierarchy

Headings max out at 24px — small compared to flashy brands. That keeps the reading experience compact. Buttons are heavier (600 or 590) to signal interaction. Captions drop to 13–14px but keep decent weight (590–600), which makes them legible even at small sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Values:

4.2 Layout

Breakpoints are numerous — from 320px up to 1736px. That’s granular, likely tuned for specific device classes. No fixed max width — responsive adjustments happen in many steps.

5. Visual Elements

Border Radius

All values:

• 0px 0px 24px 24px — 2 uses
• 2px — 6 uses
• 4px — 59 uses
• 6px — 6 uses
• 8px — 20 uses
• 10px — 9 uses
• 12px — 15 uses
• 14px — 2 uses
• 16px — 50 uses
• 20px — 36 uses
• 20px 20px 0px 0px — 9 uses
• 23px — 1 use
• 24px 24px 0px 0px — 2 uses
• 24px — 2 uses
• 50% — 55 uses (avatars, circles)
• 100% — 4 uses (full pills)

Shadows

• rgba(0, 0, 0, 0.1) 0px 2px 4px
• rgba(0, 0, 0, 0.08) 0px 4px 24px
• rgba(0, 0, 0, 0.22) 0px 16px 48px

Mostly soft — nothing too harsh.

6. Components

6.1 Buttons

Primary Search Arrow Button (.dzen-search-arrow-common__button):

• Default: bg rgb(255, 204, 0), color #06060f, padding 8px, radius 10px, border none
• Hover: bg var(--zenColorStateHoverStaticWhite), color var(--zenColorIconPrimaryHovered), scale 1.06, opacity 0.8
• Active: bg var(--zenColorBgInverse), scale 0.98, color var(--zenColorTextInversePrimary)
• Focus: border 1px solid var(--zenColorStrokeFocus)

Login Text Button:

• Default: bg rgba(0, 11, 33, 0.06), color #06060f, padding 0 20px, radius 12px
• Same hover/active/focus rules as above

Tab Button:

• Default: bg #e8eaed, color #06060f, padding 7.5px 12px 8.5px, radius 8px
• Hover: bg var(--zenColorStateHover), opacity 0.7, color var(--zenColorTextSecondaryHovered), scale 1.06, border .5px solid var(--zenColorTextTertiaryHovered)
• Active: bg rgb(37, 38, 42), scale 0.9, color inverse
• Focus: border 1px solid var(--zenColorStrokeFocus), bg hover color, text white

6.2 Links

Variants:

• Black, underline
• Link blue, underline
• Primary text no underline
• Bright blue, underline
• White, underline
• Light blue (#62aafd), no underline

Hover: color changes to var(--zenColorIconSecondary).

6.3 Forms

No text inputs in this extract — possible they’re handled in other modules.

6.4 Cards

Borders: 1px solid rgba(6,6,15,0.25) on some cards. Radius: 16px–20px. Shadows: light (0px 2px 4px) or deeper (0px 16px 48px) for emphasis.

7. Design Tokens

:root {
  /* Colors - Semantic */
  --color-primary: #06060f;
  --color-secondary: #e8eaed;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-light-gray: #f0f0f0;
  --color-transparent-navy: rgba(0, 11, 33, 0.06);
  --color-black: #000000;
  --color-orange-accent: #ff5317;

  /* Typography */
  --font-stella-sans: "Stella Sans", -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Arial;
  --font-system: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-3-5: 3.5px;
  --space-4: 4px;
  --space-5-5: 5.5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-7-5: 7.5px;
  --space-8: 8px;
  --space-8-5: 8.5px;
  --space-9: 9px;
  --space-9-5: 9.5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-44: 44px;
  --space-126-562: 126.562px;
  --space-181-125: 181.125px;

  /* Border Radius */
  --radius-none: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-23: 23px;
  --radius-24: 24px;
  --radius-circle: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 4px 24px;
  --shadow-lg: rgba(0, 0, 0, 0.22) 0px 16px 48px;
}

8. AI Coding Assistant Prompt

# Dzen Design System Specification

You are a Dzen design expert. Build UIs matching their visual language exactly.

## Brand Context
Dzen values clarity and usability. The brand uses a neutral-heavy palette with strong typographic hierarchy and restrained accents. Interactive elements are tactile but understated.

## Color Palette
- Primary: #06060f — Body text, icons
- Secondary: #e8eaed — Surfaces, secondary buttons
- White: #ffffff — Backgrounds, inverse text
- Link Blue: #0000ee — Standard clickable links
- Light Gray: #f0f0f0 — Background blocks
- Transparent Navy: rgba(0, 11, 33, 0.06) — Secondary button bg
- Black: #000000 — Certain headings
- Orange Accent: #ff5317 — Highlights, alerts

## Typography
- Font Family: "Stella Sans", -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Arial
- System fallback: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 24px | 700 | 1.17 | Page titles |
| Button | 18px | 600 | 1.33 | Primary buttons |
| Link | 16px | 400 | — | Inline links |
| Button | 16px | 590 | 1.25 | Secondary buttons |
| Caption | 14px | 600 | 1.14 | Metadata |
| Caption | 13px | 590 | 1.23 | Small labels |

## Spacing & Grid
Base: 8px. Scale includes: 1, 2, 3, 3.5, 4, 5.5, 6, 7, 7.5, 8, 8.5, 9, 9.5, 10, 12, 16, 20, 44, 126.562, 181.125 px.

## Border Radius
- none: 0px — tables
- sm: 4px — small divs
- md: 8px — tabs
- lg: 12px — buttons
- xl: 16px — inputs, large cards
- xxl: 20px — hero cards
- circle: 50% — avatars
- full: 100% — pills

## Shadows & Depth
- sm: rgba(0,0,0,0.1) 0px 2px 4px
- md: rgba(0,0,0,0.08) 0px 4px 24px
- lg: rgba(0,0,0,0.22) 0px 16px 48px

## Components

### Primary Button
Default: bg #ffcc00, color #06060f, padding 8px, radius 10px
Hover: bg var(--zenColorStateHoverStaticWhite), scale 1.06, opacity 0.8
Active: bg var(--zenColorBgInverse), scale 0.98
Focus: border 1px solid var(--zenColorStrokeFocus)

### Secondary Button
Default: bg rgba(0,11,33,0.06), color #06060f, padding 0 20px, radius 12px
Same hover/active/focus as primary

### Tab Button
Default: bg #e8eaed, color #06060f, padding 7.5px 12px 8.5px, radius 8px
Hover: bg var(--zenColorStateHover), opacity 0.7, scale 1.06
Active: bg #25262a, color #fff
Focus: border 1px solid var(--zenColorStrokeFocus)

### Navigation Links
Black or blue, underlined by default. Hover changes color to var(--zenColorIconSecondary).

### Cards
Radius: 16–20px, shadow sm/md/lg depending on prominence. Border: 1px solid rgba(6,6,15,0.25) when needed.

## Layout & Responsive Rules
Breakpoints: 320px up to 1736px. Adjust layout at many intermediate widths.

## Interaction Rules
Scale: 1.06 on hover, 0.98 on active. Opacity shifts for feedback.

## DO
- Use only palette colors
- Maintain 8px grid
- Use Stella Sans for UI text
- Map radius to component type
- Keep hover/active scales consistent

## DON'T
- Add new colors
- Mix sharp and rounded corners
- Remove underline from links unless specified
- Use shadows outside defined set

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffcc00;
  color: #06060f;
  padding: 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 18px;
  border: none;
  transition: transform 150ms ease, opacity 150ms ease;
}
.btn-primary:hover { transform: scale(1.06); opacity: 0.8; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus { border: 1px solid var(--zenColorStrokeFocus); outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
```

### Link
```css
a {
  color: #0000ee;
  text-decoration: underline;
}
a:hover {
  color: var(--zenColorIconSecondary);
}
```

9. Summary

TL;DR — Dzen’s design system is disciplined and neutral-heavy, with a strong typographic backbone and subtle interaction cues. It’s about clarity, not flash.

Brand Keywords: utilitarian-neutral, reader-focused, restrained-interactive, editorial-clean