Astryx (Meta 디자인 시스템)

Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다.

YEAR
2024
BY
Meta Platforms
MOOD
미니멀 · 따뜻한 · 신뢰감
표본

이 스타일의 기본형

버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.

  • PRIMARY#15110C
  • SECONDARY#EDE7DB
  • ACCENT#15110C
  • BG#F8F4ED
  • SURFACE#FFFFFF
취급 표시
  • 둥근 모서리
  • 가는 테두리
  • 가는 아이콘 선

표본

이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.

버튼

입력과 토글

배지

중립강조긍정

탭

스탯과 차트

2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.1월 42, 2월 48, 3월 45, 4월 56, 5월 61, 6월 58, 7월 69, 8월 76

여덟 달의 지표 흐름을 담은 표본 차트입니다.

아바타와 아이콘

김서이하박지윤채+1
검색별점확인번개지구잠금

카드

기본 카드

서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.

강조 카드

강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.

브랜드 랜딩 데모 크게 보기

무드와 이웃

밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
  • 미니멀
  • 따뜻한
  • 신뢰감

함께 보면 좋은 스타일

Material Design구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.Material Design와 비교하기
Fluent Design System마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다.Fluent Design System와 비교하기
Human Interface Guidelines (HIG)애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.Human Interface Guidelines (HIG)와 비교하기
Carbon Design SystemIBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.Carbon Design System와 비교하기

어디에 쓰나

실제로 쓰는 곳

  • Meta 오픈소스 생태계 (facebook/astryx)
  • StyleX 기반 Meta 계열 제품 UI

사용 사례

  • 멀티 테마를 지원해야 하는 SaaS 제품
  • 다크모드 자동 대응이 필요한 웹 앱
  • AI 코딩 도구와 협업하는 컴포넌트 기반 개발
  • React + StyleX 기반 대규모 프론트엔드
  • 브랜드 무드를 자주 바꾸는 캠페인성 서비스

이런 프로젝트에 맞습니다

  • 테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트
  • React 기반 대규모 제품의 디자인 토큰 표준화
  • AI 에이전트와 함께 UI를 생성·유지보수하는 팀
  • 절제된 웜톤 미니멀 무드의 콘텐츠·도구형 서비스

이런 프로젝트에 권합니다

더 읽기

원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.

역사와 배경

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 마이그레이션, 자연어 페이지 빌드)
장점과 한계

장점

  • 시맨틱 토큰 + light-dark() 덕분에 다크모드를 별도 코드 없이 자동 지원
  • 테마 팩 교체만으로 전체 무드 전환 — 앱 코드 수정 불필요
  • StyleX 원자 CSS로 런타임 오버헤드 없이 정적 스타일 추출
  • CLI codemod로 버전 업그레이드·마이그레이션 자동화
  • 'Working with AI' 공식 문서 등 AI 협업까지 고려한 설계

한계

  • 2024년 공개된 신생 시스템으로 커뮤니티·레퍼런스가 아직 적음 (v0.x)
  • StyleX 중심 워크플로라 기존 CSS 파이프라인 팀은 학습 곡선 존재
  • 기본 neutral 테마가 절제된 모노크롬이라 강한 브랜드 컬러 표현에는 커스텀 필요
컬러 시스템

웜 크림 바디(#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
설계 제약

반드시 포함

  • 시맨틱 토큰 기반 스타일링 (색·간격·반경 모두)
  • body→surface→card 서피스 계층에 따른 시각적 깊이
  • 상호작용 요소 12px, 컨테이너 16px의 radius 위계
  • 라이트/다크 자동 대응 구조
  • 4px 그리드에 정렬된 타이포·간격

하지 말 것

  • 색상·크기 하드코딩 금지 — 테마 독립성이 깨져 테마 팩·다크모드가 오작동
  • 컴포넌트가 커버하는 영역에서 원시 HTML 사용 금지 (Components over primitives)
  • 호버 반응을 지연시키는 애니메이션 금지 — 상호작용이 사용자 동작보다 늦으면 안 됨
  • 출처·목적지와 모순되는 방향의 모션 금지

모션 — 표준 이징 cubic-bezier(0.24,1,0.4,1) 하나로 통일 — 빈번한 상호작용은 fast(175ms), 레이아웃 변화는 medium(410ms), OS 모션 감소 설정 존중

접근성

모든 컬러 토큰이 라이트/다크 쌍으로 정의되어 두 모드 모두에서 텍스트 대비를 보장하며, OS의 모션 감소(prefers-reduced-motion) 설정 존중을 모션 가이드라인에 명시합니다. disabled 전용 텍스트·아이콘 토큰으로 상태 구분도 명확합니다.

자주 묻는 질문

Astryx (Meta 디자인 시스템)이란 무엇인가요?

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 등이 있습니다.

이 스타일로 만들어야 한다면

빌더스게이트가 디자인부터 개발까지 맡습니다.

담아두면 브리프에 그대로 실립니다

제작 문의