---
name: warm-welfare-design-reference
provider: DesignSkill (https://designskill.dev)
asset: design-systems/warm-welfare
version: 1.1.0
license: MIT
tool: handcrafted (12-block preview spec)
classification: first_party
---

# Warm Welfare — Design Reference

복지관·기관 사이트를 위한 웜톤 디자인 시스템. 모든 값은 `preview.html`의 `:root` CSS 변수(`--ww-*`)와 12블록 프리뷰에 선언된 정본 값이다.
Every value below is declared in the asset source — values not listed are not part of this system; do not invent them.

## Overview

- Warm institutional tone: terracotta CTA on a cream page background, sage for success, sun yellow for highlights.
- All tokens are exposed as `:root` CSS variables with the `--ww-*` prefix — drop the block below into any page to adopt the system.
- Single radius language (12px cards/buttons) and a single motion rule (180ms ease).

```css
:root{
  --ww-primary:#e06a4b; --ww-primary-deep:#c2410c; --ww-primary-soft:#fdf0eb;
  --ww-accent:#f2c94c; --ww-success:#6f9e80; --ww-success-soft:#eef5f0;
  --ww-ink:#44403c; --ww-muted:#a8a29e;
  --ww-bg:#faf6f0; --ww-surface:#ffffff; --ww-line:#e7e2da;
  --ww-radius:12px;
  --ww-shadow-1:0 1px 2px rgb(68 64 60/.06);
  --ww-shadow-2:0 4px 12px rgb(68 64 60/.10);
  --ww-shadow-3:0 12px 32px rgb(68 64 60/.16);
  --ww-ease:180ms ease;
}
```

## Colors

### Role Tokens

| Token | Value | Role (declared) |
|---|---|---|
| `--ww-primary` | `#e06a4b` | Terracotta — CTA · 핵심 강조 · 링크 |
| `--ww-primary-deep` | `#c2410c` | Terracotta Deep — hover · 액티브 |
| `--ww-primary-soft` | `#fdf0eb` | Soft fill — secondary 버튼 배경 · focus 링 · 뱃지 배경 |
| `--ww-accent` | `#f2c94c` | Sun Yellow — 하이라이트 · 뱃지 · 다크 서피스 위 액센트 |
| `--ww-success` | `#6f9e80` | Sage — 보조 강조 · 성공 |
| `--ww-success-soft` | `#eef5f0` | Sage soft — 성공 뱃지 배경 |
| `--ww-ink` | `#44403c` | Warm Ink — 본문 · 헤딩 · 다크 서피스 배경 |
| `--ww-muted` | `#a8a29e` | Muted — 보조 텍스트 · 캡션 |
| `--ww-bg` | `#faf6f0` | Cream — 페이지 배경 |
| `--ww-surface` | `#ffffff` | Surface — 카드 · 패널 |
| `--ww-line` | `#e7e2da` | Line — 보더 · 디바이더 |

### Hero Gradient (declared)

```css
background: linear-gradient(120deg, var(--ww-primary) 0%, #e8926f 60%, var(--ww-accent) 130%);
```

## Typography

Font family: **Pretendard** (variable), fallback `-apple-system, sans-serif`, base letter-spacing `-0.011em`.

| Token | Size | Weight | Use |
|---|---|---|---|
| Display | 44px | 800 (extrabold, tracking-tight) | 히어로 헤드라인 |
| H1 | 32px | 700 (tracking-tight) | 페이지 제목 |
| H2 | 22px | 700 | 섹션 제목 |
| Body | 15px | 400 (leading-relaxed) | 본문 |
| Caption | 12px | 400, `--ww-muted` | 캡션 · 보조 정보 |

## Spacing

Declared scale: `4 · 8 · 16 · 24 · 40 · 80` px. Section rhythm 80–120px.

## Shape (Border Radius)

| Value | Use |
|---|---|
| 6px | 인풋 내부 요소 |
| 12px (`--ww-radius`) | 카드 · 버튼 · 인풋 |
| 16px | 히어로 · 모달 |
| pill (9999px) | 칩 · 뱃지 |

## Elevation

| Level | Token | Value | Use |
|---|---|---|---|
| 1 | `--ww-shadow-1` | `0 1px 2px rgb(68 64 60/.06)` | 기본 카드 · 리스트 |
| 2 | `--ww-shadow-2` | `0 4px 12px rgb(68 64 60/.10)` | hover · 강조 카드 |
| 3 | `--ww-shadow-3` | `0 12px 32px rgb(68 64 60/.16)` | 모달 · 팝오버 |

## Motion

Single rule: `--ww-ease` = **180ms ease** for all transitions. 과한 패럴랙스·바운스 금지, `prefers-reduced-motion` 존중.

## Components

| Component | Declared spec |
|---|---|
| button.primary | bg `--ww-primary` · text `#ffffff` · radius 12px · padding `10px 20px` · font 14px/600 |
| button.secondary | bg `--ww-primary-soft` · text `--ww-primary-deep` · radius 12px |
| button.outline | text `--ww-ink` · border 1px `--ww-line` · radius 12px |
| button.ghost | text `--ww-primary` · no background |
| form.input | bg `#ffffff` · border 1px `--ww-line` · radius 12px · padding `10px 16px` · font 14px |
| card | bg `--ww-surface` · border 1px `--ww-line` · radius 12px · shadow Level 1 |
| card.emphasis | bg `--ww-primary` · text white · shadow Level 2 |
| card.dark | bg `--ww-ink` · text white · accent `--ww-accent` (Sun Yellow) |
| badge | bg `--ww-primary-soft` · text `--ww-primary-deep` · pill · font 11px/700 |
| chip.on | bg `--ww-primary` · text white · pill |
| chip.off | text `--ww-muted` · border 1px `--ww-line` · pill |
| nav | bg `--ww-surface` · height 56px · brand text `--ww-primary` |

### Interaction States (declared)

| State | Rule |
|---|---|
| hover | 배경 `--ww-primary-deep` 전환 + shadow Level 2 · 180ms ease |
| focus | `--ww-primary-soft` 3px 링 + `--ww-primary` 1px 외곽 (키보드 접근 필수) |
| active | scale 0.98 · 즉시 |
| disabled | stone-100 배경 + stone-300 텍스트 · 커서 금지 |

## Usage Rules

### Do

- Use `--ww-primary` for CTAs and key emphasis only; hover/active always shift to `--ww-primary-deep`.
- Keep the page on `--ww-bg` (cream) with cards on `--ww-surface` (white) separated by `--ww-line` borders.
- On dark surfaces (`--ww-ink` background), use `--ww-accent` (Sun Yellow) as the accent — not terracotta.
- Use the declared focus ring (soft 3px + primary 1px) on every interactive element.
- Keep all transitions at the single `180ms ease` rule.

### Don't

- Don't introduce colors, radii, shadows, or type sizes outside the tables above.
- Don't use `--ww-accent` as a CTA color — it is a highlight/badge color.
- Don't add parallax or bounce motion; respect `prefers-reduced-motion`.

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>