본문으로 건너뛰기
@axe/ui · Design System

디자인은 한 곳에서,
모든 스택으로

토큰 · 컴포넌트 · layout chrome 을 한 SSOT 로. React 가 아니어도 같은 markup, 같은 화면 — docs · cortex · frame · hive · matrix · blueprint 가 이 언어를 공유합니다.

v0.21.2React + CSS-only 듀얼Light · DarkWCAG AA
사용법 보기문서⌘K 명령 팔레트
Principles

세 가지 결정이 전부를 정한다

나머지는 토큰이 알아서 — 페이지를 만들 때 색·간격·폰트를 다시 고르지 않습니다.

무채색에 가까운 구조층
Light와 Dark의 gray ramp를 낮은 chroma로 고정합니다. 배경·레일·보더가 브랜드색을 띠지 않아 장시간 쓰는 화면의 밀도가 안정됩니다.
브랜드와 기능색을 분리
AXE 와인은 로고·서명처럼 정체성이 필요한 곳에만 씁니다. 링크와 포커스는 clear blue, 성공은 phthalo green, 주의는 scarf orange가 맡습니다.
한·영 혼용이 1급 시민
본문 16px 고정 + keep-all, mono 는 한글=ASCII 2× 너비 (Sarasa Fixed K) — ASCII 박스아트까지 정렬 보장.
Tokens

Color

저채도 12-step 구조 램프 + 역할이 분리된 브랜드·기능·상태 토큰.

1
2
3
4
5
6
7
8
9
10
11
12
--brand-claret
브랜드 와인 · 로고/서명
--palette-green
프탈로 그린 · success
--palette-blue
청아한 블루 · interaction
--palette-orange
머플러 오렌지 · warning
--accent
기능 강조 · clear blue
--cta
Primary 행동 — ink 인버전
--success
--warning
--danger
--info
elevation 도 토큰
--shadow-xs…xl 5단 (key + ambient 2-layer 레시피), 포커스 링은 --ring / --ring-danger 한 곳에서 — 손으로 8군데 복사하던 것을 흡수했습니다.
Tokens

Typography

본문 16px 고정(한글 가독 기준) · 문서 헤딩은 ±10% 컴파운딩 · 랜딩은 별도 display 티어.

text-display-lg한글 · Aa48~80 / 디스플레이 (랜딩 hero)
text-display-md한글 · Aa40~64 / 디스플레이
text-display-sm한글 · Aa32~48 / 디스플레이
text-5xl한글 · Aa23.4~28.3 / 문서 hero · fluid
text-4xl한글 · Aa21.3~25.8 / h1 · fluid
text-3xl한글 · Aa19.4~23.4 / h2 · fluid
text-2xl한글 · Aa21.3 / h3
text-xl한글 · Aa19.4 / h4
text-lg한글 · Aa17.6 / lead 단락
text-base한글 · Aa16 / 본문 (고정 — 한글 가독 기준)
text-sm한글 · Aa14.4 / UI label
text-xs한글 · Aa12.96 / caption · meta
display 페이스var(--font-clash)
Clash Display — Aa Gg Rr 한글은 Pretendard

첫 paint 뒤 공식 Fontshare API가 500/600만 직접 전달합니다. 도착 전·실패 및 한글 glyph는 Pretendard가 받아 혼용 디스플레이가 됩니다. 기본 헤딩 페이스는 여전히 Pretendard, Clash는 --font-clash 를 명시한 자리만.

Tokens

Spacing · Motion

4px 그리드 10단 + radius 7단 + 모션 vocabulary — 전부 변수, 매직 넘버 0.

Spacing — 4px 그리드
space-1
space-2
space-3
space-4
space-5
space-6
space-7
Motion — 스프링까지 토큰

--duration-fast/base/slow/slower × --ease-out / --ease-spring. 진입은 .axe-reveal (CSS-only, 지원 브라우저는 scroll-driven) — 이 페이지의 카드들이 그 데모입니다. prefers-reduced-motion 전역 클램프.

Radius 위계
컨트롤 6px → 카드 10px → 다이얼로그·팔레트 16px — 표면이 클수록 곡률도 큰 optical 규칙.
Components

컴포넌트 갤러리

전부 .axe-* 클래스 기반이라 CSS-only 소비자(layer · gate · cortex · frame)도 같은 모양.

아래는 대표 예시입니다. 전체 75개 컴포넌트 모듈의 props · CSS 클래스 · a11y · 예시 문서는 /components 에서.

Buttons

Inputs

Forms — Combobox · Slider · ToggleGroup · Seg · Switch · Checkbox · Radio · Calendar

Combobox — 검색 가능한 선택 (controlled)
Slider — 범위 입력
60%
ToggleGroup — single (정렬, 해제 가능)
ToggleGroup — multiple (서식)
Seg — 세그먼트 컨트롤
Switch · Checkbox
RadioGroup — 단일 선택
Calendar — 단일 날짜 선택
2026년 8월
일
월
화
수
목
금
토

ContextMenu — 우클릭 메뉴

이 영역을 우클릭하세요 — 컨텍스트 메뉴

HoverCard — @-멘션 미리보기

아래 멘션에 마우스를 올려보세요 (hover 또는 키보드 focus).

Collapsible — 단일 disclosure (필터 패널 · 더 보기)

한 트리거 ↔ 한 영역의 show/hide. 묶음 disclosure 스택은 Accordion 을 사용.

상태: 진행중서비스: frame마일스톤: M2담당: 미지정

단일 show/hide — 필터 패널 / “더 보기” 토글용. 여러 항목을 묶어 하나씩 여닫는 스택은 Accordion 을 쓰세요.

Toggle — 단일 두-상태 누름 (별표 · 음소거)

하나의 on/off 누름 버튼. 묶음은 ToggleGroup, 폼 on/off 값은 Switch, 단일 필수 선택은 Seg 를 사용.

Cards · Callouts · Skeleton

frame
회계 backend — append-only 원장, MCP 54 도구.
magnet
hover 해보세요 — lift + elevation (interactive).
완료
백업이 정책에 따라 합산되었습니다.
주의
git push origin main 직접 사용 금지 — axe ship 으로 release-gate 통과 후 배포.

Table

서비스포트관리도구 수
frame3710 / 3711Docker (blue/green)54
hive3810 / 3811Docker (blue/green)22
streamstdio + SSEper-process40

Prose — 마크다운 본문 래퍼

frame 의 회계 원장은 append-only 입니다. 이미 기재된 분개를 수정하지 않고, 반전 분개(reverse_journal) 후 재기재합니다 — K-GAAP 추적성 요구와 부합.

Components

Mono · ASCII 정렬

상: 본문 폰트(비례폭) → 깨짐 · 하: Sarasa Fixed K (한글 = ASCII 정확히 2×) → 12행 픽셀 정렬.

BEFORE — Pretendard (proportional)
┌────────────────────────────────────────────────────────────────┐
│  AXE LABS — multi-tenant platform                              │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│   blueprint    : AI-native workspace (Next.js + Claude SDK)    │
│   frame        : 회계 backend (Postgres + MCP)                 │
│   stream       : S&OP MCP (sales · inventory · settlement)     │
│   magnet       : 마케팅 자동화 MCP (Meta / Naver / Threads)    │
│   vault        : Self-host Vaultwarden + Microsoft SSO         │
│   index        : 딜 파이프라인 · IC 산출물 색인 layer          │
│                                                                │
└────────────────────────────────────────────────────────────────┘
AFTER — Sarasa Fixed K (self-host woff2)
text
┌────────────────────────────────────────────────────────────────┐│  AXE LABS — multi-tenant platform                              │├────────────────────────────────────────────────────────────────┤│                                                                ││   blueprint    : AI-native workspace (Next.js + Claude SDK)    ││   frame        : 회계 backend (Postgres + MCP)                 ││   stream       : S&OP MCP (sales · inventory · settlement)     ││   magnet       : 마케팅 자동화 MCP (Meta / Naver / Threads)    ││   vault        : Self-host Vaultwarden + Microsoft SSO         ││   index        : 딜 파이프라인 · IC 산출물 색인 layer          ││                                                                │└────────────────────────────────────────────────────────────────┘
shiki — 서버 사이드 하이라이트 (클라이언트 JS 0)
src/tools/post_journal.ts
// MCP tool 정의 — frame 회계 backendimport { tool } from "@anthropic-ai/sdk";export const post_journal = tool({  name: "post_journal",  description: "분개 1건을 frame 의 append-only 원장에 기재",  input_schema: {    type: "object",    properties: {      entity: { type: "string", enum: ["AXEC", "AXEV"] },      lines: { type: "array", minItems: 2 }    },    required: ["entity", "lines"]  }});
Components

AI-first

채팅 · 도구 호출 · 명령 팔레트 — LLM 이 작업 표면인 제품을 위한 일급 컴포넌트.

Chat — 한글 IME Enter 처리 포함
USER
frame MCP 도구 중 분개 관련 도구 알려줘.
AI
분개 관련 도구는 post_journal · reverse_journal · get_journal · list_journals 4가지입니다. 원장이 append-only 라 수정 대신 reverse 후 재기재합니다.
↵ 보내기 · ⇧↵ 줄바꿈
Command Palette — WAI-ARIA combobox
검색창을 열면 컴포넌트 인덱스를 불러옵니다.
Toast
Chrome

AppShell — 페이지 골격도 SSOT

이 문서 제품은 280px 탐색 · max-width 작업면 · 280px 컨텍스트의 고정된 3패널 셸을 사용합니다.

data-shell attribute 하나로 variant 분기 — styling 은 100% CSS 라 Rust(maud) · Python(jinja) 서비스도 같은 markup 으로 동일 chrome 을 가져갑니다. variant 별 폭은 --app-shell-sidebar-w · --app-shell-toc-w · --app-shell-gutter · --app-shell-topbar-h · --app-shell-subnav-h 5개 변수로만 노출됩니다.

design.axelabs.ai에서는 가운데 grid track이 남는 폭을 받되 실제 문서 캔버스는 68rem, 넓은 Workbench는 76rem으로 제한합니다. 1440px 미만에서는 우측 컨텍스트가, 1024px 미만에서는 좌측 탐색도 Sheet로 전환되어 중앙 작업면을 우선합니다. 두 Sheet는 ESC·focus trap·background inert를 공유합니다.

multi-stack markup
<div class="axe-app-shell" data-shell="docs">  <div class="axe-app-shell__topbar">    <!-- 3-슬롯 평탄화: left=로고 · items=항목 · right. 좁은 폭은 좌우 drawer -->    <nav class="axe-topnav">      <div class="axe-topnav__left">…로고…</div>      <div class="axe-topnav__items">        <a class="axe-topnav__item" aria-current="page" href="…">원칙</a>      </div>      <div class="axe-topnav__right">…</div>    </nav>    <!-- ≤1023px: left nav 가 topnav 밑 disclosure 로 — 무JS(details) 동작 -->    <details class="axe-app-shell__subnav">      <summary class="axe-app-shell__subnav-summary">…chevron…메뉴</summary>      <div class="axe-app-shell__subnav-panel">        <nav class="axe-sidebar">…</nav>        <div class="axe-app-shell__subnav-toc">…toc…</div>      </div>    </details>  </div>  <div class="axe-app-shell__main">    <aside class="axe-app-shell__sidebar">      <nav class="axe-sidebar">…</nav>    </aside>    <main class="axe-app-shell__content">…</main>    <aside class="axe-app-shell__toc">…</aside>  </div>  <div class="axe-app-shell__footer">    <footer class="axe-footer">…</footer>  </div></div>
TopNav + NavMenu — entity 선택 · 계정 메뉴 통일

같은 NavMenu 컴포넌트가 데이터만 달리해 두 용도로 재사용됩니다 — 좌측은 작업 대상 entity 셀렉터(현재 선택 = accent), 우측은 계정 메뉴(하단 구분선 + 빨간 로그아웃). 로고는 .axe-topnav__brand (Clash Display) 입니다.

Chrome

Layout primitives

Stack · Cluster · Grid · Container — gap 은 spacing scale 과 1:1, 매직 px 금지.

Stack — 수직 흐름
첫째둘째셋째
Cluster — 수평 wrap
CSS-only 등가물
.axe-stack--gap-4 · .axe-cluster--gap-2 · .axe-grid--auto — React 밖에서도 동일.
html
<!-- React 없는 소비자 (cortex maud · jinja) — 같은 클래스, 같은 화면 --><div class="axe-stack axe-stack--gap-4">  <div class="axe-cluster axe-cluster--gap-2 axe-cluster--justify-between">    <span class="axe-badge axe-badge--accent">LIVE</span>    <div class="axe-seg" role="group" aria-label="기간">      <button class="axe-seg__btn" aria-pressed="true">월</button>      <button class="axe-seg__btn">분기</button>    </div>  </div>  <div class="axe-grid axe-grid--auto axe-grid--gap-3" style="--axe-grid-min: 220px">…</div></div>
Documents

문서 템플릿 — IC Memo · LP Letter

AXE 발신 문서를 .axe-doc CSS-class HTML 로 — 표 variants · 서버 SVG 차트 · 투자구조 다이어그램까지 화면과 jinja 렌더가 같은 markup, A4 @page 로 브라우저 인쇄→PDF.

AXE·LABS
Investment Committee Memo
CONFIDENTIAL

Northwind Robotics Series A 투자 검토

창고 자동화 — 협동로봇 풀스택

회사Northwind Robotics
작성일2026-05-29
작성자김파트너
상태Final
IC 검토전원
대체—
권고 · RecommendationConditional · Grade A−리드 조건부 승인 — CP-1(핵심 고객 2곳 PoC 계약) 충족 시 집행.
Pre-money
₩320억
투자금액
₩60억
Post ₩368억
지분
16.3%
Base IRR
38%
MoM 4.2x
확률가중 IRR
31%
↑61% · ↓−12%

Executive Summary

창고 자동화 시장은 인건비 상승과 이커머스 물동량 증가로 구조적 성장 국면에 있으며, Northwind 는 협동로봇 하드웨어와 제어 소프트웨어를 함께 제공하는 풀스택 접근으로 도입 장벽을 낮춥니다. 본 투자는 시리즈 A 리드로 참여합니다.

시장

국내 물류 자동화 TAM 은 연 15% 성장 추세이며, 중견 3PL 의 자동화 침투율은 아직 낮아 초기 진입 여지가 큽니다.

제품 · 기술

자체 모션 플래너와 안전 인증을 확보했고, 기존 WMS 와의 연동 어댑터가 차별점입니다. 하드웨어 BOM 의 2차 벤더 확보가 진행 중입니다.

리스크 관리

ID리스크관리 방안트리거
R1핵심 고객 집중파일럿 3곳으로 분산Top1 매출 비중 50%↑
R2하드웨어 BOM 상승2차 벤더 확보매출총이익률 35%↓

부록 A — 재무 · 거래 구조

요약 손익단위: 억원
구분2024A2025A2026E
매출62118210
매출원가(38)(67)(112)
매출총이익245198
판매관리비(31)(44)(71)
영업이익(7)727
매출 · 매출총이익 (억원)
매출과 매출총이익 추이 — 2024A 62/24, 2025A 118/51, 2026E 210/98 (억원)0501001502002502024A2025A2026E62118210245198
  • 매출
  • 매출총이익
매출과 매출총이익 추이 — 2024A 62/24, 2025A 118/51, 2026E 210/98 (억원)
구분매출매출총이익
2024A6224
2025A11851
2026E21098
ARR 시나리오 (억원)
ARR 시나리오 — Base 2028 290억 vs Downside 132억010020030020242025202620272028
  • Base
  • Downside
ARR 시나리오 — Base 2028 290억 vs Downside 132억
구분BaseDownside
20241818
20254235
20269664
202718098
2028290132
투자 후 지분
투자 후 지분 구성 — AXE Fund I 16.3%16.3%AXE 취득지분
  • 창업자 · 52.3%
  • ESOP · 8.0%
  • 시드 투자자 · 12.4%
  • AXE Fund I · 16.3%
  • 공동투자 · 6.5%
  • 기타 · 4.5%
투자 후 지분 구성 — AXE Fund I 16.3%
구분값
창업자52.3%
ESOP8.0%
시드 투자자12.4%
AXE Fund I16.3%
공동투자6.5%
기타4.5%
Cap table (투자 후)단위: %
주주지분율
기존 주주
창업자52.3
ESOP8.0
시드 투자자12.4
신규 투자자
AXE Fund I1)16.3
공동투자 · 기타11.0
합계100.0
  • 1) 투자목적회사(SPC) 경유 — 구조는 부록 A-5 참조.
주요 조건 비교
항목경쟁 Term AAXE 제안창업자 희망
Pre-money₩350억₩320억₩400억
투자금액₩40억₩60억₩60억
이사회참관 1이사 1 + 참관 1참관 1
청산우선권1.5x 참가1.0x 비참가1.0x 비참가
투자구조
투자구조 — LP 가 AXE Fund I 에 출자, 펀드가 SPC 를 통해 신주 48억·구주 12억 인수출자GP 출자 1%출자 100%신주 인수₩48억구주 매입₩12억LP 출자자AXE GP업무집행조합원AXE Fund IGP: AXE GP투자목적회사(SPC)Northwind Robotics기존주주
투자구조 — LP 가 AXE Fund I 에 출자, 펀드가 SPC 를 통해 신주 48억·구주 12억 인수
출발도착내용
LP 출자자AXE Fund I출자
AXE GPAXE Fund IGP 출자 1%
AXE Fund I투자목적회사(SPC)출자 100%
투자목적회사(SPC)Northwind Robotics신주 인수 · ₩48억
투자목적회사(SPC)기존주주구주 매입 · ₩12억
김파트너
Managing Partner
이파트너
Partner
AXE Labs · CONFIDENTIAL · 무단 배포 금지

IC Memo 의 부록 A(2페이지)가 데이터 비주얼의 살아있는 명세입니다 — 재무표 variants(--financial 합계 위 단선·아래 이중선, 행그룹·소계·괄호 음수), DocBarChart · DocLineChart · DocDonut · DocDiagram 은 전부 서버 SVG (클라이언트 JS 0, 인쇄 선명). 축 tick 과 표시 문자열은 호출자가 주는 resolved-spec 경계라 jinja 매크로(_viz.html.jinja)가 같은 산술로 byte-동일 SVG 를 냅니다 — golden fixture 가 drift 를 기계적으로 차단합니다.

Python (jinja) — 같은 차트, 같은 markup
{# Python 파이프라인 — React 와 byte-동일 SVG (golden fixture 강제) #}{% import "_viz.html.jinja" as viz %}{{ viz.bar_chart({  "id": "rev", "title": "매출 추이", "caption": "매출 (억원)",  "labels": ["2024A", "2025A", "2026E"],  "series": [{"label": "매출", "values": [62, 118, 210]}],  "ticks": [0, 50, 100, 150, 200, 250]}) }}{{ viz.diagram({  "id": "structure", "title": "투자구조", "cols": 3,  "nodes": [{"id": "fund", "label": "AXE Fund I", "kind": "fund", "col": 1, "row": 0},            {"id": "target", "label": "대상회사", "kind": "target", "col": 1, "row": 1}],  "edges": [{"from": "fund", "to": "target", "label": "신주 인수", "kind": "new"}]}) }}
Adoption

사용법

React 는 패키지 import, 그 외 스택은 CSS 채널 — 두 경로 모두 같은 화면.

React (blueprint 등)
// React 소비자 — versioned package importimport { AppShell, Button, Card, Stack } from "@axe/ui";import "@axe/ui/bundle.css";      // token + .axe-* flat bundleexport default function Page() {  return (    <AppShell variant="dashboard" topbar={…} sidebar={…}>      <Stack gap={5}>…</Stack>    </AppShell>  );}
CSS-only 채널
React가 아니면 package 내부 파일을 골라 복사하지 않습니다. axe-ui.consumer.json에 managed output·font base·compatibility를 선언하고 axe-ui-export --config axe-ui.consumer.json으로 CSS·theme·font·OFL·lock을 한 번에 생성합니다. cortex(maud)와 문서 jinja가 같은 .axe-* markup을 씁니다.

더 깊은 채널

개별 컴포넌트 문서, CSS-only 소비자가 의존하는 클래스 계약, 그리고 에이전트가 읽는 기계가독 스냅샷.

전체 컴포넌트 문서 → /components클래스 계약 → /contract기계가독 → /llms.txt/docs.json
Adoption

서비스별 채택 (실측 2026-07-25)

desired v0.21.2과 deployed vendor를 분리해 표시합니다. 라이브러리 SoT = src/lib/VERSION, 소비자 증빙 = package version 또는 axe-ui.lock.json.

소비자스택소비 층버전 · 시점상태
axelabs 홈 · design · app/matrix · app/cortexNext RSC직접 import (HEAD)항상 최신최신
layerFastAPI + JinjaCSS-only (.axe-* 직접, build_bundle.py)0.7.1 · 2026-07-10 (src/lib@d70a5ad)이관 대상
gateRust axum + maudCSS-only (include_str! 번들 · 폰트 self-host · light-dark 폴백)origin/main 0.8.0 · 2026-07-11이관 대상
docs.axelabs.aiNext + NextraCSS-only (sync-axe-ui.mjs)v0.21.2 · 2026-07-25내부 mirror
blueprintNextCSS 전량 + 선택 React 컴포넌트/hooks vendor0.8.0 · 2026-07-11이관 대상
cortex (maud 서비스)Rust axum + maudCSS 5그룹 (sync-axe-ui.sh)미상 (벤더 스탬프 없음)스탬프 없음
framePython 서버렌더CSS-only (layer 산출물 통복사 · sync-axe-ui.sh)origin/main 0.5.0이관 대상
D-ui-7 전달 계약
공급자 버전은 src/lib/VERSION에서만 전진하고 app manifest · release manifest · CHANGELOG.md · 페이지 배지가 함께 검증됩니다. 그러나 기존 서비스의 vendor 상태는 자동으로 바뀌지 않습니다. React 소비자는 설치 package, CSS-only 소비자는 axe-ui.lock.json의 version·content SHA가 실제 배포 증빙입니다.
검색창을 열면 컴포넌트 인덱스를 불러옵니다.