@cadian/ui

CADian Design System — React component library.

한국형 엔터프라이즈 CAD 플랫폼 CADian 의 디자인 시스템 (정확함 · 절제 · 신뢰). 53+ 컴포넌트, 120+ 디자인 토큰, Pretendard / Montserrat 폰트, flat (no-shadow) 톤. 100% 자체 구현.

Install

npm install @cadian/ui

peerDependencies: react >= 18 · react-dom >= 18 — 그 외 의존 0.

Quick Start

// 1. 토큰 (CSS 변수) import — 한 번만, 앱 entry 에서
import '@cadian/ui/styles/tokens.css';

// 2. 컴포넌트 사용
import { Button, Input, Card, Heading } from '@cadian/ui';

export default function App() {
  return (
    <Card pattern="feature" padding="default">
      <Heading level={2}>저장하기</Heading>
      <Input label="이메일" placeholder="[email protected]" />
      <Button variant="primary">제출</Button>
    </Card>
  );
}

컴포넌트 (30+)

| 그룹 | 컴포넌트 | |---|---| | Foundations | Heading · Divider | | Action | Button | | Form | Input · TextArea · Search · Select · Checkbox · Radio · Switch | | Display | Badge · Tag · Card · Avatar · Tooltip | | Navigation | Pagination · Tabs · Breadcrumb | | Disclosure | Accordion | | Data | Table | | Overlay | Modal | | Feedback | Notification · Alert · Banner | | Layout | LayoutShell · LayoutHeader · LayoutAside · LayoutMain · LayoutFooter · SectionBlock · PageCard · FieldRow | | Brand | Logo · Cover · ColorPalette · DocsHeader · DocsHero · DocsFooter |

상세 사양은 COMPONENTS.md 참고.

디자인 룰 (non-negotiable)

| # | 카테고리 | 룰 | |---|---|---| | 01 | Color | Brand #E43D4F + semantic 4종 외 신규 색 금지 | | 02 | Font | Pretendard / Montserrat 외 폰트 금지 | | 03 | Spacing | 4px grid (4·8·12·16·20·24·32·48·64·80) 외 금지 | | 04 | Radius | 2·4·6·8·12·16·25·9999 외 금지 | | 05 | Shadow | 전면 금지 — depth = border + translateY | | 06 | Motion | 150 / 200 / 300ms ease-out 외 금지 | | 07 | Icon | inline SVG (Lucide stroke 2px) · 이모지 / Unicode 금지 | | 08 | Hover row | Red-tinted #FEF2F2 · gray hover 금지 | | 09 | Focus | 항상 visible · 4px brand 20% ring | | 10 | API 명명 | 영문 prop (한국어 prop 금지) · forwardRef + displayName |

디자인 토큰

CSS 변수 단일 출처: @cadian/ui/styles/tokens.css.

:root {
  /* Brand */
  --cd-bg-brand: #e43d4f;
  --cd-bg-brand-hover: #a61b2a;
  --cd-bg-brand-soft: #feecee;
  --cd-color-brand-100: #fef2f2;  /* row hover */

  /* Text */
  --cd-text-primary: #1e1e1e;
  --cd-text-placeholder: #808080;
  --cd-text-disabled: #aeaeae;

  /* Border */
  --cd-border-default: #c4c4c4;
  --cd-border-strong: #1e1e1e;
  --cd-color-neutral-ef: #efefef;

  /* Surface */
  --cd-bg-surface: #ffffff;
  --cd-color-surface-2: #f7f8fa;

  /* Radius (8 단계) */
  --cd-radius-4: 4px;
  --cd-radius-6: 6px;
  --cd-radius-12: 12px;
  --cd-radius-16: 16px;
  --cd-radius-full: 9999px;

  /* Space (4px grid) */
  --cd-space-4 ... --cd-space-24;

  /* z-index */
  --cd-z-dropdown: 900;
  --cd-z-modal: 1000;
  --cd-z-toast: 1100;
  --cd-z-tooltip: 1200;
}

토큰 추가 절차: CONTRIBUTING.md

Browser support

| Browser | 최소 버전 | |---|---| | Chrome / Edge | 88+ | | Safari | 14+ | | Firefox | 78+ |

backdrop-filter (DocsHeader sticky), aspect-ratio, CSS gap 사용.

Docs site

• 디자인 가이드 · 컴포넌트 카탈로그: design.cadian.com
• 로컬 dev: npm run dev → http://localhost:5174

License

MIT · CADian Inc.