탐색
개요

디자인 시스템

차분한 표면, 잘 맞는 컨트롤, 명확한 문서로 이루어진 Master 웹사이트의 공유 시각 언어입니다.

브랜드 가이드는 정체성을 정의합니다. 이 안내서는 이를 담는 인터페이스를 다룹니다. 밝은 모드의 Moonstone과 어두운 모드의 Obsidian, 하나의 재질 단계, 높낮이 순서, 예제 프레임 방식을 사용합니다.

작은 문서 작업 공간

작은 프로젝트 어휘

<article class="p-card r-card b(1) b-solid b-line-divider bg-surface-raised fg-text-body">  <p class="m(0) font-mono text-xs fg-brand">FIELD NOTES / 024</p>  <h2 class="mt-sm mb-xs text-xl font-medium fg-text-strong">Room for the details</h2>  <p class="m(0) text-sm">Color, spacing and radius come from three shared project tokens.</p></article>
생성된 CSS
@layer theme {  :root,  :host {    --color-zinc-30: oklch(78% .0025 265);    --color-zinc-70: oklch(39.8% .0028 265);    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-30: oklch(72.87% .1468 249.3);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white));    --color-text-link: light-dark(var(--color-blue-60), var(--color-blue-30))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-xl: 1.25rem;    --text-xs: var(--font-size-xs);    --text-xs--line-height: 1.5;    --text-xs--letter-spacing: 0;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-xl: var(--font-size-xl);    --text-xl--line-height: 1.4;    --text-xl--letter-spacing: -.01em;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }  :root,  :host {    --color-brand: var(--color-text-link);    --spacing-card: 1.5rem;    --radius-card: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .text-xl {    font-size: var(--text-xl);    line-height: var(--text-xl--line-height, normal);    letter-spacing: var(--text-xl--letter-spacing, normal)  }  .text-xs {    font-size: var(--text-xs);    line-height: var(--text-xs--line-height, normal);    letter-spacing: var(--text-xs--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-card {    border-radius: var(--radius-card)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-brand {    color: var(--color-brand)  }  .fg-text-body {    color: var(--color-text-body)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .font-mono {    font-family: var(--font-family-mono)  }  .font-medium {    font-weight: var(--font-weight-medium)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .mt-sm {    margin-top: var(--spacing-sm)  }  .p-card {    padding: var(--spacing-card)  }}
반응형 미리보기와 소스는 같은 프로젝트 토큰 정의를 사용합니다.
--color-brand
var(--color-text-link)
--spacing-card
1.5rem
--radius-card
.75rem

#레이어와 재질

모든 표면은 하나의 단계 위에 있습니다. 캔버스는 트레이를, 트레이는 밝은 스테이지를 담고 시트는 그 위로 떠오릅니다. 움푹 들어간 면은 주변보다 아래에 있습니다. 인터페이스는 단색을 유지하며 색조는 이름이 있는 학습 견본과 상태에만 사용합니다.

캔버스--ui-surface-canvas
트레이--ui-surface-tray
스테이지--ui-surface-stage
시트--ui-surface-sheet
움푹 들어간 면--ui-surface-well
떠 있는 면--ui-surface-float

높낮이

sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay

sink
flat
rise-1
rise-1h
rise-2
rise-3
overlay
각 레이어는 offset과 blur를 두 배로 하고 spread는 안쪽으로 당깁니다. 호버는 반 픽셀 올라가 rise-1h가 되고 누르면 움푹 들어간 면으로 내려갑니다.

동심 반경

3 · 4 · 6 · 8 · 10 · 14, nested by a 4px inset

Tray 14 → sheet 10
3
4
6
8
반경 14의 트레이는 4px 안쪽 여백에 반경 10의 스테이지, 코드 창, 시트를 담으며 반경 8의 메뉴는 반경 4의 항목을 담습니다.

#잘 맞는 컨트롤

컨트롤은 같은 재질과 상태 순서를 공유합니다. 떠 있는 면은 호버 시 반 픽셀 올라가고 누르면 움푹 들어간 면으로 내려갑니다. 선택된 세그먼트는 들어간 트랙 안에서 올라오며 포커스는 항상 보이는 잉크 링으로 표시합니다.

Buttons

Default, primary and quiet; hover lifts, pressing sinks

hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.

Choices and fields

Selected segments rise inside a sunken track; fields float back to the sheet on focus

실제 결과를 알리는 복사

동작 옆 상태는 거부를 포함한 실제 클립보드 결과를 알립니다.

#명확한 읽기 리듬

하나의 예제는 하나의 트레이입니다. 머리글이 이름을, 스테이지가 대상을, 코드 창이 소스와 접힌 Generated CSS를 담고 캡션이 관찰할 내용을 설명합니다. 표와 색인은 자체 프레임을 가집니다.

값을 함께

토큰 / 클래스역할
--color-brand
var(--color-text-link)
An existing semantic color
--spacing-card
1.5rem
Shared card padding
--radius-card
.75rem
Shared card corners
이름, 값, 보충 설명의 시작점을 맞춥니다.

학습용 색상에는 항상 이름을 표시

Context
Subject
Comparison
  • Context
  • Subject
  • Comparison
SupportedStatic
색조는 견본 안에서만 사용하고 범례나 레이블로 각 색조에 이름을 붙입니다.

#전체 컴포넌트 참조

각 페이지는 컴포넌트의 실제 상태, 사이트 사용 위치, 마크업 인터페이스를 보여 줍니다. 작성 안내서는 레이아웃 계약과 전체 레시피 모음을 다룹니다.

01

표면과 프레임 6

02

견본과 주석 11

03

컨트롤 3

04

문서와 근거 17

공유 컴포넌트로 예제를 만들거나 전체 작동 레시피를 살펴보세요.