SYNB DESIGN SYSTEM · 0.1.0

작은 규칙으로 만드는
일관된 화면.

블루그레이, 명확한 위계, 가벼운 인터랙션.
synb 서비스가 함께 사용하는 기본 UI입니다.

컴포넌트 보기 GitHub

01 / FOUNDATION

기본 요소

색상

Pretendard · 400—700

읽기 편한 크기와 간결한 위계

본문은 14px, 보조 정보는 12px. 숫자도 같은 글꼴로 표현합니다.

가나다 ABC 0123456789 · 128,640 · 99.98%

가Aa

02 / COMPONENTS

작은 구성 요소

버튼

주요 동작은 잉크색으로 강조합니다.

입력

프로젝트 이름업데이트 알림

선택 목록

전체 항목

상태

정상확인 필요오류업데이트

진행률68%

03 / PATTERNS

서비스에 담기는 모습

연결된 서비스

기본 테마

synb.cloud허브열기

cv.synb.cloud프로필열기

status.synb.cloud모니터링열기

카드에는 테두리와 그림자를 넣지 않고 배경색으로 영역을 나눕니다.

04 / GET STARTED

적용하기

공통 스타일을 불러오고 필요한 컴포넌트 클래스를 붙입니다.

<link rel="stylesheet" href="/synb-ui/styles.css">
<script src="/synb-ui/theme.js"></script>

<button class="synb-button" data-variant="primary">
  저장
</button>

토큰과 사용 방법은 GitHub 저장소에서 관리합니다.

작은 규칙으로 만드는일관된 화면.