Get Started

무엇인가요

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

토큰 정본은 @horon/tokens 하나입니다. 이 패키지가 웹용 CSS (theme.css)와 네이티브용 hex·숫자를 함께 내기 때문에, 웹과 앱의 색·간격·타이포가 어긋나지 않습니다.

설치

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

웹에서 쓰기

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

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

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

네이티브에서 쓰기

앱 레이어는 @horon/app입니다. 같은 토큰을 StyleSheet 값으로 소비하므로 웹과 색·간격이 일치합니다. 두 레이어는 서로를 import 하지 않습니다.

import { Button, Card, CardTitle, Text } from "@horon/app";

export function Screen() {
  return (
    <Card>
      <CardTitle>제목</CardTitle>
      <Text variant="bodySm" tone="muted">설명</Text>
      <Button>확인</Button>
    </Card>
  );
}

import 경계

두 레이어를 섞으면 경계 규칙에 걸립니다. 정적 검사는 oxlint가 맡습니다.

• packages/app, apps/native — @horon/app, @horon/tokens만
• packages/web, 웹 앱 — @horon/web, @horon/tokens만
• 예외는 Storybook 하나입니다. 두 레이어를 함께 렌더하는 미리보기 도구입니다.

다음 단계

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