Get Started — HORON Design System

Get Started

HORON 디자인 시스템은 하나의 토큰 소스에서 웹 컴포넌트와 문서 사이트의 값을 함께 냅니다. 아래 절차대로 설치하고, 토큰을 생성하고, 컴포넌트를 가져다 쓰면 됩니다.

무엇인가요

HORON의 UI는 중성 백본 + 단일 액센트로 정리됩니다. 표면과 텍스트는 sand 무채색 램프 하나를 쓰고, gold는 포커스 링과 링크, 하이라이트에만 절제해 씁니다. 버튼의 채움색은 잉크입니다. 이 규칙은 토큰에 값으로 들어 있고, 컴포넌트는 그 값만 참조합니다.

토큰 정본은 @horon-ai/tokens 하나입니다. 이 패키지가 웹용 CSS (theme.css)를 내기 때문에, 컴포넌트와 문서 사이트의 색·간격·타이포가 어긋나지 않습니다.

설치

terminal

# 저장소 루트에서
bun install
bun run tokens        # packages/tokens/theme.css 생성
bun run storybook     # http://localhost:6006

웹에서 쓰기

엔트리에서 @horon-ai/react/globals.css를 한 번 불러오고, 컴포넌트는 배럴 또는 하위 경로로 가져옵니다. Tailwind CSS v4를 쓰는 프로젝트라면 같은 스타일시트를 그대로 공유할 수 있습니다.

example.tsx

import { Button, Card, CardHeader, CardTitle } from "@horon-ai/react";
import "@horon-ai/react/globals.css";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>제목</CardTitle>
      </CardHeader>
      <Button variant="outline">취소</Button>
    </Card>
  );
}

앱에서 확인하기

저장소의 앱은 모두 같은 컴포넌트 레이어를 소비합니다. 문서 사이트는 apps/site, 웹 데모 앱은 apps/playground, 컴포넌트 미리보기는 apps/storybook입니다.

terminal

bun run site          # 문서 사이트 → http://localhost:4321
bun run playground    # 웹 데모 앱
bun run storybook     # Storybook → http://localhost:6006

패키지 경계

컴포넌트는 @horon-ai/react 하나에만 있고, 앱은 그것을 소비합니다. 정적 검사는 oxlint가 맡습니다.

packages/react — @horon-ai/react, @horon-ai/tokens만
apps/site, apps/playground, apps/storybook — @horon-ai/react, @horon-ai/tokens만
스타일 값은 전부 @horon-ai/tokens의 theme.css에서 읽습니다.

다음 단계

Foundations — 색, 타이포, 간격, 반경, 모션, 유리 표면의 값과 규칙
Components — 75개 컴포넌트의 프리뷰와 코드 예시
Storybook — 모든 상태와 변형을 직접 조작