Featuring Design System

Featuring Corp.의 React 디자인 시스템 — 일관된 UI를 위한 컴포넌트, 토큰, 아이콘

Overview

Featuring Design System은 피처링의 모든 프로덕트에서 일관된 사용자 경험을 제공하기 위한 React 디자인 시스템입니다.

1,000개 이상의 디자인 토큰, 30개 이상의 React 컴포넌트, 350개 이상의 아이콘을 제공하며, Zero-runtime CSS와 타입 안전성을 기반으로 설계되었습니다.

Packages

패키지	설명	버전
`@featuring-corp/design-tokens`	색상, 간격, 타이포그래피, 반지름, 그림자 토큰	CSS 변수 + JS 객체
`@featuring-corp/components`	Layout primitives + UI 컴포넌트 + CSS Preset	React 18+
`@featuring-corp/icons`	333개 시스템 아이콘 + 26개 서비스 아이콘	SVG React 컴포넌트

Quick Start

1. 설치

npm install @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons

2. CSS Import

// Preset (권장) — reset + normalize + 테마 토큰 + CSS Layer 순서 포함
import '@featuring-corp/components/preset/featuring';

3. 컴포넌트 사용

import { Box, HStack, Typo, Button } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

function SearchSection() {
  return (
    <Box $css={{ padding: '$spacing-600', bgColor: '$background-1' }}>
      <Typo variant="$heading-3" render={<h2 />}>
        Search
      </Typo>
      <HStack $css={{ gap: '$spacing-300', marginTop: '$spacing-400' }}>
        <Button.Root variant="primary" size="md">
          <Button.Icon><IconSearchOutline /></Button.Icon>
          <Button.Text>Search</Button.Text>
        </Button.Root>
      </HStack>
    </Box>
  );
}

핵심 특징

$css Prop

Box, Flex, HStack, VStack, Center, Grid, Typo 컴포넌트에서 사용하는 토큰 기반 스타일링 API입니다. 반응형 레이아웃과 인터랙티브 색상을 하나의 prop에서 선언합니다.

<Box $css={{
  padding: { mobile: '$spacing-300', desktop: '$spacing-600' },
  bgColor: { default: '$background-1', hover: '$background-2' },
  borderRadius: '$radius-200',
}}>
  Responsive & Interactive
</Box>

$css Prop 자세히 보기

3-Layer Token Architecture

레이어	역할	예시
Global	원시 값	`--global-colors-red-50`, `--global-spacing-400`
Semantic	용도 매핑	`--semantic-color-text-1`, `--semantic-color-background-1`
Color Set	브랜드 Primary	`--global-colors-primary-60`

Design Philosophy 자세히 보기

Polymorphic Rendering

render prop으로 시맨틱 HTML을 유지하면서 디자인 시스템의 스타일링을 활용합니다.

<Box render={<section />} $css={{ padding: '$spacing-400' }}>
  <Typo render={<h1 />} variant="$heading-1">Title</Typo>
  <Typo render={<p />} variant="$body-1">Description</Typo>
</Box>

Multi-Brand Theming

Preset 교체만으로 Featuring(보라색) ↔ DataEffect(파란색) 테마를 전환합니다.

// Featuring 테마
import '@featuring-corp/components/preset/featuring';

// DataEffect 테마
import '@featuring-corp/components/preset/dataEffect';

Theming 자세히 보기

문서 구조

섹션	내용
Guide	설치, 프레임워크 설정, 설계 원칙, $css prop, 반응형, 테마
Design Tokens	색상, 간격, 타이포그래피, 반지름, 그림자
Components	Layout, UI 컴포넌트, Legacy (Core*), Utils
Icons	시스템 아이콘, 서비스 아이콘

On this page