Build consistent
interfaces, faster.
Featuring의 프로덕트를 위한 React 디자인 시스템.
1,000개 이상의 디자인 토큰과 30개 이상의 컴포넌트로 일관된 사용자 경험을 만드세요.
직관적인 API 디자인
$css prop과 디자인 토큰으로 타입 안전하고 반응형인 UI를 빠르게 구축하세요.
import { Box, HStack, Typo, 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 variant="primary" size="md">
<Button.Icon><IconSearchOutline /></Button.Icon>
<Button.Text>Search</Button.Text>
</Button>
</HStack>
);
}Why Featuring Design System?
프로덕션 환경에서 검증된 기술 스택으로 구축되었습니다.
Zero-Runtime CSS
Vanilla Extract 기반의 빌드 타임 CSS 생성. 런타임 오버헤드 없이 타입 안전한 스타일링을 제공합니다.
Multi-Brand Theming
Featuring과 DataEffect 두 브랜드 테마를 지원합니다. CSS 파일 하나로 테마를 전환할 수 있습니다.
Responsive-First
$css prop에서 mobile, tablet, desktop, wide 4단계 반응형 브레이크포인트를 네이티브로 지원합니다.
Type-Safe Tokens
TypeScript로 작성된 디자인 토큰. IDE 자동완성과 컴파일 타임 타입 검사로 실수를 방지합니다.
$css Prop System
Rainbow Sprinkles 기반의 $css prop으로 토큰 값과 임의 값을 모두 사용할 수 있는 원자적 스타일링.
3-Layer Token System
Global, Semantic, Color Set 3단계 토큰 구조로 체계적이고 확장 가능한 디자인 시스템.
Packages
세 개의 독립적인 패키지로 구성되어 필요한 것만 선택하여 사용할 수 있습니다.
@featuring-corp/components
Button, Input, Modal 등 30개 이상의 프로덕션 레디 UI 컴포넌트. $css prop으로 토큰 기반 스타일링을 지원합니다.
@featuring-corp/design-tokens
색상, 간격, 타이포그래피, 그림자, 반지름 등 1,000개 이상의 디자인 토큰. CSS 변수로 즉시 사용 가능합니다.
@featuring-corp/icons
327개 시스템 아이콘과 26개 서비스 아이콘. React 컴포넌트로 제공되며 크기와 색상을 자유롭게 조정할 수 있습니다.
3-Layer Token Architecture
체계적인 3단계 토큰 구조로 일관성과 확장성을 동시에 확보합니다.
Global Tokens
브랜드 독립적인 원시 값. 컬러 팔레트, 간격, 반지름, 그림자, 타이포그래피.
Semantic Tokens
용도 기반 토큰. Background, Border, Text, Support 등 UI 맥락에 매핑.
Color Sets
브랜드별 Primary 팔레트. CSS 파일 교체만으로 브랜드 전환.