Design System Setup

#/start의 Brand Studio는 브랜드를 다듬는 유일한 곳입니다 - 로고, 색상, 타입, 나머지 토큰과 보관하는 파일까지. 여기서 한 번 설정하면 모든 도구, 페이지, 내보내기는 검토가 아니라 구조적으로 그것을 따릅니다.

변경 사항은 적용하는 즉시 앱 전체에 걸쳐 실시간으로 미리보기되므로, 확정하기 전에 색상이나 폰트가 어디에나 반영되는 모습을 볼 수 있습니다. 모든 처리는 온디바이스입니다: 브랜드 파일과 토큰은 기기를 벗어나지 않으며(구글 폰트를 선택하면 동의 대화상자 이후 한 번 해당 패밀리를 구글에서 가져옵니다), 브랜드는 하나의 브랜드 팩 파일로 이동합니다.

이곳은 편집기입니다. 대시보드는 거울일 뿐입니다. 대시보드(#/d)의 Design system 탭은 브랜드를 읽기 전용으로 보여줄 뿐이며, 편집은 여기 #/start에서 합니다. 나중에 색상을 바꾸고 싶다면 Brand Studio로 돌아오세요.

The rooms

스튜디오는 옆쪽 레일에 나열된 룸들로 구성됩니다 - 단계가 아닙니다. 번호도 없고, 서로에게 의존하지도 않으며, 어느 곳에 먼저 도착해도 정당합니다:

Overview - 허브예요. 지금 존재하는 것을 한눈에 보여주며, 각 룸으로 들어가는 문이 있어요.
Colours - 색상을 하나씩 추가하고, 역할을 지정하거나 하나로부터 전체 팔레트를 생성해요.
Type - 앱, 도구, 모든 내보내기가 참조하는 네 가지 서체.
Logos - 사용자의 마크를 모든 방향과 처리 방식으로.
Tokens - 모서리 반경, 간격, 그림자 등 시스템의 나머지.
Files - 브랜드가 보관하는 이미지, 오디오, 모션 파일.

휴대폰에서는 같은 목록이 헤더 아래 고정된 가로 칩 스트립이 됩니다. 룸을 전환해도 아무것도 다시 로드되지 않습니다 - 편집기는 모든 패널을 마운트된 상태로 유지하며 요청한 것만 보여줍니다.

룸 딥링크는 #/start?area=<key>로 만듭니다. 키는 overview, color(URL에는 미국식 철자를 씁니다), type, logos, tokens, catalogue(Files 룸 - 패널 키는 영구 계약이므로 URL은 예전 이름을 유지합니다), versions입니다. ?tab=은 오래전부터 쓰인 별칭으로 여전히 동작하므로 예전 링크와 북마크도 계속 작동하며, 인식되지 않는 값은 죽는 대신 Overview를 엽니다.

레일 하단에는 하나의 룸이 아니라 디자인 시스템 전체에 속하는 동작들이 고정되어 있습니다:

Add from… - 소스 선택기로, 파일, PDF, 이미지, 폰트, 웹사이트로부터 브랜드를 가져올 때 사용해요. 아래 Bring a brand in을 참조하세요.
Tray - 스캔이 찾아냈지만 아직 확정하지 않은 후보들이에요. 스캔이 실제로 무언가를 유지할 때까지 숨어 있으며, 그럴 때 개수가 표시돼요; 해당 행에서 Add를 누르기 전까지는 브랜드에 아무 영향도 없어요.
Export - 디자인 시스템 전체를 하나의 LollyBrand-….lolly로 작성해요.
Tokens (.json) - 순수한 디자인 토큰 문서만 따로, 저장소나 빌드 단계, 다른 토큰 도구용으로 써요.
Restore brand settings - 가져오기나 브랜드 설정 교체 이전에 저장된 체크포인트로 돌아가요.
Versions - 디자인 시스템의 이름 붙인 사본을 게시, 활성화, 복원해요. 게시할 자신의 것이 생기기 전까지는(또는 ?area=versions 링크가 직접 요청하기 전까지는) 숨겨져 있어요.

signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KB직접 확인하기 서명된 파일 받기Try it in the app

Overview

Overview는 처음 도착하는 룸이며, 두 가지 얼굴을 갖고 있어요.

아직 아무것도 선택하지 않았다면 Make it yours라고 표시돼요. Start from a reference는 로고, 스크린샷, 웹페이지, 디자인 파일을 위한 소스 선택기를 엽니다. Pick a colour, Choose a face, Add a logo는 각각의 기존 컨트롤을 곧바로 엽니다. 어떤 경로든 선택에서 시작해요. 여는 것만으로는 아무것도 기록되지 않아요. Explore the tools는 언제든 이용할 수 있어요.

무언가가 하나라도 자신의 것이 되면, 같은 룸이 가지고 있는 것을 보여주고, 만든 개수가 맨 앞에 나와요. Colours는 디자인 시스템이 가진 색상 수를 보여주고, 표시된 색상 중 상속된 것이 있을 때만 은은한 · N starter를 덧붙여요. 그 옆의 띠에는 먼저 고른 색상이 오고, 이어서 가는 구분선과 흐릿한 스타터 색상이 와요. Type은 역할별로 표시돼요(제목용 Inter, 그 아래 나머지는 Starter · SUSE, SUSE Mono). Logos는 채워진 슬롯 수 또는 Not set을 보여줘요. Tokens는 모서리 반경을 담고 있으며, 옮기기 전까지는 starter로 표시돼요. Files는 라이브러리가 비어 있는 동안 Nothing yet이라고 말해요. 모든 블록은 해당 룸으로 들어가는 문이에요. 여기에는 개수만 있을 뿐 진행률 표시줄도 완료 카드도 전혀 없어요 - 이 스튜디오에서는 아무것도 빚지지 않아요.

Logos

먼저 상단의 드롭 영역에 마크 폴더를 통째로 비워 넣으세요: "Drop marks here, or choose several at once"는 가지고 있는 파일 수만큼 한 번에 받습니다. 각 파일은 형태와 잉크를 기준으로 분석된 뒤 Waiting for a slot 아래에 그 결과를 말해주는 칩으로 대기합니다 - "Looks like the Horizontal primary"처럼 근거가 된 측정값과 함께, 그리고 Place 버튼(해당 슬롯이 이미 채워져 있으면 Replace)이 붙습니다. 확신이 없을 때는 칩이 그 사실을 분명히 밝히고 대신 여덟 개를 모두 나열하는 Change slot을 제공합니다. 무언가를 누르기 전까지는 아무것도 배치되지 않습니다.

이 대기열 주변에서 두 가지 일이 일어납니다. 여백이 남는 마크는 먼저 트림 제안을 받습니다 - 응답하거나 Escape를 누르면 원본 파일이 그대로 들어갑니다. 그리고 어떤 마크가 비어 있는 형제 슬롯을 채울 수 있는 경우, 룸은 파생된 mono 또는 reverse 버전을 Generated로 표시된 별도 칩으로 제안하며, 다른 방식으로 그 슬롯을 채우면 다시 사라집니다.

그 아래에는 모든 마크가 결국 들어가는 그리드가 있습니다 - 방향 × 처리 슬롯입니다:

Orientations: Horizontal(워드마크 + 심볼을 한 줄로)과 Vertical(세로로 쌓아 정사각형과 세로 공간에 적합).
Treatments: Primary, Primary reverse(어두운 배경용), Mono(단색), Mono reverse.

이렇게 여덟 개의 선택적 슬롯이 있습니다. 슬롯을 클릭해 PNG, SVG, JPEG 또는 WebP를 추가하고, 채워진 슬롯을 클릭하면 교체합니다. 모든 슬롯은 선택 사항이며 모든 것이 이 기기에 남습니다.

signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KB직접 확인하기 서명된 파일 받기

Custom marks - 브랜드가 자체적으로 이름 붙인 마크(아이콘, 문장, 파비콘 등)는 Custom marks 아래에 추가해요. 이름을 정하고 파일을 선택하세요.
More identities - 서브 브랜드, 제품이나 이벤트는 자체 로고 세트를 온전히 가질 수 있어요. + Add another logo로 추가하고 이름을 붙이세요. 기본 세트는 단순히 "Your logo"예요.
Upload an SVG and Lolly reads its colours. 새 설치본에서는 로고에서 기본 색상을 조용히 지정하고 그 사실을 알려요. 기존 브랜드에서는 대신 색상을 제안으로 제시해요 - "Found in the logo: #…"와 그 옆의 Use as primary 버튼으로 - Colours 룸에서 받아들이거나 무시할 수 있어요.

Colours

이 룸은 디자인 시스템과 함께 자라나요. 아직 필요하지 않은 것은 페이지에 나타나지 않으므로, 첫 방문은 결정 하나로 끝나고 나머지는 팔레트가 자라나는 대로 따라와요.

첫 번째 색상

자체 색상이 없는 디자인 시스템은 가운데 정렬된 한 열로 시작해요: Start with one colour, 큰 라이브 칩, 필드, 그리고 역할과 셰이드, 인쇄 설정은 시스템이 자라면서 등장한다는 조용한 한 줄이에요.

칩이 곧 피커예요. 누르면 스튜디오 고유의 OKLCH 카드가 칩 위에 열리며, 필드가 담고 있는 내용(이름, 휠, 네 개의 다이얼, 알파, Stored as)을 이어받아요. 하단에는 Cancel과 Add colour가 있어요. 다이얼을 드래그하면 칩이 칠해지고 그 자리에서 필드가 다시 쓰이지만, Add colour를 누르기 전까지는 디자인 시스템에 아무것도 반영되지 않아요.
필드는 어떤 표기법이든 받아들여요 - #e0452b, rgb(224 69 43), oklch(58% .19 32), 또는 평범한 색상 이름이에요 - 색상 목록 전체를 넣으면 하나씩 추가할 수 있는 칩들의 줄이 돼요.
그 옆에는 문이 두 개 더 있어요. 스포이트(있는 브라우저에서는)는 화면에서 색상을 가져오고, From an image는 이 기기의 스크린샷이나 사진을 읽어 찾아낸 색상을 제안해요.
Add는 절대 비활성화되지 않아요. 필드에 읽을 수 있는 것이 없으면 피커가 열려요 - 보통 아무것도 입력하지 않고 눌렀다는 뜻이니까요. 해석할 수 없는 텍스트라면 죽은 버튼 대신 필드 아래에 그 사실을 알리는 문구가 나와요.

첫 번째 색상이 기본색이 되고, 추가에 응답한 칩이 그 사실을 알려줘요 - "이제 기본색은 선명한 바이올렛이에요" - 그 옆에 Fine-tune이 있어요.

signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KB직접 확인하기 서명된 파일 받기

스타터

스타터는 선택된 것이 아니라 앱과 함께 처음부터 딸려 온 모든 것을 가리키는 말이에요. 새로 설치하면 색상이 전혀 없어요: 있는 것은 하나의 중성색 램프, 종이를 통과한 잉크뿐이라 누구도 아무것도 결정하지 않은 상태에서도 표면, 텍스트, 가는 선이 그려질 수 있어요. 이 중성색들은 발판 같은 것이라 색상으로 세지 않고 팔레트 패널에도 그리지 않아요. Tokens 룸에 Neutrals · 시작값 · 9로 존재하며, Open을 누르면 Colours 패널에서 접힌 태그 그룹 하나로 보여줘요(#/start?area=color&group=neutral).

같은 말이 모든 룸에 걸쳐 나타나요: 스타터 색상 위에 놓인 역할은 "시작값 Paper가 대신 표시돼요"라고 표시되고 피커는 Choose…를 제공해요; 스타터 서체는 스타터 태그를 달고 색조가 없어요; 스타터 모서리 반경은 Overview에 표시돼요. 상속된 소재는 절대 점선 테두리로 그려지지 않아요, 여기서는 점선 테두리가 드롭 대상을 뜻하기 때문이에요.

팔레트가 자라면서

사용자의 색상은 넓은 화면에서는 In context 미리보기 옆에 나란히 있고, 작은 화면에서는 그 위에 쌓여요. 미리보기는 사용자의 팔레트를 사용한 포스터, 차트, 인터페이스 카드를 보여줄 수 있어요. 스타터 색상은 추가한 색상과 별도로, 자체 접을 수 있는 그룹에 남아 있어요.

개별 색상이나 셰이드 세트를 추가하고 역할을 지정한 다음, 필요할 때 고급 섹션을 여세요. 색상 차트, 그라디언트, 다운로드 컨트롤은 팔레트와 함께 있어요.

signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KB직접 확인하기 서명된 파일 받기

역할 - 도구가 읽어 들이는 것

Roles는 스와치 위에 놓이는 레이어예요 - 모든 도구와 내보내기에서 어떤 색상이 각 역할을 맡는지를 정해요. 역할은 선택 사항이에요(느슨한 세 가지 색상만 있고 역할이 없는 디자인 시스템도 완전히 유효해요). 어떤 스와치든 역할을 맡을 수 있으며 대비 값은 표면을 기준으로 측정되고 APCA가 우선이에요.

행은 세 가지 표시 방식 중 하나로 나타나므로, 이 띠는 누구도 내리지 않은 결정을 주장하지 않아요:

그 역할을 맡는 자체 색상이 있으면 완전한 강도로 표시돼요;
*시작값 Paper가 대신 표시돼요 - 옅게 표시되며 피커에는 Choose…*가 있어요;
↳ 프라이머리를 따름 - 그 역할은 자체 색상이 아니라 프라이머리를 통해 해석돼요.

팔레트에 셰이드가 생기면, 이 띠는 도구가 읽을 수 있는 일곱 개 슬롯 전체로 늘어나요: Primary, Secondary, Surface, Text, Muted, Edge, On primary예요. On primary는 프라이머리에서 유도되며 Derived로 표시되고 피커가 없어요.

앱 자체의 강조색은 토큰이 아니라 취향이에요. 기본적으로 인터페이스는 디자인 시스템을 따르고, 크롬 강조색은 기본색을 사용해요. 이는 프로필의 외관 설정 중 하나예요 - 인터페이스가 디자인 시스템을 따라요 - 이를 끄면 크롬은 중립 색상으로 남아요. 도구, 캔버스, 내보내기는 어느 쪽이든 영향을 받지 않으며, 폰트와 모서리 반경은 이 설정이 켜져 있든 꺼져 있든 디자인 시스템을 따라요.

The expert wings

구성 미리보기와 색상 역할 아래에는 접힌 네 개의 섹션이 있어요. 원하는 것을 여세요. 각각은 #/start?area=color&focus=<wing>으로 딥링크할 수 있고, 룸이 다른 무엇을 보여주고 있든 그것을 열어요:

Explore shades & harmonies(focus=generate) - 색상 하나에서 전체 셰이드 세트로. 아래에서 설명해요.
Shade curves(focus=curves) - 램프를 지점별로 다시 형성해요. 명도, 채도, 색상 각각 자체 곡선을 가지며 L / C / H로 전환하고, 드래그하는 동안 아래의 셰이드들이 실시간으로 다시 구워져요.
Contrast(focus=contrast) - Contrast-lock은 선택한 배경에 대해 APCA 목표치를 맞추도록 램프의 색조를 다시 조정하되 각 단계는 자신의 색상과 채도를 유지해요. Rotate hue는 램프 전체를 색상환 위에서 통째로 회전시키며 각 셰이드는 명도와 채도를 유지해요.
Print(focus=print) - 인쇄에서 기본색이 어떻게 되는지: 자동 화면 값이거나, 고정된 CMYK 빌드, 또는 지정된 별색 잉크예요.

One colour, a whole palette

Explore shades & harmonies 안에서 Starting colour를 선택하세요. Lolly는 엔진이 다른 곳에서도 쓰는 것과 같은 지각적 색상 수학(OKLCH)을 사용해 어울리는 셰이드를 제안해요. 제안을 조정하려면:

Scheme - Mono, Complement, Analogous 또는 Triad - 보조 색상이 기본 색상과 어떤 관계를 갖는지 설정해요.
Shades - 3에서 20 사이의 슬라이더(기본값 5)로 각 램프가 생성하는 단계 수를 조절해요.
Fine-tune(접힘) - UI intensity(Muted / Deep), Contrast(Comfort / High), Text on brand(Auto / Light / Dark).

시작 색상과 컨트롤을 바꿔도 바뀌는 것은 제안뿐이에요. 셰이드를 클릭하면 그 색상이 추가되고, Add 5 shades를 누르면 그룹 전체가 추가돼요(개수는 Shades 설정을 따라요). 기존 색상과 역할은 그대로 남아요. 실행 취소하면 추가한 내용이 사라져요.

Primary, Neutral, Secondary 행에 제안된 셰이드가 표시돼요. Theme preview를 열면 밝고 어두운 예시와 각각의 대비 값을 살펴볼 수 있어요. 거기서 Neutral이나 Secondary 단계를 선택하면 제안된 테마 기준점을 조정할 수 있어요. 전체 팔레트를 다시 만드는 것은 아래에서 별도로 검토하는 작업으로 남아 있어요.

signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KB직접 확인하기 서명된 파일 받기

팔레트 만들기 (하모니 생성기)

Find matching colours에서 하모니 생성기는 기본색에서 어울리는 강조 색상을 제안해요. 하모니를 선택하세요 - 보색, 인접색, 삼색조, 사색조 또는 유사색(각각 2~5개의 강조색 수와 10°에서 45°까지의 색상 각도를 가져요) - 각 후보는 자동 생성된 읽기 쉬운 이름과 + Add 버튼과 함께 제공돼요. 하나를 추가하면 그 색상이 즉시 팔레트에 들어가요, 한 번의 클릭이 하나의 토큰이 돼요. In context는 추가한 색상을 샘플 구성 위에서 미리 보여줘요.

signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KB직접 확인하기 서명된 파일 받기

생성된 팔레트 적용하기

제안된 색상이나 셰이드 그룹을 추가해도 나머지 팔레트는 그대로 유지돼요. 완전히 교체하려면 Rebuild the whole palette…를 열고 Preview full rebuild를 누르세요. 검토 화면은 변화를 설명해요: 지정한 대로 유지되는 역할이 몇 개인지, 직접 추가한 색상 중 몇 개가 유지되는지, 셰이드 곡선이 몇 개나 다시 기준점을 잡는지, 인쇄 잠금이 몇 개나 다시 고정되는지, 숨겨진 셰이드가 몇 개나 계속 숨겨져 있는지, 그라디언트 스톱이 몇 개나 색상을 유지하는지예요.

그 카드에서 Apply rebuilt palette를 누르면 적용되고, 취소를 누르면 아무것도 바꾸지 않고 빠져나가요. 실행되고 나면 카드에는 이미 포커스가 맞춰진 Undo가 제공돼요 - 그리고 교체 전에 전체 디자인 시스템의 체크포인트가 저장되므로, "원래대로 되돌리기"는 잃어버린 오후가 아니라 복원 한 번으로 끝나요.

팔레트, 차트, 그리고 각 견본

팔레트는 디자인 시스템의 색상을 접을 수 있는 그룹으로 나열하며, 각 그룹에는 자체 + Add 컨트롤이 있어요. 그룹을 만들고 이름을 바꿔 작업을 정리하세요. 역할이 두 번째 타일을 만드는 일은 절대 없어요: 하나의 토큰은 하나의 타일이며, 역할이 가리키는 타일에는 대신 작은 모서리 표시(P, S, Su, T)가 붙어요. 타일 아래의 Colour chart는 같은 스와치의 두 가지 보기로 펼쳐져요: Wheel(OKLCH 휠 - 점을 드래그해 색을 바꾸거나, 점을 클릭해 편집하거나, 빈 공간을 클릭해 새 스와치를 추가할 수 있어요)과, 표시 가능한 범위가 실제로 어디서 끝나는지 보여주는 Gamut 차트예요. #/start?area=color&focus=chart는 ?wheel이 늘 그래왔듯 이 카드를 바로 열어요.

signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KB직접 확인하기 서명된 파일 받기

signed by Lolly2026-10-21vector SVG529 paths~4.9k nodes161 groups149 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG529 paths~5.4k nodes165 groups174 KB직접 확인하기 서명된 파일 받기

견본을 클릭하면 편집기가 열립니다:

이름 바꾸기.
색상 설정 - 지각적 OKLCH 슬라이더로 피커가 열리며, Hex, HSL, RGB, CMYK 모드를 제공합니다. 값 필드는 활성화된 색공간으로 읽고 또한 쓰므로, 헥스 값을 붙여넣거나 잉크 백분율을 입력할 수 있습니다. CMYK를 입력하면 변환을 통해 화면 색상이 설정된다는 점에 유의하세요 - 정확한 잉크 값을 고정하려면 아래의 인쇄 잠금을 사용하세요.
저장 방식 - 견본이 저장되는 방식을 선택합니다: LCH(기본값 - 지각적이고 넓은 색역을 가지며 편집에 가장 적합), Hex, RGB 또는 HSL. 정확한 레거시 헥스 값을 고정하거나 sRGB 값을 맞춰야 할 때 재정의하세요.
다음으로 사용 - 역할 패널로 돌아가지 않고 이 견본을 브랜드 역할 중 하나에 직접 지정합니다. (역할 자체의 타일에는 이 옵션이 없습니다 - 역할은 역할을 가질 수 없습니다.)
인쇄 대체 값(접힘) - 색상의 인쇄 동작을 잠급니다:
CMYK - 자동에서 잠금으로 전환해 자동 sRGB→CMYK 변환을 정확한 잉크 값(C/M/Y/K, 0–100)으로 재정의합니다.
별색 - 없음에서 설정으로 전환해 견본을 별색에 고정합니다. 이름(예: PANTONE 186 C), 선택적인 북, 잉크가 전혀 잉크가 아닌 경우를 위한 선택적 마감(기본값은 일반 잉크) - 박, 양각 또는 음각, 스팟 니스, 소프트 터치, 또는 다이컷, 접지선, 천공을 지정할 수 있습니다.
다른 색공간에서(접힘) - 같은 개념을 확장한 것으로, 각 행은 이 견본을 표현할 수 있는 색공간이며, 표준 값에서 파생되거나 직접 지정할 수 있고, 직접 지정한 값이 내보내기 시 우선합니다.

이 인쇄 잠금은 CMYK PDF나 TIFF를 내보낼 때 인쇄소가 사용하는 값입니다 - 내보내기를 참고하세요.

견본 삭제는 안전합니다: 파생된 램프 단계와 테마 역할은 숨겨질 뿐이며(기저 토큰이 계속 해석되므로 하위에서 아무것도 깨지지 않습니다), 직접 추가한 색상은 완전히 제거됩니다.

여러 스와치 다루기

각 스와치에는 별도의 드래그 손잡이가 있어요. 드래그하면 같은 그룹 안에서 색상 순서를 바꿀 수 있고, 또는 손잡이에 포커스를 두고 스페이스를 누른 뒤 화살표 키로 옮기고 다시 스페이스를 눌러 놓을 수도 있어요. Escape로 취소돼요. 순서는 스튜디오를 다시 열어도 유지되고, 실행 취소할 수도 있어요. 색상을 그룹 사이에서 옮기려면 스와치 편집기의 Group 컨트롤을 쓰거나, 여러 색상을 선택하고 Move를 쓰세요. 토큰 이름과 역할 참조는 그대로 유지돼요.

팔레트 패널에서의 선택은 하나의 동작이지, 모드가 아니에요. 먼저 눌러야 할 버튼은 없고, 막대는 처음 선택된 타일과 함께 나타났다가 마지막 타일과 함께 사라져요.

패널의 빈 공간을 드래그해 사각형을 그리세요: 닿는 모든 타일이 그룹 경계를 넘어서도 선택에 합류해요. 접힌 섹션은 아무것도 기여하지 않으며, 한 번도 움직이지 않은 드래그는 선택을 해제해요.
Shift-click은 읽는 순서대로 범위를 선택하고, Cmd/Ctrl-click은 타일 하나를 토글하며, 그냥 클릭하면 여전히 그 타일의 편집기가 열려요.
모든 그룹 헤더에는 Select all이 있고, 타일에 포커스가 있는 상태의 Cmd-A는 디자인 시스템이 가진 모든 색상을 선택해요 - 스타터 색상은 절대 포함하지 않아요.
그리드에는 탭 정지점이 하나예요. 화살표로 이동하고, Shift+화살표로 선택을 확장하고, Space로 타일을 토글하고, Delete로 선택을 제거하고, Escape로 해제해요. (화살표는 포커스만 움직여요: 채널을 미세 조정하려면 먼저 l, c, h 중 하나를 누르세요, 읽기값이 그렇게 안내해요.)
터치 화면에서는 사각형이 없어요. 타일을 길게 눌러 선택을 시작한 뒤 탭해서 추가하세요; 그룹별 Select all이 나머지를 처리해요.

막대 자체에는 {n} selected가 표시되고, 이어서 Move to(기존 그룹, 또는 메뉴 안에서 이름 붙이는 새 그룹), Give a role(선택한 색상이 차례로 다음 역할을 맡으므로 타일 네 개를 한 번에 눌러 네 가지 역할을 모두 채울 수 있어요), Download(여섯 가지 팔레트 형식 중 하나로 선택 항목을 내려받기), Copy values(저장된 표기법으로 색상마다 한 줄씩), 그리고 Delete가 나와요. Move to와 Give a role은 팔레트에 옮길 셰이드가 있을 때만 나타나요. Ctrl/Cmd-Z 한 번으로 마흔 개를 옮기기, 역할 순회, 삭제 같은 일괄 작업 전체를 실행 취소할 수 있고, 삭제는 무엇을 남겼는지 알려줘요 - 선택 범위가 이 룸에서 지울 수 없는 타일에도 미칠 수 있기 때문이에요.

그라디언트

선택적인 그라디언트 패널은 팔레트에서 배경과 강조색용 블렌드 토큰을 만들어요. 브랜드에 그라디언트가 필요 없다면 완전히 건너뛰어도 돼요. 각 그라디언트에는 미리보기, 이름이 붙은 스톱(2–8개), 각도가 있어요. 핵심 동작: 스톱은 견본을 참조하므로, 그 견본의 색을 바꾸면 그라디언트도 따라 바뀌어요. 보간은 깔끔한 블렌딩을 위해 OKLCH에서 이루어져요. 스톱을 삭제하면 구간이 줄어들어요.

팔레트를 다른 곳으로 가져가기

팔레트 패널 하단 가장자리에 고정된 떠 있는 필은 전체 팔레트를 디자인 토큰(JSON), CSS 변수, CSS 클래스, SCSS 변수, GIMP 팔레트(.gpl) 또는 Adobe Swatch Exchange(.ase)로 다운로드해요 - 그래서 브랜드가 Illustrator, Figma, GIMP나 스타일시트에 바로 들어갈 수 있어요. 이 필은 패널의 스크롤 영역 바깥에 있어서 팔레트를 아무리 스크롤해도 제자리를 지키고, 팔레트에 셰이드가 생기면 나타나요. (애셋에서도 팔레트를 다운로드할 수 있어요.)

타입

이 룸도 같은 방식으로 자라나요. 자체 서체가 없는 상태에서는 카드 하나와 결정 하나뿐이에요: 기본은 오늘 그 역할을 맡고 있는 서체로 읽기 좋은 크기로 설정되고, 이름 옆에 스타터 태그가 붙으며, 채워진 글꼴 스타일 선택 버튼과 "선택하기 전까지는 아무것도 설치되지 않아요."라는 문구가 있어요. 카드 아래에는 "제목, 코드, 이탤릭체는 선택하기 전까지 프라이머리를 따라요"가 있고, Choose them separately를 누르면 이번 방문 동안 나머지 세 카드가 나타나요.

signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KB직접 확인하기 서명된 파일 받기

서체 하나를 선택하면 룸이 네 개의 역할 카드, Fonts 목록, 실시간 견본으로 펼쳐져요. 이 네 가지 서체는 앱, 도구, 모든 내보내기가 실제로 읽어 들이는 것들이에요:

기본 - 본문, 버튼, 모든 도구.
제목 - h1/h2용 디스플레이 서체.
코드 - 코드와 데이터용 모노스페이스 서체.
이탤릭 - 강조, 인용, 부연 설명을 위한 진짜 이탤릭 서체.

제목, 코드, 이탤릭체는 지정하기 전까지 각각 기본 서체로 대체되므로, 폰트 하나만 쓰는 브랜드는 여기서 아무것도 결정할 필요가 없어요.

색이 칠해져 있다는 건 사용자가 선택했다는 뜻이에요. 카드에 색이 칠해지는 건 그 서체를 설치했을 때뿐이에요. 스타터 서체는 팔레트의 상속된 그룹이 두르는 것과 같은 스타터 태그를 옅은 색조로, 색 없이 둘러요. 그리고 아무도 선택하지 않은 역할은 마치 선택된 것처럼 기본 서체의 이름을 반복하는 대신 ↳ 프라이머리를 따름이라고 표시돼요. 버튼은 자신의 서체가 있으면 변경, 그 외에는 글꼴 스타일 선택이라고 표시돼요. 카드에서 무엇을 눌러도 확정되는 건 없어요: 버튼은 그 역할로 범위를 좁힌 비교 스테이지를 열어요.

signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KB직접 확인하기 서명된 파일 받기

비교 스테이지

signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KB직접 확인하기 서명된 파일 받기

이 스테이지는 대화상자가 아니라 룸 안에 인라인으로, 누른 카드 바로 아래에 열려요. 열려 있는 동안 카드들은 역할과 서체만 담은 한 줄 스트립으로 접혀서, 휴대폰에서도 첫 화면에 스테이지가 들어와요. Escape를 누르면 취소되고 열었던 카드로 키보드가 돌아가요.

서체를 선택하는 데는 세 번의 클릭이면 돼요:

카드에서 글꼴 스타일 선택을 누르세요.
패밀리 이름을 입력하고 Preview를 누르세요 - 또는 필드 아래의 여섯 개 Pinned 패밀리 중 하나를 한 번 누르세요. 카드는 이미 로딩 중인 모습으로 나타나며, 아직 보지 못한 서체 대신 인터페이스 서체가 대신 보여주는 자리 대신 견본이 들어갈 자리에 스켈레톤 바가 표시돼요.
Use this face를 누르세요.

동의는 딱 한 번, 사용자가 누른 그 순간에만 물어봐요. 미리보기가 처음으로 Google Fonts에 접속할 때, 대화상자가 무슨 일이 일어나는지 알려줘요: Google이 패밀리 이름과 사용자의 IP 주소를 알게 돼요. 그 파일은 이후 이 기기에 보관되어 오프라인으로 쓰여요. 이것이 스튜디오에서 제3자에 접속하는 유일한 단계예요. Google에서 가져오기를 누르면 진행되고, 그 선택은 기억돼요. 취소를 누르면 카드에는 "가져오지 않았어요. Google로 전송된 것이 없어요."라고 표시되고, 그 자리에 살아 있는 Google에서 가져오기가 남아 있어서 마음이 바뀌면 카드에서 한 번만 누르면 돼요. 어떤 카드도 죽은 버튼을 보여주지 않아요: 어떤 상태든 그 카드의 유일한 기본 버튼이 다음에 무엇을 할지 알려줘요.

스테이지에 폰트 파일을 놓으면 곧바로 미리보기가 나타나요 - 내 컴퓨터에서 TTF, OTF, WOFF를 놓는 방식으로, 이미 보유한 라이선스가 있는 기업 서체를 위한 경로예요. 그 드롭 영역이 이 룸에서 유일한 파일 입구예요.

어느 쪽이든 서체는 이 기기에 남아, 앱과 도구, 모든 내보내기에서 렌더링되며, 영구적으로 오프라인으로 작동하고 디자인 시스템 파일과 함께 이동해요 - 렌더링 시점에 아무것도 가져오지 않아요. Google Fonts의 모든 서체는 오픈 라이선스(OFL/Apache/UFL)로 제공돼요.

이 기기의 폰트

Fonts 패널에는 이 기기가 가진 모든 서체와 그것이 맡은 역할이 나열돼요. 추가한 서체는 In the design system 아래에 먼저 나오며, 각각 역할과 삭제 버튼이 있고, Primary를 맡은 것에는 배지가 붙어요. 스타터 서체는 그 뒤에 접힌 한 줄로 이어져요 - Starter · SUSE, SUSE Mono · 선택하기 전까지 Primary와 Code를 담당 - 옅게 표시되고 삭제도 승격도 없는데, 둘 다 누구도 내린 결정이 아니기 때문이에요. Add a face는 범위 제한 없이 같은 비교 스테이지를 열어요.

하단의 Type roles 패널은 각 역할의 실시간 견본을 보여줘요 - 기본 서체로 된 본문과 UI, 상위 제목용 선택적 디스플레이 서체, 강조용 이탤릭, 코드와 데이터용 모노 서체 - 옆에 각각의 패밀리와 상태(Inter, SUSE · starter, SUSE · follows Primary)가 붙어서 전체 세트를 한 번에 확인할 수 있어요.

토큰

코드를 건드리지 않고도 편집할 수 있는 디자인 시스템의 나머지 부분:

signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image490 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image492 KB직접 확인하기 서명된 파일 받기

둥근 모서리 - 앱 전체의 카드, 버튼, 패널이 따르는 단일 반경 슬라이더(0–1.5rem).
Neutrals - 새로 설치할 때 딸려 오는, 종이를 통과한 잉크 램프로, Neutrals · 시작값 · 9로 아홉 단계와 Colours 패널로 가는 Open과 함께 나열돼요. 스타터 중성색을 관리하는 유일한 곳이며, 램프가 생성되는 순간 상속이 아니라 starter 태그가 붙어요.
추가 토큰 - 간격, 크기, 선 두께, 불투명도, 회전, 일반 숫자, 그림자를 추가하고 편집해요. 유형을 고르고 이름을 붙인 뒤(Gutter, Card shadow…) 값을 설정하세요. 이들은 표준 디자인 토큰(DTCG)으로 저장되어 브랜드와 함께 이동해요.

파일

로고를 제외하고 브랜드가 보관하는 파일 - 벡터, 이미지, 오디오, 모션(비디오, Lottie, 애니메이션) 에셋 - 을 여기에 놓으세요. 애셋에 들어가 섹션별로 정리되며, 모든 도구의 에셋 피커에서 바로 사용할 수 있어요. 모든 것이 이 기기에 남아요. (레일은 이 방을 파일이라고 표시하지만, URL 키는 catalogue로 유지돼요. 패널 키는 영구적인 계약이기 때문이에요.)

브랜드 가져오기

레일 하단의 가져오기...를 누르면 2단계 피커가 열립니다. 첫 단계는 형식이 무엇인지가 아니라, 당신이 가진 것이 무엇인지를 묻습니다:

디자인 토큰 또는 디자인 파일 - DTCG나 Tokens Studio JSON, Penpot 프로젝트, 토큰 세트 zip, Lolly 디자인 시스템 팩 또는 SVG.
PDF - 덱이나 가이드라인 파일로, 이 기기에서 색상, 마크, 내장 서체를 읽어요.
로고 또는 스크린샷 - 이미지가 제안 팔레트가 되며, 이 기기에서 읽혀요. 아무것도 업로드되지 않아요. 이건 색상을 읽는 것이지, 그림 속 서체나 레이아웃이 아니에요.
저장된 웹 페이지 - HTML 파일 하나와 그 CSS 파일들을 고르거나, HTML이나 CSS를 붙여넣으세요. 최대 20개 파일, 총 2MB까지예요. 제공된 텍스트만 읽히고, 링크된 리소스는 가져오지 않으며 스크립트는 실행되지 않아요. 이 경로는 확장 프로그램이나 데스크톱 앱 없이도 동작해요.
폰트 파일 - TTF, OTF 또는 WOFF. Type 룸이 열리고 그 서체가 설치돼요.
웹사이트 - 페이지 하나를 색상과 타입 정보로 읽어요. 이 타일은 실제로 페이지를 읽을 수 있는 기기에서만 나타나는데, 아무도 누를 수 없는 기능을 광고하는 비활성 타일은 타일이 아예 없는 것보다 나쁘기 때문이에요. 이 타일이 나타나는 경우 읽는 주체를 명확히 밝혀요: 이 기기의 앱이 직접 가져오거나, 백그라운드 탭에서 사용자 계정으로 로그인한 브라우저 확장 프로그램이 읽어요. URL을 지정하는 것은 필드를 미리 채우는 것일 뿐이에요 - 가져오기 버튼을 누르는 것이 동의이므로, 누군가 보낸 링크만으로는 절대 읽기가 시작되지 않아요.

디자인 파일 소스를 선택하면 두 번째 단계는 아래 카드입니다: 지원되는 형식이 선호 순서대로 아이콘 타일로 앞에 배치되며, 카드 전체가 하나의 드롭 대상입니다 - 카드 어디를 클릭하거나 파일을 드래그해 놓아도 됩니다. 스튜디오에 파일을 바로 놓을 수도 있습니다.

signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images173 KB직접 확인하기 서명된 파일 받기 signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images174 KB직접 확인하기 서명된 파일 받기

각 디자인 파일이 제공하는 것:

Lolly 디자인 시스템 팩(.lolly; 예전 .zip도 여전히 받아들여져요) - 한 단계로 설치돼요;
Penpot 내보내기(.penpot) - 디자인 토큰을 가져와요;
Design Tokens 파일(.json) - W3C DTCG;
Tokens Studio 파일(.json) - Tokens Studio;
일반 SVG(.svg) - Lolly가 색상을 스캔하여 유지할 색상을 고를 수 있게 하며, 첫 번째 색상이 기본색이 돼요.

로고/스크린샷, 웹사이트 또는 저장된 페이지는 Your suggested design system을 열어요. 제안된 색상을 사용한 예시를 보고, 필요하면 다른 Main colour를 선택한 다음 시스템에 이름을 붙이세요. Use this design system을 누르면 생성된 라이트와 다크 팔레트가 적용되고 Overview로 돌아가요. 기존 폰트는 그대로 남아요. 이는 활성 시스템의 색상과 다른 토큰 설정을 대체해요. 먼저 체크포인트 저장이 성공해야 해요; Restore brand settings로 이전 설정을 되돌릴 수 있어요.

Source details and individual choices는 무엇이 읽혔는지, 감지된 폰트 이름, 그리고 미리보기의 텍스트/액션 대비를 보여줘요. 또한 Choose individual items in the tray와 디자인 맥락 다운로드도 제공해요. JSON 보고서에는 관찰 내용, 제안된 토큰, 소스 정보가 담기고, 저장된 HTML/CSS에는 제공된 텍스트의 SHA-256이 포함돼요. 원본 페이지 텍스트는 담기지 않으며 서명된 Content Credential도 아니에요. 폰트 이름은 제안일 뿐이에요: 폰트를 고르고 설치하는 곳은 여전히 Type이에요.

PDF와 다른 디자인 파일 가져오기는 기존 검토 컨트롤을 그대로 써요. Tray에 보관된 항목은 그 소재의 종류를 담당하는 룸을 통해 추가될 때까지 아무것도 바꾸지 않아요.

#/start?source=<kind>는 지정된 소스(file, pdf, image, font, url, page)로 피커를 열고, ?import는 일반 목록으로 열어요.

기기 간 브랜드 이동

레일 하단의 Export는 단일 LollyBrand-….lolly 파일을 작성해요 - 토큰, 폰트, 로고, 테마 설정이 담기며, 다시 가져올 때 검증하는 무결성 매니페스트도 함께 들어가요. 1.0.7 이전 웹 릴리스는 같은 페이로드를 .zip이라고 불렀어요; 이 예전 표기도 여전히 받아들여져요. 옆의 Tokens (.json)은 순수한 디자인 토큰 문서만 단독으로 작성해요: 폰트도, 로고도 없이 토큰만 있으며, 이것이 저장소나 CI 단계, 다른 토큰 도구가 실제로 읽는 것이에요.

다시 가져오는 방법은 가져오기... → 디자인 토큰 또는 디자인 파일(위 참고)이거나, 스튜디오에 드래그 앤 드롭하는 것입니다. 동료가 브랜드를 건네주거나, 두 번째 설치본으로 브랜드를 옮기는 방법이 바로 이것입니다 - 계정도, 클라우드도 필요 없습니다. 대신 명령줄에서 브랜드를 가져오려면 ingest:brand를 참고하세요.

이전 설정 복원하기

레일 하단의 Restore brand settings를 선택하고, 날짜가 붙은 체크포인트를 고른 다음 Restore를 누르세요. 이렇게 하면 활성 브랜드의 색상, 타입 설정, 기타 브랜드 토큰이 복원돼요. 폰트와 이미지 파일은 그대로 남아요.

Lolly는 체크포인트를 적용하기 전에 현재 설정을 Before restore로 저장해요. 그 체크포인트를 선택하면 브라우저를 닫았다가 다시 열어도 복원을 되돌릴 수 있어요. 최신 체크포인트 20개가 이 기기에 보관돼요. 저장소를 읽을 수 없거나 현재 설정을 저장할 수 없으면 대화상자가 문제를 알려주어 다시 시도할 수 있어요.

버전

레일 아래쪽의 Versions는 디자인 시스템이 더 이상 움직이는 표적이 되지 않는 지점이에요. 하나를 게시하면 이 기기에 영구적이고 이름이 붙은 사본이 생겨요: 이후로는 절대 바뀌지 않으므로, 이를 고정한 도구는 항상 같은 것을 그려요. 게시할 것이 생기기 전까지 패널은 숨겨져 있으므로, 한 번도 게시하지 않은 스튜디오는 이 컨트롤을 볼 일이 없어요.

무언가를 누르기 전에 알아야 할 세 가지가 있고, 패널은 누른 뒤가 아니라 누르기 전에 세 가지를 모두 알려줘요.

버전은 영구적이에요. 아직 삭제 기능이 없으므로, 패널은 무엇이 보관되었고 계속 보관된다는 사실을 있는 그대로 알려줄 뿐, 거짓말하는 버튼을 두지 않아요.
삭제된 항목이 호환성 카드에서 가장 먼저 나와요. 추가되거나 변경된 토큰은 알림거리지만, 삭제된 토큰은 도구를 망가뜨리는 원인이므로 가장 먼저, 있는 그대로 이름 붙여 알려요.
게시는 되돌릴 수 없지만, 복원은 되돌릴 수 있어요. Restore latest from this version(이 버전에서 최신으로 복원)은 헤드에 대한 평범한 편집이므로 스튜디오의 실행 취소 스택에 올라가고, 패널은 곧바로 Undo(실행 취소)를 제공해요.

게시만 하기를 선택할 수도 있고, 게시하고 활성화를 선택할 수도 있어요 - 차이는 도구와 앱이 이제부터 그 버전을 따를지, 아니면 계속 최신 편집을 따를지예요. 다시 최신본 따르기를 선택하면 편집하는 순간 모든 변경이 바로 반영돼요. #/start?area=versions로 패널을 바로 열 수 있어요.

브랜드가 고정되어 있을 때

일부 빌드는 SUSE Brand처럼 잠긴 디자인 시스템을 함께 제공해요. 이를 열면 Make an editable copy와 Switch가 있는 읽기 전용 안내가 나와요. 원래의 색상, 폰트, 토큰은 그대로 유지돼요. 잠긴 시스템이 그 기기에서 처음 시스템이었더라도, 사용자 자신의 로컬 시스템은 계속 편집할 수 있어요. Profile에서 Open은 시스템을 선택해 그 스튜디오를 열고, Make a new one은 로컬 시스템을 만들어 이름 필드에 포커스를 둔 채 #/start를 열어요.

다음으로 갈 곳

Lolly 사용하기 - 캔버스, 저장, 프로젝트, 애셋.
디자인 토큰 - 브랜드가 표현되는 토큰 모델.
내보내기 및 형식 - 인쇄 단위, CMYK, 브랜드가 렌더링되는 형식.

룩 찾아보고 비교하기

Overview나 Profile의 디자인 시스템 목록에서 스타일 찾기를 여세요. 이 기기에 저장된 시스템과 재사용 가능한 몇 가지 Lolly 예시를 둘러볼 수 있어요. 이름, 색상 태그, 지정된 폰트로 검색하세요. Closest to my current palette는 측정된 색상 유사도로 정렬하고, 동점이면 일치하는 폰트 패밀리로 순위를 가려요; 품질 점수가 아니에요.

룩 하나를 선택해 검토하거나, 둘을 선택해 비교하세요. 검토 버튼은 작은 화면에서도 이용할 수 있어요. 룩을 선택해도 아무것도 바뀌지 않아요. 이 저장된 시스템 사용은 기존 디자인 시스템 레지스트리를 전환해요. 이 색상 사용하기는 일반적인 체크포인트와 설치 과정을 거쳐 예시를 적용하며, 현재 폰트는 유지해요. Restore brand settings로 이전 룩을 되돌릴 수 있어요.

세부 정보와 디자인 맥락 아래에서, 저장된 시스템에는 편집 가능한 태그 검색과 맥락 다운로드가 있어요. 예시는 Lolly만의 독자적인 색상 레시피를 써요; 원격으로 긁어모은 영감 모음이나 필수 계정 같은 건 없어요.

signed by Lolly2026-10-21vector SVG30 paths~9.3k nodes44 groups106 KB직접 확인하기 서명된 파일 받기Try it in the app

이 비교는 두 팔레트를 함께 보이는 상태로 유지해요. 룩을 검토해도 이 색상 사용하기나 이 저장된 시스템 사용을 선택하기 전까지는 아무것도 바뀌지 않아요.

소스 증거 읽어보기

소스 검토의 선택적 세부 정보는 관찰된 타이포그래피, 간격, 패딩, 모서리 값을 보여줘요. 저장된 HTML/CSS와 네이티브 웹사이트 읽기는 선언 값을 보고하지만, 렌더링된 페이지에서 실제로 쓰이는 값이 아닐 수 있어요. 브라우저 확장 프로그램은 뷰포트와 브라우저 색상 설정과 함께, 보이는 요소의 제한된 표본에서 측정된 스타일을 보고할 수 있어요. 오래된 확장 프로그램은 여전히 선언 값으로 동작해요. 빠진 필드는 관찰되지 않음이라고 표시돼요.

이것들은 관찰 결과이지, 자동 스타일 설정이 아니에요. 폰트 파일은 참조 스캔으로 가져오거나 설치되지 않으며, 소스의 간격이 사용자 자신의 설정을 몰래 대체하지도 않아요. 개수는 표본에서 나타난 횟수를 나타낼 뿐, 신뢰도나 품질이 아니에요.

디자인 시스템에 대해 구성 확인하기

Design에서 Export를 열고 내보내기 전에를 여세요. 이 확인은 렌더링과 같은 유효한 디자인 시스템 버전을 사용해요. 작성된 색상, 토큰 별칭, 폰트 선택, 이미지 에셋 ID를 비교해요. 사용자 지정 값은 의도된 것일 수 있어요; 선언된 브랜드 에셋 밖의 이미지는 검토 항목이지, 금지된 이미지가 아니에요.

구체적인 색상이나 폰트 제안이 있으면, 그 버튼은 딱 그 레이어 하나만 바꿔요. 일반적인 실행 취소로 원래 값으로 되돌릴 수 있어요. 잠기거나 변경된 레이어는 오래된 제안으로 덮어써지지 않아요. 빠진 소스 증거는 일치 여부와 별도로 취급돼요. 렌더링된 대비와 텍스트 레이아웃은 기존에 내장된 확인 기능이 검사해요. 그라디언트, 효과, 중첩된 도구 콘텐츠, 권리, 주관적 품질은 브랜드 비교에서 평가하지 않아요. 확인 작업은 Download를 막지 않아요.

디자인 맥락을 로컬에서 사용하기

디자인 맥락 다운로드에는 토큰 문서, 해석된 색상, 선언된 폰트 패밀리, 에셋 ID, 기록된 경우의 소스 증거, 커버리지, 명시적 규칙이 담겨요. 폰트 파일이나 소유권 증명은 포함되지 않아요. 참조 검토에는 제안된 토큰과 관찰 내용도 포함돼요.

CLI는 서버 없이도 두 다운로드 파일을 모두 읽을 수 있어요:

lolly system import ./lolly-design-context.json
lolly system context --output=design-context.json
lolly system check ./design-inputs.json --file=design-context.json

system check은 boxes 배열이 있는 Design 입력이나 컴파일된 Design 문서를 받아들여요. 구성을 수정하지 않고 제안된 수정 사항을 보고해요. 브라우저 레이아웃이나 렌더링된 대비는 측정할 수 없어요. 기존 MCP 리소스 lolly://design-context는 설정된 로컬 MCP 프로세스를 통해 유효한 시스템의 맥락을 노출해요. 새로운 호스팅 서비스나 API 키는 필요 없어요.

The Brand Studio