Daum Design System Deep Dive

1. Brand Overview

Daum’s homepage is a living example of a mature portal brand that’s grown up in the Korean web ecosystem. It’s not a startup’s design—this is a platform that’s been around for decades, tuned for high-volume information delivery. The design language speaks to familiarity and speed. You’re not here for an art piece, you’re here to get news, weather, sports, and your email in seconds.

Visually, it’s a clean, utilitarian base with pockets of color that signal interaction. The palette is dominated by neutrals—grays and black for text, white for surfaces—but those neutrals are punctuated by sharp, saturated accents (#4881f7 blue, #9148F7 purple, #FF8B17 orange, #F74853 red). Each accent maps tightly to content categories: sports, entertainment, interest, story. This makes scanning easy—your eye catches a color and knows the content type instantly.

Typography is all system fonts: -apple-system, system-ui, Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, 맑은 고딕. That decision is about speed, OS integration, and readability across devices. Not fancy, but it’s clean, predictable, and stable. No external font loading means faster page loads and consistent rendering.

The overall vibe: functional softness. Rounded corners everywhere (8px, 12px, 20px, 28px radii) soften the portal’s utilitarian layout. Shadows are subtle—low-opacity black blurs that give gentle depth without screaming “material design.” Borders are thin and light, mostly rgba(0,0,0,0.08) or rgba(0,0,0,0.04), used to separate content without heavy visual weight.

If you’re designing for Daum’s audience, you’re designing for people who want clarity, familiarity, and quick scanning. The system balances a neutral base with a category-driven accent palette, rounded geometry, and minimal distractions.

2. Color System

2.1 Primary Colors

There’s no single “brand blue” plastered everywhere. Instead, Daum uses a category-first approach: each content type gets its own accent color. That’s clever—it means the primary color changes depending on context. For example:

• Sports: #4864F7 (blue with a slightly violet tone)
• Entertainment: #9148F7 (purple)
• Interest: #FF8B17 (orange)
• Story: #F74853 (red/pink)

The real “primary” in the UI sense is #4881f7—used for CTAs like .link_opt and as a general action blue. This is the color that carries the most interaction weight.

Psychologically, this approach creates trust through familiarity (neutrals, system fonts) and engagement through color-coded categories. Compared to competitors like Naver (which leans on a single green), Daum’s approach feels more editorial—colors as navigational signposts.

2.2 Complete Palette

2.3 Color Relationships

Contrast is decent but not perfect. Dark text (#333333) on white (#ffffff) is fine (contrast ratio ~15:1). Accent colors are all saturated enough to stand alone on white, but some hover backgrounds (e.g., #F5E4D4 for interest) are low-contrast against white—these depend on accompanying text color for visibility.

Transparency is used for category backgrounds (rgba(...,0.16)), which lets the neutral base show through. This keeps category chips light and airy. Accessibility-wise, these transparent backgrounds alone may not meet WCAG AA for text contrast—Daum compensates with strong text colors.

Dark mode? Not implemented. All tokens are light-mode oriented.

2.4 Usage Guide

• Pair accent text colors with their matching transparent backgrounds for category chips.
• Avoid mixing category colors—each chip should be monochrome in its category to maintain clarity.
• Action blue (#4881f7) is reserved for interactive CTAs—don’t dilute it by using it for non-interactive text.
• Neutral light (#f2f4f7) is for subtle, non-clickable containers—avoid using it for buttons unless it’s a secondary action.

3. Typography

3.1 Font Families

All typography uses a system stack:

-apple-system, system-ui, Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, 맑은 고딕

No Google Fonts, no Adobe Fonts. This ensures fast load and native rendering. Korean glyph coverage is handled by Apple SD Gothic Neo and Malgun Gothic.

3.2 Type Scale

3.3 Hierarchy

They rely on size jumps (24px → 22px → 18px → 16px) for hierarchy, not color or weight changes alone. Headings are bold (700), body is regular (400). Links often share heading sizes but differ in line height—taller line heights for navigational lists, tighter for titles.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

No explicit breakpoints in extracted data, but the scale suggests a responsive 8px grid. Larger spacing values (99px, 101px, 160px) are likely for hero sections or vertical rhythm in desktop layouts.

5. Visual Elements

Border Radius

They love rounded corners. Common values:

• 8px: default for divs, spans, buttons
• 10px: images
• 12px: links, buttons, containers
• 17px: pill-like buttons
• 20px: chips, pills
• 22px: rounded buttons
• 26px: very pill-shaped buttons
• 28px: large cards/nav
• Mixed: 0px 16px 16px 0px for right-rounded buttons, 0px 0px 8px 8px for bottom-rounded containers.

Shadows

Subtle depth:

• rgba(0, 0, 0, 0.04) 0px 0px 4px
• rgba(0, 0, 0, 0.08) 0px 1px 6px
• rgba(0, 0, 0, 0.16) 0px 4px 32px

These are low-opacity, soft blurs—never harsh.

Borders

Mostly light (rgba(0,0,0,0.08)), 1px solid. Used for tabs, buttons. Dividers often rgba(0,0,0,0.04).

6. Components

6.1 Buttons

We have multiple button classes:

• .btn_more: white bg, rgba(0,0,0,0.72) text, 22px radius, subtle shadow.
• .link_opt: rgba(91,146,254,0.16) bg, #4881f7 text, 20px radius, bold.
• .link_item variants: transparent category bg (red, purple, blue, orange), bold text in matching color.
• .btn_extend: light neutral bg (#f2f4f7), 17px radius, small font.
• .btn_login: yellow bg (#fee500), black text, 26px radius.
• .btn_tab: transparent bg, 1px border rgba(0,0,0,0.08), 16px radius.
• Dark .link_item: black bg (#2c2e33), white text, 17px radius.

No hover/active/focus states in extracted data—likely handled inline or via JS.

6.2 Links

Colors match category accents, bold weight for primary links, no underline.

6.3 Forms

Text input: transparent bg, black text, no border, padding left for icon space (60px).

6.4 Cards

No explicit “card” class extracted, but shadows and border radii suggest cards use 8px–12px radius, light shadows (0px 0px 4px rgba(0,0,0,0.04)).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-neutral-dark: #333333;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-action-blue: #4881f7;
  --color-neutral-light: #f2f4f7;
  --color-accent-red-transparent: rgba(255,78,51,0.16);
  --text-story: #F74853;
  --bg-interest-alpha-16-hovered: #F5E4D4;
  --text-ent: #9148F7;
  --bg-blue-alpha-16-hovered: #DCE4F5;
  --bg-story-alpha-8: rgba(255,92,102,.08);
  --bg-on-slot-hovered: #e8eaed;
  --bg-story-alpha-16-hovered: #F5DCDE;
  --bg-interest: #FF9429;
  --text-green: #00B56D;
  --bg-slot: #ffffff;
  --bg-sport-alpha-16: rgba(92,119,255,.16);
  --text-sport: #4864F7;
  --text-black: #000000;
  --bg-blue-alpha-8: rgba(91,146,254,.08);
  --swiper-theme-color: #007aff;
  --text-interest: #FF8B17;
  --bg-red-alpha-16-hovered: #f5dad5;
  --bg-ent: #A05CFF;
  --bg-btn-disabled: #B1B8C5;
  --bg-ent-alpha-16-hovered: #E6DCF5;
  --bg-sport-alpha-16-hovered: #DCE0F5;

  /* Typography */
  --font-family-system: -apple-system, system-ui, Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, 맑은 고딕;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-17: 17px;
  --space-19: 19px;
  --space-20: 20px;
  --space-99: 99px;
  --space-101: 101px;
  --space-160: 160px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-26: 26px;
  --radius-28: 28px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.04) 0px 0px 4px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 1px 6px;
  --shadow-lg: rgba(0, 0, 0, 0.16) 0px 4px 32px;
}

8. AI Coding Assistant Prompt

# Daum Design System Specification

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

## Brand Context
Daum is a mature Korean portal brand focused on clarity, speed, and category-driven navigation. The design language uses a neutral base with strong, saturated category accents, rounded geometry, and minimal shadows.

## Color Palette
- Neutral Dark: #333333 — Text for headings, links
- Black: #000000 — Text, icons
- White: #ffffff — Page background, card surfaces
- Action Blue: #4881f7 — Primary CTAs (.link_opt)
- Neutral Light: #f2f4f7 — Background for secondary buttons (.btn_extend)
- Accent Red Transparent: rgba(255,78,51,0.16) — Category chip background (story)
- Story Text: #F74853 — Story category text
- Entertainment Text: #9148F7 — Entertainment category text
- Interest Text: #FF8B17 — Interest category text
- Sports Text: #4864F7 — Sports category text
- Green Text: #00B56D — Special accent text
- Disabled BG: #B1B8C5 — Disabled button background
- Hover BGs: #F5E4D4 (interest), #DCE4F5 (blue), #F5DCDE (story), #E6DCF5 (entertainment), #DCE0F5 (sports)
- Transparent BGs: rgba(91,146,254,0.08) (blue), rgba(92,119,255,0.16) (sports), rgba(255,92,102,.08) (story)

## Typography
Font stack: -apple-system, system-ui, Helvetica, Apple SD Gothic Neo, Arial, Malgun Gothic, 맑은 고딕

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 | 24px | 700 | 0.75 | Page titles |
| H1 | 22px | 700 | 0.00 | Section headings |
| H1 | 18px | 700 | 0.00 | Subheadings |
| Body | 16px | 400 | 2.50 | Paragraphs |
| Link | 15px | 700 | 2.53 | Navigation links |
| Caption | 14px | 400 | 1.21 | Small labels |
| Small Button | 12px | 400 | 1.50 | Compact buttons |

## Spacing & Grid
Base: 8px grid. Tokens: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 14px, 16px, 17px, 19px, 20px, 99px, 101px, 160px.

## Border Radius
- sm: 8px — small containers
- md: 12px — cards, links
- pill: 17px, 20px — chips, buttons
- lg: 28px — large nav, hero elements
- full pill: 26px — login button

## Shadows & Depth
- sm: rgba(0,0,0,0.04) 0px 0px 4px
- md: rgba(0,0,0,0.08) 0px 1px 6px
- lg: rgba(0,0,0,0.16) 0px 4px 32px

## Component Specifications

### Primary Button (.link_opt)
Default:
- background: rgba(91,146,254,0.16)
- color: #4881f7
- padding: 1px 43px 0px 16px
- border-radius: 20px
- font-weight: 700
- font-size: 15px
Border: none, no shadow.

### Secondary Button (.btn_extend)
Default:
- background: #f2f4f7
- color: rgba(0,0,0,0.72)
- padding: 0px 12px
- border-radius: 17px
- font-weight: 400
- font-size: 12px

### Category Chip (.link_item - red)
Default:
- background: rgba(255,78,51,0.16)
- color: #ff4e33
- padding: 1px 16px 0px
- border-radius: 20px
- font-weight: 700
- font-size: 15px

### Input Field
Default:
- background: transparent
- color: #000000
- border: none
- padding: 0px 138px 0px 60px

## Layout & Responsive Rules
- Maintain 8px grid for all spacing.
- Larger paddings (99px, 101px) for desktop hero sections.
- No breakpoints provided—follow responsive scaling based on grid.

## Interaction Rules
- Transition timing: 150ms ease for color/background changes.
- Focus indicators: 2px solid matching action color.
- Hover states: use hover background tokens.

## DO
- Use only provided palette colors.
- Maintain consistent border-radius per component type.
- Use category colors for related content only.
- Keep shadows subtle—avoid heavy drop shadows.
- Use system font stack as specified.

## DON'T
- Mix category colors in one chip.
- Use action blue for non-interactive text.
- Apply shadows to text.
- Break the 8px grid spacing.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: rgba(91,146,254,0.16);
  color: #4881f7;
  padding: 1px 43px 0 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid #4881f7;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #f2f4f7;
  color: rgba(0,0,0,0.72);
  padding: 0 12px;
  border-radius: 17px;
  font-size: 12px;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: #000;
  border: none;
  padding: 0 138px 0 60px;
}
.input:focus {
  outline: 2px solid #4881f7;
}
```

9. Summary

TL;DR: Daum’s design system is built for speed and clarity—neutral base, category-driven color accents, rounded corners, subtle shadows, and system fonts. Color is functional, typography is native, spacing is disciplined.

Brand Keywords: category-coded, neutral-base, rounded-soft, fast-loading, editorial-portal