SoyoonKO
SoyoonKO

03

Design system

In-house design system

Role
Icon system and theming
Period
2025.03—2026.10
Stack
  • React
  • TypeScript
  • Rollup
  • Storybook
  • Tailwind CSS
  • Figma
Links

Overview

I helped maintain the internal component library that lets several products speak the same visual language.

I connected icons from Figma to code, kept themes intact in published builds, and documented keyboard and focus behaviour.

Problem

When icons and style rules are copied into each app, the same meaning accumulates in different shapes.

A library has to be more than a component collection: it should remove decisions from every new screen.

Constraint

  1. Icons are numerous and change

    When Figma and code drift, updates depend on someone remembering. Hand-wrapping every icon does not scale either.

  2. Themes must survive publishing

    If @theme rules visible in development disappear from the bundle, consuming apps have little way to find the cause.

Decision

  1. Make icons a typed pipeline

    Figma assets are synchronized and a createSvgIcon factory gives every component the same props and accessibility rules. Metadata and categories live alongside them in Storybook.

  2. Make visible state part of the documentation

    I introduced an a11y addon and tightened focus and keyboard behaviour. A component that only works in its default state is not finished in a product.

Component lab

Icon factory
export const SearchIcon = createSvgIcon({
  name: 'search',
  viewBox: '0 0 24 24',
  paths: ['M11 4a7 7 0 1 0 0 14…'],
});

No company code is shown; this is the factory pattern that removes repeated SVG boilerplate.

PORTFOLIO PRIMITIVES · LIVE PREVIEW

The small rules that make the site

Not a fictional library: these are the primitives this portfolio actually needs, shown in their states.

TYPE SCALE

Aa Hero · clamp(56px, 13.4vw, 232px)
Aa Title · clamp(28px, 3.6vw, 60px)
Aa Body · 17px
Aa Meta · 11.5px

COLOUR TOKENS

BACKGROUND #0D0D0DSURFACE #161616FOREGROUND #F5F5F5MUTED #9A9A9A
Token source

The actual type and colour values from this site’s CSS variables.

SHARED SPACING · TYPE SCALE · FOCUS STATE · FOUNDATIONS

Engineering

  1. FigmaIcon source and metadata
  2. FactoryConsistent React components
  3. RollupOnly needed icons remain in a build
  4. StorybookUsage, states and accessibility documented

  1. Tree-shakable icons

    Module boundaries keep unused icons out of an app bundle.

  2. Published-build regression fixed

    I fixed the path that stripped @theme directives from published builds, keeping development and consumer output aligned.

Result

Icons, themes and documentation now travel through one publishing path.

Product teams can start by choosing verified building blocks rather than inventing rules per screen.

This is informed by internal design-system work. No company code or design assets are shown; the Component lab independently reconstructs portfolio-specific primitives.