# DNL STUDIO Design System **🌐 Language / μ–Έμ–΄: English (this file) Β· [ν•œκ΅­μ–΄](./README.ko.md)** A monochrome-first design system with a single signature accent (**Accent `#2D5BFF`**), built for a personal portfolio / website and for prototyping mobile service screens. Light mode is the base; full dark mode is supported. Korean + English are first-class β€” the entire type system runs on **Pretendard**, which covers both scripts in one family. > **Sources / origin:** Built from scratch (no prior codebase, Figma, or brand guide); all foundations were authored fresh and confirmed step by step (font β†’ color β†’ components). Rebranded to **DNL STUDIO Design System (DSDS)** in 2026-08 β€” see [`brand.html`](./brand.html) for naming, wordmark, and voice rules. --- ## Content fundamentals How copy is written across the system. Keep it consistent in every screen, card, and component. - **Bilingual, Korean-led for product UI.** UI labels and body copy default to Korean; English appears as supporting/display text, product names, and technical terms. Both are set in Pretendard so they sit together cleanly. Example: a hero reads `Build with clarity` / `λͺ…λ£Œν•˜κ²Œ λ§Œλ“ λ‹€`. - **Tone: clear, confident, calm.** Plain and direct, never hype-y or salesy. Prefer verbs and concrete nouns over adjectives. "μž‘μ—…μ„ μ‹œμž‘ν•˜μ„Έμš”" over "μ§€κΈˆ λ°”λ‘œ λ†€λΌμš΄ κ²½ν—˜μ„!". - **Person:** Address the user as **you / λ‹Ήμ‹ Β·~ν•˜μ„Έμš”** in instructions; speak about the maker in first person on the portfolio ("μ œκ°€ λ§Œλ“  것듀"). Avoid corporate "we" unless representing a team. - **Casing:** English display/headings use **Sentence case** ("Build with clarity"), not Title Case. Korean has no casing β€” rely on weight and size for hierarchy. UPPERCASE is reserved for tiny eyebrow/overline labels with wide tracking (`--ls-caps`), e.g. `TYPOGRAPHY`. - **Numbers & data** are set in **Pretendard with tabular figures** (prices, percentages, stats) β€” columns stay aligned from a single type family. Use `font-variant-numeric: tabular-nums` (already on `.ds-table`, `Stat`, and charts). - **No emoji.** The brand voice is restrained; status and emphasis come from badges, color, and weight β€” not emoji. Unicode arrows (`β†’`, `β†—`) are allowed as inline affordance cues. - **Punctuation:** Korean sentences may omit terminal periods in short UI strings; English follows standard punctuation. Use the en-dash `–`/em-dash `β€”` sparingly for asides. - **Length:** Headlines short (≀ 6 words EN). Body copy concise; one idea per paragraph. Buttons are 1–2 words ("μ‹œμž‘ν•˜κΈ°", "더 보기", "Save"). --- ## Visual foundations The look: **monochrome surfaces, ink text, one accent used sparingly.** Quiet and precise β€” the content (work, product) is the hero; the system gets out of the way. - **Color.** Cool-leaning neutral ramp (`--gray-0 … --gray-950`) carries 95% of every screen. **Ink** (`--gray-900`) is the primary text and the primary button fill. **Accent** (`--accent-500`, lifted to `#5B7CFF` in dark) is the single accent β€” reserved for links, focus rings, selected/active states, and the one most-important CTA per view. Never flood a screen with accent. Status colors (green/amber/red) appear only in badges and feedback. - **Themes.** Light is the base on `:root`; dark overrides semantic tokens under `[data-theme="dark"]`. Components read semantic tokens (`--text-primary`, `--surface-card`, `--border`, `--accent`) so they flip automatically β€” no per-component dark CSS. - **Type.** Pretendard for everything (display β†’ data) β€” one family covering Korean + English; numerics use tabular figures. Tight tracking on display/headings (`--ls-tight`/`--ls-tighter`), neutral on body. Weights: 400/500/600/700. Hierarchy comes from size + weight, not color. - **Spacing & layout.** Strict **4px base grid** (`--space-*`: 4Β·8Β·12Β·16Β·20Β·24Β·28Β·32Β·40Β·48Β·64Β·80Β·96). Radius is also on the 4px grid (`--radius-*`: 4Β·8Β·12Β·16Β·20Β·28). All component padding/gap/margin snap to the grid; the only deliberate off-grid values are hairline borders (1px), focus/centering offsets (2px), icon glyph sizing, and the 44px touch target. Generous whitespace; content max-widths around 1100–1240px on web. Use flex/grid with `gap` β€” never margin chains. - **Breakpoints & responsive.** **Mobile-first**: base styles target small screens; `min-width` media queries layer on the larger layouts. Four breakpoints β€” `--bp-sm 480` Β· `md 768` Β· `lg 1024` Β· `xl 1280` β€” all on the 4px grid. The **components themselves are viewport-agnostic** (fluid `width:100%` + `max-width` caps, no hardcoded breakpoints); responsive *layout* is the consuming app's job, helped by the `.ds-container` and `.ds-grid--auto|2|3|4` utilities. The same intent gets a different shell per platform (BottomSheet ↔ Drawer, BottomNav ↔ sidebar). See the **Responsive & breakpoints** foundation. _(Custom properties can't be read inside an `@media` condition, so `--bp-*` are the reference values and the media queries mirror the same literals.)_ - **Corner radii.** Soft but not pill-y for containers: inputs/buttons `--radius-md` (12px), cards `--radius-xl` (20px). Pills (`--radius-pill`) only for badges, tags, switches, and avatars. - **Borders.** Hairline `--border` (1px, `--gray-200`) is the default separator. `--border-strong` for inputs and emphasis. Borders do the structural work; shadows stay subtle. - **Shadows / elevation.** Soft, cool, low-spread (`--shadow-xs … --shadow-xl`). Cards rest on `--shadow-sm`; raise to `--shadow-lg` on hover. No hard or colored drop shadows. - **Backgrounds.** Flat color only β€” `--surface-page` (off-white) behind, `--surface-card` (white) for cards. **No gradients, no decorative blobs, no textures.** Dark mode uses near-black `#0d0f12` page / `#16181d` cards. - **Imagery.** Treat real photography/work as full-bleed within rounded cards (`--radius-xl`), cool/neutral grade preferred. Use placeholders (image slots) until real assets are supplied β€” never generate decorative imagery. - **Motion.** Quick and understated. `--dur-fast` (120ms) for hovers, `--dur-base` (200ms) for toggles/switches, `--ease-out` for most, `--ease-in-out` for two-way. No bounces or springy overshoot. - **Hover states:** subtle background fill (`--surface-sunken`) for ghost/secondary; one step darker for solid fills (`--action-primary-bg-hover`, `--accent-hover`); cards lift `translateY(-2px)` + deeper shadow. - **Press states:** slight `scale(.985–.94)` shrink. **Focus:** always a visible 2px accent ring (`--focus-ring`) with 2px offset β€” never removed. - **Transparency / blur:** used rarely β€” focus rings use a translucent accent halo (`color-mix`). No glassmorphism by default. --- ## Theming & signature **One accent: Accent.** The system is monochrome with a single signature accent β€” Accent. There is no brand-swap layer; semantics reference the Accent ramp directly. The accent role is split for contrast: `--accent` (decorative β€” focus ring, signature mark, fills; the 500 step) vs `--accent-solid` (anything with text/icon on top; the 600 step in light, which keeps white text β‰₯ 4.5 AA; ink-on-accent in dark). Links, focus, selected states, the solid CTA and `chart-1` all derive from Accent, in **both light and dark**, staying WCAG AA. - **Light / dark** β€” set `data-theme="dark"` on ``; the accent steps lift automatically (Accent 500/600 in light β†’ 400/300 in dark) so contrast holds in both themes. - **Single source of truth** β€” `tokens/tokens.json` (W3C Design Tokens format) mirrors the color system: primitive ramps (gray / accent / status) β†’ semantic light/dark. **The signature β€” "the point."** The one accent mark (a small rounded square) recurs as the system's spark: it leads `.ds-kicker` section labels, sits at the center of the empty state (a monochrome field with a single accent point), and lands last in the `` loader. One memorable mark; everything else stays quiet. See `foundations/signature.html`. --- ## Iconography - **System: [Lucide](https://lucide.dev)** β€” clean monoline icons, 1.5–2px stroke, rounded caps/joins. This matches the monochrome, precise tone better than filled or duotone sets. - **Substitution flag:** because this system was built from scratch (no codebase icon set), Lucide was chosen as the closest fit to the monochrome aesthetic. If you have a preferred icon set, swap it here. - **Usage:** icons inherit `currentColor` and are sized in `em` relative to the text/button. Default stroke `2`, color `--text-secondary` (or `--text-tertiary` for decorative/leading-in-field). Active/selected icons take `--text-primary` or `--accent`. - **Delivery:** in HTML specimens and prototypes, inline the Lucide SVG paths (stroke, fill:none) or load Lucide from CDN. Component code (Button, IconButton, etc.) accepts any icon node via an `icon` prop β€” pass a Lucide ``. - **No emoji as icons. No PNG icons.** Unicode arrows (`β†’ β†— ←`) are acceptable inline. - **Assets:** see `assets/` for logos/marks (placeholder lockups until a real logo is supplied). - **Social / share cards:** `assets/og-cover.png` (light) and `assets/og-cover-dark.png` (dark) β€” 1200Γ—630 Open Graph covers. `index.html` and every gallery page carry `og:*` / `twitter:card` meta with a page-specific title, so shared links render a proper preview. _Link-preview services cache aggressively; re-scrape via the platform's debugger if an old/empty thumbnail sticks._ --- ## Showcase Open **`index.html`** at the repo root for the live showcase β€” no build step. It links four pages, each with a light/dark toggle: - **`index.html`** β€” overview: hero, token taster, usage. - **`gallery/foundations.html`** β€” every foundation specimen (type, color, spacing, motion, layout, guidelines, brand). - **`gallery/atoms.html`** Β· **`gallery/molecules.html`** Β· **`gallery/organisms.html`** β€” every component in its key states, rendered with the real `.ds-*` classes. The foundations page embeds specimens via `