# Astryx (Meta 디자인 시스템) — 디자인 스타일 가이드
## 기본 정보
- **ID**: astryx
- **카테고리**: design-language
- **연도**: 2024
- **제작자**: Meta Platforms
## 설명
Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다.
## 역사·배경
2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
## 핵심 원칙
- Components over primitives — 원시 HTML보다 컴포넌트를 우선 사용
- Semantic tokens — 색·간격·반경을 외형이 아닌 목적으로 명명
- Theme-agnostic code — 앱 코드가 색상값을 모르므로 테마·다크모드가 자동 동작
- Open interfaces — 모든 프리미티브를 export해 자유로운 조합·확장 허용
## 주요 특징
- 의도 기반 시맨틱 컬러 토큰 (용도로 명명, light-dark() 자동 다크모드)
- neutral·butter·chocolate·gothic·matcha·stone·y2k 7종 테마 팩
- StyleX 원자 CSS 통합 + plain CSS/Tailwind/CSS-in-JS 상호운용
- 4px 그리드 정렬 타입 스케일 (Figtree, 14px × 1.2^step)
- CLI 기반 개발자 도구 (codemod 마이그레이션, 자연어 페이지 빌드)
## 컬러 시스템 가이드
웜 크림 바디(#F8F4ED) 위 화이트 서피스 계층과 니어블랙(#15110C) 모노크롬 강조 — 모든 토큰이 라이트/다크 쌍으로 정의되는 의도 기반 시맨틱 시스템
### 색상 역할
- background: body(#F8F4ED 웜 크림) → surface/card(#FFFFFF) → popover 순의 서피스 계층
- text: primary #15110C(니어블랙), secondary #4E606F(블루그레이), disabled #A4B0BC
- accent: #15110C — 강조조차 모노크롬, accent-muted는 8% 알파 틴트
- semantic: Success #0D8626, Error #E3193B, Warning #E9AF08 — 상태 전용
- data-viz: 블루·주황·보라·초록·핑크·청록 범주형 팔레트 × 5단계 톤
### 색상 제약 조건
- HEX 하드코딩 금지 — 반드시 시맨틱 토큰(--color-text-primary 등)만 사용
- 서피스 계층(body→surface→card→popover) 순서를 건너뛰거나 뒤집지 않음
- 상태색(success/error/warning)과 강조색(accent) 혼용 금지
- 외형 기반 네이밍 금지 — 토큰은 용도를 설명해야 함
### 다크모드 전략
모든 토큰이 라이트/다크 값 쌍으로 정의되고 CSS light-dark() 함수로 자동 전환 — 앱 코드 수정 없이 다크모드 동작
### 대비 요구사항
시맨틱 토큰 레벨에서 라이트·다크 양쪽 모두 텍스트-배경 대비를 보장하도록 값 쌍이 설계됨 (WCAG 준수)
## 타이포그래피 가이드
- **폰트 성격**: Figtree — 둥글고 친근하지만 절제된 기하학적 산세리프 (코드에는 모노스페이스)
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.2 (Minor Third) — 14px 기준 기하급수 스케일
### 타이포그래피 제약
- 폰트 크기·행간 수동 지정 금지 — Display/Heading/Body/Label/Supporting 시맨틱 타입 토큰만 사용
- 라인 박스를 4px 그리드에 정렬해 기준선·간격을 예측 가능하게 유지
- 웨이트는 400(본문)/500(레이블)/600(헤딩)/700(강조) 4단계만 사용
- 행간은 크기별 3단계 — 소 1.5, 중 1.4, 대 1.25
## 하면 안 되는 것 (안티패턴)
- 색상·크기 하드코딩 금지 — 테마 독립성이 깨져 테마 팩·다크모드가 오작동
- 컴포넌트가 커버하는 영역에서 원시 HTML 사용 금지 (Components over primitives)
- 호버 반응을 지연시키는 애니메이션 금지 — 상호작용이 사용자 동작보다 늦으면 안 됨
- 출처·목적지와 모순되는 방향의 모션 금지
## 반드시 포함해야 하는 것
- 시맨틱 토큰 기반 스타일링 (색·간격·반경 모두)
- body→surface→card 서피스 계층에 따른 시각적 깊이
- 상호작용 요소 12px, 컨테이너 16px의 radius 위계
- 라이트/다크 자동 대응 구조
- 4px 그리드에 정렬된 타이포·간격
## 모션 가이드
표준 이징 cubic-bezier(0.24,1,0.4,1) 하나로 통일 — 빈번한 상호작용은 fast(175ms), 레이아웃 변화는 medium(410ms), OS 모션 감소 설정 존중
## 사용 사례
- 멀티 테마를 지원해야 하는 SaaS 제품
- 다크모드 자동 대응이 필요한 웹 앱
- AI 코딩 도구와 협업하는 컴포넌트 기반 개발
- React + StyleX 기반 대규모 프론트엔드
- 브랜드 무드를 자주 바꾸는 캠페인성 서비스
## 추천 프로젝트 유형
- 테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트
- React 기반 대규모 제품의 디자인 토큰 표준화
- AI 에이전트와 함께 UI를 생성·유지보수하는 팀
- 절제된 웜톤 미니멀 무드의 콘텐츠·도구형 서비스
## 장점
- 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원
- 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요
- StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출
- CLI codemod로 버전 업그레이드·마이그레이션 자동화
- 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계
## 단점·한계
- 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x)
- StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재
- 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요
## 실제 사용 제품·서비스
- Meta 오픈소스 생태계 (facebook/astryx)
- StyleX 기반 Meta 계열 제품 UI
## 접근성
모든 컬러 토큰이 라이트/다크 쌍으로 정의되어 두 모드 모두에서 텍스트 대비를 보장하며, OS의 모션 감소(prefers-reduced-motion) 설정 존중을 모션 가이드라인에 명시합니다. disabled 전용 텍스트·아이콘 토큰으로 상태 구분도 명확합니다.
## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [fluent-design](https://ui.buildersgate.com/styles/fluent-design)
- [human-interface-guidelines](https://ui.buildersgate.com/styles/human-interface-guidelines)
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #15110C
- secondary: #EDE7DB
- accent: #15110C
- background: #F8F4ED
- surface: #FFFFFF
- text: #15110C
- textSecondary: #4E606F
- border: #CCD3DB
### 헤더
- background: #F8F4ED
- textColor: #15110C
- accentColor: #15110C
### 타이포그래피
- fontFamily: Figtree, Inter, sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 4px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 2px rgba(21,17,12,0.05)
- md: 0 2px 6px rgba(21,17,12,0.07)
- lg: 0 6px 16px rgba(21,17,12,0.09)
- xl: 0 12px 32px rgba(21,17,12,0.12)
### Border Radius
- none: 0
- sm: 8px
- md: 12px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #CCD3DB
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 175ms cubic-bezier(0.24, 1, 0.4, 1)
### 애니메이션
- duration: 175ms
- easing: cubic-bezier(0.24, 1, 0.4, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=outlined / hoverEffect=none
- 인풋: style=outlined / focusEffect=border
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Astryx (Meta 디자인 시스템)이란 무엇인가요?
A: Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다. 2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
### Q: Astryx (Meta 디자인 시스템)의 핵심 디자인 원칙은 무엇인가요?
A: Astryx (Meta 디자인 시스템)의 핵심 원칙은 Components over primitives — 원시 HTML보다 컴포넌트를 우선 사용, Semantic tokens — 색·간격·반경을 외형이 아닌 목적으로 명명, Theme-agnostic code — 앱 코드가 색상값을 모르므로 테마·다크모드가 자동 동작, Open interfaces — 모든 프리미티브를 export해 자유로운 조합·확장 허용입니다.
### Q: Astryx (Meta 디자인 시스템)은 어떤 프로젝트에 적합한가요?
A: Astryx (Meta 디자인 시스템)은 멀티 테마를 지원해야 하는 SaaS 제품, 다크모드 자동 대응이 필요한 웹 앱, AI 코딩 도구와 협업하는 컴포넌트 기반 개발, React + StyleX 기반 대규모 프론트엔드, 브랜드 무드를 자주 바꾸는 캠페인성 서비스, 테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트, React 기반 대규모 제품의 디자인 토큰 표준화, AI 에이전트와 함께 UI를 생성·유지보수하는 팀, 절제된 웜톤 미니멀 무드의 콘텐츠·도구형 서비스 등의 프로젝트에 적합합니다.
### Q: Astryx (Meta 디자인 시스템)의 장단점은 무엇인가요?
A: 장점으로는 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원, 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요, StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출, CLI codemod로 버전 업그레이드·마이그레이션 자동화, 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계이 있습니다. 단점으로는 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x), StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재, 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요이 있습니다.
### Q: Astryx (Meta 디자인 시스템)에서 색상은 어떻게 사용하나요?
A: 웜 크림 바디(#F8F4ED) 위 화이트 서피스 계층과 니어블랙(#15110C) 모노크롬 강조 — 모든 토큰이 라이트/다크 쌍으로 정의되는 의도 기반 시맨틱 시스템 색상 역할은 background: body(#F8F4ED 웜 크림) → surface/card(#FFFFFF) → popover 순의 서피스 계층, text: primary #15110C(니어블랙), secondary #4E606F(블루그레이), disabled #A4B0BC, accent: #15110C — 강조조차 모노크롬, accent-muted는 8% 알파 틴트입니다. 주의사항: HEX 하드코딩 금지 — 반드시 시맨틱 토큰(--color-text-primary 등)만 사용, 서피스 계층(body→surface→card→popover) 순서를 건너뛰거나 뒤집지 않음.
### Q: Astryx (Meta 디자인 시스템)에 어울리는 폰트 스타일은 무엇인가요?
A: Astryx (Meta 디자인 시스템)에는 Figtree — 둥글고 친근하지만 절제된 기하학적 산세리프 (코드에는 모노스페이스) 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 크기·행간 수동 지정 금지 — Display/Heading/Body/Label/Supporting 시맨틱 타입 토큰만 사용, 라인 박스를 4px 그리드에 정렬해 기준선·간격을 예측 가능하게 유지.
### Q: Astryx (Meta 디자인 시스템) 디자인에서 하면 안 되는 것은 무엇인가요?
A: Astryx (Meta 디자인 시스템)에서 피해야 할 것: 색상·크기 하드코딩 금지 — 테마 독립성이 깨져 테마 팩·다크모드가 오작동, 컴포넌트가 커버하는 영역에서 원시 HTML 사용 금지 (Components over primitives), 호버 반응을 지연시키는 애니메이션 금지 — 상호작용이 사용자 동작보다 늦으면 안 됨, 출처·목적지와 모순되는 방향의 모션 금지.
### Q: Astryx (Meta 디자인 시스템)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Astryx (Meta 디자인 시스템)을 적용한 대표적인 제품·서비스로는 Meta 오픈소스 생태계 (facebook/astryx), StyleX 기반 Meta 계열 제품 UI 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=astryx
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=astryx&merged=true
Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다.
연도
2024
제작자
Meta Platforms
2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
Astryx
7 Theme Packs · StyleX
META
핵심 원칙
1
Components over primitives — 원시 HTML보다 컴포넌트를 우선 사용
2
Semantic tokens — 색·간격·반경을 외형이 아닌 목적으로 명명
3
Theme-agnostic code — 앱 코드가 색상값을 모르므로 테마·다크모드가 자동 동작
Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다. 2024년 Meta가 오픈소스로 공개한 디자인 시스템으로, 사내 원자 CSS 라이브러리 StyleX를 기반으로 합니다. 0.1.0에서 @xds에서 @astryxdesign으로 리브랜딩했고, 자연어로 페이지를 구성하는 'astryx build' 등 AI 시대의 개발 워크플로를 적극 반영하며 발전하고 있습니다.
Astryx (Meta 디자인 시스템)의 핵심 디자인 원칙은 무엇인가요?
Astryx (Meta 디자인 시스템)의 핵심 원칙은 Components over primitives — 원시 HTML보다 컴포넌트를 우선 사용, Semantic tokens — 색·간격·반경을 외형이 아닌 목적으로 명명, Theme-agnostic code — 앱 코드가 색상값을 모르므로 테마·다크모드가 자동 동작, Open interfaces — 모든 프리미티브를 export해 자유로운 조합·확장 허용입니다.
Astryx (Meta 디자인 시스템)은 어떤 프로젝트에 적합한가요?
Astryx (Meta 디자인 시스템)은 멀티 테마를 지원해야 하는 SaaS 제품, 다크모드 자동 대응이 필요한 웹 앱, AI 코딩 도구와 협업하는 컴포넌트 기반 개발, React + StyleX 기반 대규모 프론트엔드, 브랜드 무드를 자주 바꾸는 캠페인성 서비스, 테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트, React 기반 대규모 제품의 디자인 토큰 표준화, AI 에이전트와 함께 UI를 생성·유지보수하는 팀, 절제된 웜톤 미니멀 무드의 콘텐츠·도구형 서비스 등의 프로젝트에 적합합니다.
Astryx (Meta 디자인 시스템)의 장단점은 무엇인가요?
장점으로는 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원, 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요, StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출, CLI codemod로 버전 업그레이드·마이그레이션 자동화, 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계이 있습니다. 단점으로는 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x), StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재, 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요이 있습니다.
Astryx (Meta 디자인 시스템)에서 색상은 어떻게 사용하나요?
웜 크림 바디(#F8F4ED) 위 화이트 서피스 계층과 니어블랙(#15110C) 모노크롬 강조 — 모든 토큰이 라이트/다크 쌍으로 정의되는 의도 기반 시맨틱 시스템 색상 역할은 background: body(#F8F4ED 웜 크림) → surface/card(#FFFFFF) → popover 순의 서피스 계층, text: primary #15110C(니어블랙), secondary #4E606F(블루그레이), disabled #A4B0BC, accent: #15110C — 강조조차 모노크롬, accent-muted는 8% 알파 틴트입니다. 주의사항: HEX 하드코딩 금지 — 반드시 시맨틱 토큰(--color-text-primary 등)만 사용, 서피스 계층(body→surface→card→popover) 순서를 건너뛰거나 뒤집지 않음.
Astryx (Meta 디자인 시스템)에 어울리는 폰트 스타일은 무엇인가요?
Astryx (Meta 디자인 시스템)에는 Figtree — 둥글고 친근하지만 절제된 기하학적 산세리프 (코드에는 모노스페이스) 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 크기·행간 수동 지정 금지 — Display/Heading/Body/Label/Supporting 시맨틱 타입 토큰만 사용, 라인 박스를 4px 그리드에 정렬해 기준선·간격을 예측 가능하게 유지.
Astryx (Meta 디자인 시스템) 디자인에서 하면 안 되는 것은 무엇인가요?
Astryx (Meta 디자인 시스템)에서 피해야 할 것: 색상·크기 하드코딩 금지 — 테마 독립성이 깨져 테마 팩·다크모드가 오작동, 컴포넌트가 커버하는 영역에서 원시 HTML 사용 금지 (Components over primitives), 호버 반응을 지연시키는 애니메이션 금지 — 상호작용이 사용자 동작보다 늦으면 안 됨, 출처·목적지와 모순되는 방향의 모션 금지.
Astryx (Meta 디자인 시스템)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Astryx (Meta 디자인 시스템)을 적용한 대표적인 제품·서비스로는 Meta 오픈소스 생태계 (facebook/astryx), StyleX 기반 Meta 계열 제품 UI 등이 있습니다.