토큰으로 쓰고, 타입으로 잡는다
$css prop 하나에 토큰, 반응형, 인터랙션 조건을 모두 선언합니다.
import { Box, HStack, Button } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';
function SearchBar() {
return (
<HStack $css={{ gap: '$spacing-300', padding: '$spacing-400' }}>
<Box
$css={{
flex: '1',
padding: '$spacing-300',
rounded: '$radius-200',
bgColor: { default: '$background-2', focus: '$background-1' },
borderColor: { default: '$border-default', focus: '$primary-60' },
borderWidth: '1px',
borderStyle: 'solid',
}}
render={<input placeholder="Search components..." />}
/>
<Button.Root variant="primary" size="md">
<Button.Icon><IconSearchOutline /></Button.Icon>
<Button.Text>Search</Button.Text>
</Button.Root>
</HStack>
);
}다른 디자인 시스템과 다른 점
Vanilla Extract 기반 Zero-runtime CSS. 빌드 타임에 CSS를 생성하고, 런타임 오버헤드는 없습니다.
$css Prop
토큰 값과 임의 CSS 값을 하나의 prop에서. 반응형, hover, focus 조건까지 객체 하나로 선언합니다.
CSS Cascade Layers
컴포넌트 CSS는 @layer 안에, 소비자 CSS는 밖에. !important 없이 어떤 스타일이든 오버라이드하세요.
Multi-Brand Theming
CSS import 하나로 Featuring ↔ DataEffect 브랜드를 전환합니다. 코드 변경 없이.
네 개의 패키지, 필요한 것만
컴포넌트, 토큰, 아이콘, 차트 — 독립적으로 설치하고 사용하세요.
@featuring-corp/components
30개 이상의 React UI 컴포넌트. $css prop으로 토큰 기반 스타일링을 지원합니다.
@featuring-corp/design-tokens
색상, 간격, 타이포그래피, 그림자까지. 1,000개 이상의 디자인 토큰을 CSS 변수로 제공합니다.
@featuring-corp/icons
시스템 아이콘 327개, 서비스 아이콘 26개. React 컴포넌트로 크기와 색상을 자유롭게 조정하세요.
@featuring-corp/charts
recharts 기반 차트 래퍼. fill="$primary-50" 같은 $ 토큰 문법과 디자인 시스템 기본값을 제공합니다.
3-Layer Token Architecture
Global → Semantic → Component. 브랜드가 정의한 토큰이 계층을 따라 흐르고, 컴포넌트별 디자인 토큰으로 캡슐화됩니다.
Global Tokens
브랜드가 정의한 원시 값. 컬러 팔레트 16종 + Primary 팔레트, 간격, 반지름, 그림자.
Semantic Tokens
용도에 맞게 매핑된 토큰. Background, Text, Border, Support.
Component Tokens
컴포넌트별 디자인 토큰. variant·상태별 스타일 캡슐화.