Design System Setup

#/startにあるBrand Studioは、ブランド(ロゴ、色、書体、その他のトークン、保管するファイル)を形作る唯一の場所です。ここで一度設定すれば、すべてのツール、ページ、エクスポートはレビューによってではなく構造上それに従います。

変更は行うと同時にアプリ全体でライブプレビューされるため、色やフォントを確定する前に、それがあらゆる場所に反映される様子を確認できます。すべてオンデバイスです。ブランドのファイルとトークンがあなたのマシンから外に出ることはありません(Google Fontsを選ぶと、同意ダイアログの後にそのファミリーだけをGoogleから一度取得します)。ブランドは1つのbrand packファイルとして持ち運べます。

これはエディターです。ダッシュボードは鏡です。 ダッシュボード(#/d)のDesign systemタブはブランドを読み取り専用で表示するだけです。編集はここ#/startで行います。後で色を変更したい場合は、Brand Studioに戻ってきてください。

ルーム

スタジオは、側面のレールに並んだ一連のルームで構成されています - 手順ではありません。何にも番号は振られておらず、何も他のものによって制限されておらず、どのルームにたどり着いても正当です。

Overview - ハブです。今何が存在するかを一目で確認でき、各ルームへの入口があります。
Colours - 色を1つずつ追加し、役割を割り当てたり、1色からパレット全体を生成したりします。
Type - アプリ、ツール、すべてのエクスポートが参照する4つの書体です。
Logos - あらゆる向きと処理を施したあなたのマークです。
Tokens - 角の丸み、間隔、影、その他のシステムです。
Files - ブランドが保持する画像、音声、モーションのファイルです。

電話では同じリストがヘッダーの下に固定された横並びのチップ帯になります。ルームを切り替えても何も再読み込みされません - エディターはすべてのパネルをマウントしたままにしており、要求されたものを表示するだけです。

#/start?area=<key>でルームへのディープリンクが可能です。キーはoverview、color(URLではアメリカ式のスペルであることに注意)、type、logos、tokens、catalogue(Filesルーム - パネルキーは永続的な契約なので、URLは旧名のままです)、versionsです。?tab=は同じものを指す長年のエイリアスで、今も解決されるため、古いリンクやブックマークは引き続き機能します。認識されないものはデッドエンドにならず、Overviewを開きます。

レールの下端には、1つのルームではなくデザインシステム全体に属するアクションが固定されています。

Add from… - ファイル、PDF、画像、フォント、ウェブサイトからブランドを取り込むためのソースピッカーです。下記のBring a brand inを参照してください。
Tray - スキャンで見つかったものの、まだ確定していない候補です。スキャンが実際に何かを保持するまでは非表示のままで、保持した場合は件数が表示されます。その行でAddを押すまでは、中の何もあなたのブランドを変更しません。
Export - デザインシステム全体を1つのLollyBrand-….lollyとして書き出します。
Tokens (.json) - リポジトリ、ビルドステップ、他のトークンツール向けの、単独のプレーンなdesign-tokensドキュメントです。
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は最初のルームで、2つの顔を持っています。

まだ何も選んでいない状態では、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)が付きます。確信が持てない場合、チップはその旨を率直に示し、代わりに8つすべてを一覧にしたChange slotを提示します。何かを押すまでは何も配置されません。

そのキューをめぐって2つのことが起こります。余分な余白のあるマークには、まずトリムの提案が示されます - それに回答するか、Escapeを押すと元のファイルがそのまま入ります。また、あるマークが空の兄弟スロットを満たせる場合、ルームは派生したmono版またはreverse版を、Generatedと表示された独自のチップとして提示します。これは、別の方法でそのスロットを埋めると再び消えます。

その下には、すべてのマークが最終的に収まるグリッド - orientation × treatmentのスロットがあります。

Orientations: Horizontal(ワードマーク+シンボルを横一列に)とVertical(縦に積み重ね、正方形や縦長のスペース向け)。
Treatments: Primary、Primary reverse(暗い背景向け)、Mono(単色)、Mono reverse。

これで8つの任意スロットになります。スロットをクリックして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 - ブランド独自の名前を付けたマーク(アイコン、紋章、favicon)をCustom marksの下に追加します。名前を付けてファイルを選ぶだけです。
More identities - サブブランド、製品、イベントは独自のロゴ一式を持てます。+ Add another logoを使って名前を付けてください。メインの一式は単に"Your logo"です。
Upload an SVG and Lolly reads its colours. 新規インストールでは、ロゴからプライマリカラーを静かに設定し、その旨を伝えます。既存のブランドでは、代わりにその色を提案として提示します - Coloursルームで"Found in the logo: #…"と、その横にUse as primaryボタンが表示され、採用するか却下するか選べます。

Colours

このルームはデザインシステムとともに成長します。まだ必要になっていないものはページに現れないため、最初の訪問は1つの決定だけで済み、残りはパレットの成長とともにやってきます。

最初の色

自分の色を持たないデザインシステムは、中央に1列だけの画面で始まります: Start with one colour、大きなライブチップ、フィールド、そしてロール、シェード、印刷設定はシステムが育つにつれて登場するという控えめな一文です。

チップがピッカーです。 それを押すと、スタジオ独自のOKLCHカードがチップの上に開き、フィールドが保持している内容(名前、ホイール、4つのダイヤル、アルファ、Stored as)を引き継ぎます。足元にはCancelとAdd colourがあります。ダイヤルをドラッグするとチップが塗られ、その場でフィールドが書き換わりますが、Add colourを押すまではデザインシステムには何も届きません。
フィールドはどんな表記でも受け付けます - #e0452b、rgb(224 69 43)、oklch(58% .19 32)、あるいはプレーンな色名です - そして色のリストをまるごと入力すると、1つずつ追加できるチップの列になります。
その横にはさらに2つの入口があります。 スポイト(それを持つブラウザでは)は画面から色を取り込み、From an imageはこのデバイス上のスクリーンショットや写真を読み取り、見つかった色を提示します。
Addは決して無効になりません。 フィールドに読み取れるものが何もない場合はピッカーが開きます。これは通常、空のまま押したことを意味します。解析できないテキストの場合は、無効なボタンの代わりに、フィールドの下にその旨を伝える一文が表示されます。

最初の色はprimaryになり、追加に応えたチップがそれを伝えます - "プライマリは今、鮮やかなバイオレットです" - その横には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自分で確認する署名済みファイルを取得

スターター

スターターとは、選ばれたのではなくアプリに最初から付属していたものすべてを指す言葉です。新規インストールには色がまったくありません: あるのは1本のニュートラルランプ、紙を通したインクだけで、誰も何も決めていない段階でも、サーフェス、テキスト、細い罫線が描画されるようにしています。これらのニュートラルは足場のようなものなので、色として数えられず、パレットペインにも描かれません。TokensルームにNeutrals · スターター · 9として存在し、Openを押すとColoursペインで1つの折りたたまれたタグ付きグループとして表示されます(#/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はスウォッチの上に重なるレイヤーで、どの色がすべてのツールとエクスポートでそれぞれの役割を演じるかを決めます。Rolesは任意です(自由な3色だけでrolesを持たないデザインシステムも十分に良いものです)。どのスウォッチにも役割を割り当てられ、コントラストの読み取りは背景に対して測定され、まずAPCAが用いられます。

行は3通りの表示のいずれかで示されるため、ストリップは誰も下していない決定を主張することはありません:

そのロールを担う自分の色があり、フル強度で表示されます;
*スターターのPaperが代わりに表示されています - 控えめな表示で、そのピッカーにはChoose…*があります;
↳ プライマリに従う - そのロールは自分の色ではなく、プライマリを介して解決されます。

パレットにシェードができると、ストリップはツールが読み取れる7つのスロットすべてに広がります: Primary、Secondary、Surface、Text、Muted、Edge、On primaryです。On primaryはプライマリから導出され、Derivedと表示され、ピッカーはありません。

アプリ自身のアクセントカラーはトークンではなく設定です。 既定では、インターフェースはデザインシステムに従い、クロームのアクセントはプライマリカラーを採用します。これはプロフィールの外観設定の1つ - インターフェースはデザインシステムに従います - で、オフにするとクロームはニュートラルのままになります。ツール、キャンバス、エクスポートはどちらの場合も影響を受けず、フォントと角の丸みは、この設定のオン・オフにかかわらずデザインシステムに従います。

エキスパート用ウィング

構成プレビューとカラーロールの下には、4つの折りたたまれたセクションがあります。必要なものを開いてください。それぞれ#/start?area=color&focus=<wing>としてディープリンク可能で、ルームが他に何を表示していてもそれを開きます:

Explore shades & harmonies(focus=generate) - 1色から完全なシェードのセットへ。下記で説明します。
Shade curves(focus=curves) - ランプをポイントごとに作り直します。明度、彩度、色相にはそれぞれ独自のカーブがあり、L / C / Hで切り替え、下のシェードはドラッグに応じてライブで再生成されます。
Contrast(focus=contrast) - Contrast-lockは選んだ背景に対してAPCAの目標値を満たすようランプの色調を調整し直し、各ステップは自身の色相と彩度を保持します。Rotate hueはランプ全体をホイール上でまとめて回転させ、各シェードは明度と彩度を保持します。
Print(focus=print) - プライマリカラーが印刷でどうなるか: 自動の画面値、または固定されたCMYKビルド、あるいは指定のスポットインクです。

1色から、パレット全体へ

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ボタンが付いてきます。1つ追加すると、その色は即座にパレットに入ります。1回の操作で1つのトークンです。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コントロールが付きます。作業を整理するために、グループを作成したり名前を変更したりできます。ロールが2枚目のタイルを作ることは決してありません: 1つのトークンは1つのタイルであり、ロールが指すタイルには代わりに小さな角のマーク(P、S、Su、T)が付きます。タイルの下にあるColour chartは、同じスウォッチの2つのビューに折りたたまれています - 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スライダーで開き、16進、HSL、RGB、CMYKのモードがあります。値フィールドは有効なスペースで読み書き両方を行うため、16進を貼り付けたりインク割合を入力したりできます。CMYKを入力すると変換によって画面上の色が設定される点に注意してください - 正確なインクを固定するには、下の印刷ロックを使用してください。
保存形式- スウォッチをどう永続化するかを選びます: LCH（デフォルト - 知覚的で広色域、編集に最適）、16進、RGB、HSL。正確な従来型の16進値やsRGB値に合わせて固定する必要がある場合は、これを上書きしてください。
用途- ロールパネルに戻らずに、このスウォッチにブランドロールの1つを直接割り当てます。（ロール自身のタイルにはこれがありません - ロールはロールを取れません。）
印刷代替（折りたたみ）- 色の印刷挙動をロックします。
CMYK- 自動からロックに切り替えて、自動sRGB→CMYK変換を正確なインク値（C/M/Y/K、0〜100）で上書きします。
スポットカラー- なしから設定に切り替えて、スウォッチをスポットカラーに固定します。名前（例: PANTONE 186 C）、任意のブック、任意の仕上げ（デフォルトは通常インク）を指定します。インクがまったくインクではない場合 - 箔押し、エンボスやデボス、部分ニス、ソフトタッチ、型抜き、折り目、ミシン目などに使います。
他の色空間で（折りたたみ）- 同じ考え方をさらに広げたもの: 各行はこのスウォッチが表現できる色空間であり、正準値から導出されるか、あなたが自分で指定するかのいずれかで、指定したものはエクスポート時に優先されます。

これらの印刷ロックは、CMYKのPDFやTIFFをエクスポートするときに印刷所が使用するものです - エクスポートを参照してください。

スウォッチを削除するのは安全です。派生したランプのステップとテーマロールは非表示になります（背後のトークンは引き続き解決されるため、下流で何も壊れません）。一方、自分で追加した色は完全に削除されます。

多数のスウォッチを扱う

各スウォッチには専用のドラッグハンドルがあります。ドラッグすると同じグループ内で色の並び替えができ、あるいはハンドルにフォーカスしてSpaceを押し、矢印キーで移動し、もう一度Spaceを押して配置することもできます。Escapeでキャンセルします。並び順はスタジオを再度開いても保持され、取り消すこともできます。色をグループ間で移動するには、スウォッチエディタのGroupコントロールを使うか、複数の色を選んでMoveを使います。トークン名とロールの参照はそのまま保たれます。

パレットペインでの選択はジェスチャーであり、モードではありません。最初に押すべきボタンはなく、バーは最初に選択されたタイルとともに現れ、最後のタイルが選択解除されると消えます。

ペインの空いている部分をドラッグすると矩形が描かれ、触れたタイルはすべて、グループの境界をまたいでも選択に加わります。折りたたまれたセクションは何も提供せず、一度も動かないドラッグは選択を解除します。
Shift-clickは読み順で範囲を選択し、Cmd/Ctrl-clickは1枚のタイルを切り替え、通常のクリックはそのタイルのエディタを開きます。
どのグループヘッダーにもSelect allがあり、タイルにフォーカスした状態でのCmd-Aは、デザインシステムが持つすべての色を選択します - スターターの色は決して含みません。
グリッドには1つのタブストップがあります。矢印キーで移動し、Shift+矢印で選択を拡張し、Spaceでタイルを切り替え、Deleteで選択を削除し、Escapeで解除します。(矢印はフォーカスを動かすだけです。チャンネルを微調整するには、先にl、c、hのいずれかを押してください。読み取り値がそう案内します。)
タッチスクリーンでは矩形はありません。タイルを長押しすると選択が始まり、タップで追加します。グループごとのSelect allが残りをまかないます。

バー自体には{n} selectedと表示され、続いてMove to(既存のグループ、またはメニュー内で名前を付ける新しいグループ)、Give a role(選択した色が順番に次のロールを取っていくため、4枚のタイルを1回の操作で4つのロールすべてに割り当てられます)、Download(6種類のパレット形式のいずれかで選択範囲を書き出し)、Copy values(保存されている表記で色ごとに1行)、そしてDeleteが並びます。Move toとGive a roleは、パレットに動かせるシェードがあるときにのみ表示されます。1回のCtrl/Cmd-Zで、40件の移動、ロールの割り当て、削除といった一括操作全体を取り消せます - そして削除は、何を保持したかを伝えます。選択がこのルームでは削除できないタイルにも及ぶことがあるためです。

グラデーション

任意のグラデーションパネルは、背景やアクセント用に、パレットからブレンドトークンを作成します。ブランドがグラデーションを使わないなら完全にスキップしてください。各グラデーションにはプレビュー、名前付きストップ(2〜8個)、角度があります。重要な挙動: ストップはスウォッチを参照するため、そのスウォッチの色を変えるとグラデーションも追従します。補間はきれいなブレンドのためOKLCHで行われます。ストップを削除するとランが短くなります。

パレットを他所へ持ち出す

パレットペインの下端に配置されたフローティングピルは、パレット全体をデザイントークン(JSON)、CSS変数、CSSクラス、SCSS変数、GIMPパレット(.gpl)、Adobe Swatch Exchange(.ase)としてダウンロードします - ブランドをそのままIllustrator、Figma、GIMP、スタイルシートに投入できます。ペインのスクロール領域の外に置かれているため、パレットがどれだけスクロールしても定位置を保ち、パレットにシェードができると表示されます。(アセットからパレットをダウンロードすることもできます。)

タイプ

このルームも同じように成長します。まだ自分の書体を持たない状態では、1枚のカードと1つの決定だけです: プライマリは、現在それを担っている書体で読みやすいサイズに設定され、名前の横にStarterタグが付き、塗りつぶされた書体を選択ボタンと、"選択するまで何もインストールされません。"という一文があります。カードの下には"見出し、コード、イタリックは、選択するまでプライマリに従います"とあり、Choose them separatelyを押すと、残りの3枚のカードがこの訪問中ずっと表示されます。

signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KB自分で確認する署名済みファイルを取得 signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KB自分で確認する署名済みファイルを取得

1つの書体を選ぶと、ルームは4つのロールカード、Fontsリスト、そしてライブサンプルへと展開します。この4つの書体は、アプリ、ツール、すべてのエクスポートが実際に参照するものです:

プライマリ- 本文コピー、ボタン、すべてのツール。
見出し- h1/h2用のディスプレイフェイス。
コード- コードやデータ用のモノスペースフェイス。
イタリック- 強調、引用、脇注のための本物のイタリックコンパニオン。

見出し、コード、イタリックは、割り当てるまでそれぞれプライマリにフォールバックするため、フォント1種類のブランドはここで何も決める必要がありません。

色が付いているのは、あなたが選んだ印です。 カードが色付けされるのは、そのフェイスをインストールした場合のみです。スターターのフェイスは、パレットの継承グループが身にまとうのと同じStarterタグを、控えめな色合いで、色付けなしでまといます。そして誰も選んでいないロールは、あたかも選ばれたかのようにプライマリの名前を繰り返す代わりに↳ プライマリに従うと表示されます。ボタンは、自分のフェイスでは変更、それ以外ではフェイスを選ぶと表示されます。カード上の操作は何も確定しません: ボタンは、そのロールに絞った比較ステージを開きます。

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自分で確認する署名済みファイルを取得

このステージはダイアログではなくルーム内にインラインで、押したカードのすぐ下に開きます。開いている間、カードはロールとフェイスだけの1行ストリップに折りたたまれるため、スマートフォンでも最初の画面にステージが収まります。Escapeでキャンセルすると、開いた元のカードにキーボード操作が戻ります。

書体を選ぶのに必要な操作は3回だけです:

カードで書体を選択します。
ファミリー名を入力してPreviewを押します - または、フィールドの下にある6つのPinnedファミリーのいずれかを1回押します。カードはすでに読み込み中の状態で表示され、まだ見ていないフェイスの代わりにインターフェースのフェイスが表示される代わりに、サンプルが表示される場所にはスケルトンバーが現れます。
Use this faceを押します。

同意は、あなたが押した操作に対して一度だけ求められます。 プレビューが初めてGoogle Fontsにアクセスするとき、ダイアログが何が起こるかを伝えます: Googleはファミリー名とあなたのIPアドレスを知ります。そのファイルはこのデバイスに保存され、オフラインで使用されます。これはスタジオの中で唯一、第三者にアクセスするステップです。 Google から取得を押すと処理が進み、その選択は記憶されます。キャンセルを押すとカードには"取得していません。Googleには何も送信されていません。"と表示され、その場に有効なGoogle から取得が残るため、気が変わったときもカード上で1回押すだけで済みます。どのカードも無効なボタンを表示することはありません: どんな状態であっても、その1つのプライマリボタンが次に何をすべきかを伝えます。

ステージにフォントファイルをドロップすると、すぐにプレビューされます - 自分のマシンからTTF、OTF、WOFFを、これはすでに所有しているライセンス済みの企業書体のための経路です。そのドロップゾーンが、このルームで唯一のファイルの入口です。

いずれの方法でも、フェイスはこのデバイスに留まり、アプリ内で、あなたのツールで、そしてすべてのエクスポートでレンダリングされ、永遠にオフラインで機能し、デザインシステムファイルと一緒に移動します - レンダリング時に何も取得されません。Google Fontsにあるものはすべてオープンライセンス(OFL/Apache/UFL)で提供されています。

このデバイスのフォント

Fontsパネルには、このデバイスが持つすべてのフェイスと、それが担うロールが一覧表示されます。追加したフェイスはIn the design systemの下に先頭で並び、それぞれにロールと削除ボタンが付き、Primaryを担っているものにはバッジが付きます。スターターのフェイスは、その後に1つの折りたたまれた行として続きます - 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として9つのステップとColoursペインへのOpenとともに一覧表示されます。スターターのニュートラルを管理できる唯一の場所であり、ランプが生成された瞬間に、継承ではなくstarterタグが付きます。
その他のトークン- スペーシング、サイジング、線幅、不透明度、回転、プレーンな数値、シャドウを追加・編集します。タイプを選び、名前を付け(Gutter、Card shadowなど)、値を設定します。これらは標準のデザイントークン(DTCG)として保存され、ブランドと一緒に移動します。

ファイル

ブランドが保持するファイル - ロゴを除く - をここにドロップします: ベクター、画像、音声、モーション(動画、Lottie、アニメーション)アセット。これらはアセットに入り、セクションごとに整理され、すべてのツールのアセットピッカーですぐに使えるようになります。すべてこのデバイスに留まります。(レール上のラベルはこのルームをファイルと表記していますが、URLキーはcatalogueのままです。パネルキーは永続的な契約であるためです。)

ブランドを取り込む

レール下部の追加元…は、2段階のピッカーを開きます。最初の段階では、フォーマットではなく、あなたが何を持っているかを尋ねます。

デザイントークンまたはデザインファイル- DTCGまたはTokens StudioのJSON、Penpotプロジェクト、トークンセットのzip、Lollyデザインシステムパック、またはSVG。
PDF- デッキやガイドラインファイル。このデバイス上で、色、マーク、埋め込まれた書体を読み取ります。
ロゴまたはスクリーンショット- 画像から提案パレットが作られ、このデバイス上で読み取られます。何もアップロードされません。これは色を読み取るものであり、画像内の書体やレイアウトではありません。
保存済みウェブページ- 1つのHTMLファイルとそのCSSファイルを選ぶか、HTMLまたはCSSを貼り付けます。合計20ファイル、2MBまでです。読み取られるのは提供されたテキストのみで、リンクされたリソースは取得されず、スクリプトも実行されません。この経路は拡張機能やデスクトップアプリがなくても機能します。
フォントファイル- TTF、OTF、WOFF。Typeルームが開き、そこでフェイスがインストールされます。
ウェブサイト- 1ページ分を、その色とタイプについて読み取ります。このタイルは、実際にページを読み取れるデバイスにのみ表示されます。誰も押せないものを宣伝する無効なタイルは、タイルがまったくないより悪いからです。表示される場合は、どの読み取り手段が使われるかを明確に示します: このデバイス上でアプリによって取得されるか、あなたとしてサインインしたバックグラウンドタブでブラウザ拡張機能を通じて読み取られます。URLを指定するだけではフィールドが事前入力されるだけです - 取得ボタンが同意にあたるため、誰かが送ってきたリンクだけで読み取りが始まることは決してありません。

デザインファイルのソースを選ぶと、第2段階は下のカードです。受け付けるフォーマットが優先順にアイコンタイルとして先頭に並び、カード全体が1つのドロップターゲットです - カード上のどこをクリックしても、ファイルをドラッグしても構いません。ファイルをスタジオに直接ドロップすることもできます。

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 design-system pack(.lolly; 旧式の.zipも引き続き受け付けられます) - 1ステップでインストールされます;
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とDownload design contextも提供します。JSONレポートには観察結果、提案されたトークン、ソース情報が含まれます。保存されたHTML/CSSには、提供されたテキストのSHA-256が含まれます。生のページテキストは含まれず、署名済みのContent Credentialでもありません。フォント名は提案にすぎません: フォントを選んでインストールする場所は、引き続きTypeです。

PDFやその他のデザインファイルのインポートは、既存のレビューコントロールをそのまま使います。Trayに保持された項目は、その素材の種類を所管するルームを通じて追加されるまで、何も変更しません。

#/start?source=<kind>は指定したソース(file、pdf、image、font、url、page)でピッカーを開き、?importはプレーンなリストで開きます。

デバイス間でブランドを移動する

レール下部のエクスポートは、単一のLollyBrand-….lollyを書き出します - トークン、フォント、ロゴ、テーマ設定に加え、戻す際に検証される整合性マニフェスト付きです。1.0.7より前のWebリリースでは、同じペイロードを.zipと名付けていました。この旧式の表記も引き続き受け付けられます。その横のTokens (.json)は、プレーンなデザイントークンドキュメントだけを単独で書き出します。フォントもロゴもなく、トークンのみです。これはリポジトリ、CIステップ、他のトークンツールが実際に読み取るものです。

それを戻すには、追加元… → デザイントークンまたはデザインファイル（上記）を使うか、スタジオへのドラッグ&ドロップで行います。これは、同僚がブランドをあなたに渡す方法、あるいはあなたが2台目のインストールへブランドを持ち込む方法です - アカウントもクラウドも不要です。コマンドラインからブランドを取り込むには、代わりにingest:brandを参照してください。

以前の設定を復元する

レール下部のRestore brand settingsを選び、日付の付いたチェックポイントを選択して、Restoreを押します。これは、アクティブなブランドの色、タイプ設定、その他のブランドトークンを復元します。フォントと画像ファイルはそのまま残ります。

Lollyは、チェックポイントを適用する前に、現在の設定をBefore restoreとして保存します。そのチェックポイントを選ぶと、ブラウザを閉じて再度開いた後であっても、復元を元に戻せます。最新の20件のチェックポイントがこのデバイスに保持されます。ストレージが読み取れない場合や現在の設定を保存できない場合は、ダイアログが問題を報告するので、再試行できます。

バージョン

レールの下部にあるVersionsは、デザインシステムが動き続ける標的であることをやめる場所です。公開すると、このデバイスに保存される恒久的で名前の付いたコピーが得られます。それ以降は変更されないため、それを固定したツールは常に同じものを描き続けます。パネルは、公開すべき自分のものが存在するまでは非表示のままなので、一度も公開しないスタジオがコントロールを目にすることはありません。

何かを押す前に知っておくべき3つのことがあり、パネルは押す前にこの3つすべてを提示します(押した後ではなく)。

バージョンは恒久的です。 削除機能はまだないため、パネルには何が保持されているか、そしてそれが保持され続けることが明記されており、嘘をつくボタンを用意することはありません。
削除は互換性カードの先頭に表示されます。 追加・変更されたトークンはニュースですが、削除されたトークンはツールを壊すものなので、真っ先に名指しでそう呼ばれます。
公開は取り消せませんが、復元は取り消せます。 Restore latest from this versionはヘッドに対する通常の編集にすぎないため、スタジオの取り消しスタックに乗り、パネルはすぐにUndoを提供します。

Publish only、またはPublish and make activeを選べます。違いは、ツールとアプリが今後そのバージョンに従うか、それとも最新の編集に従い続けるかです。Follow the latest againを選ぶと、すべての編集が行われた瞬間にライブに反映されます。#/start?area=versionsはパネルを直接開きます。

ブランドが固定されている場合

一部のビルドは、SUSE Brandのようなロックされたデザインシステムを出荷します。それを開くと、編集可能なコピーを作成すると切り替えを備えた読み取り専用のメモが表示されます。元の色、フォント、トークンはそのまま維持されます。ロックされたシステムがそのデバイス上で最初のものであっても、あなた自身のローカルシステムは編集可能なままです。プロフィールでは、Openでシステムを選んでそのスタジオを開き、Make a new oneでローカルシステムを作成し、名前欄にフォーカスした状態で#/startを開きます。

次に進む先

Lollyの使い方 - キャンバス、保存、プロジェクト、アセットについて。
デザイントークン - あなたのブランドが表現されているトークンモデル。
書き出しとフォーマット - 印刷単位、CMYK、あなたのブランドが書き出す形式について。

ルックを見つけて比較する

OverviewまたはProfileのデザインシステム一覧からFind a lookを開きます。このデバイスに保存されたシステムと、いくつかの再利用可能なLollyの例を閲覧できます。名前、カラータグ、宣言されたフォントで検索します。Closest to my current paletteは、測定された色の類似度で並べ替え、同点の場合はフォントファミリーの一致で決めます。品質のスコアではありません。

1つのルックを選んでレビューするか、2つ選んで比較します。レビューボタンは小さな画面でも利用できます。ルックを選んでも何も変わりません。Use this saved systemは既存のデザインシステムレジストリを切り替えます。これらのカラーを使用は、通常のチェックポイントとインストールの流れを通じて例を適用し、現在のフォントは維持します。Restore brand settingsで以前のルックに戻せます。

Details and design contextの下で、保存済みのシステムには編集可能なSearch tagsとコンテキストのダウンロードがあります。例には独自のLollyカラーレシピが使われています。リモートでスクレイピングされたインスピレーション集も、必須のアカウントもありません。

signed by Lolly2026-10-21vector SVG30 paths~9.3k nodes44 groups106 KB自分で確認する署名済みファイルを取得Try it in the app

この比較では、両方のパレットが一緒に表示されたままになります。ルックをレビューしても、これらのカラーを使用またはUse this saved systemを選ぶまでは何も変わりません。

ソースの根拠を読む

ソースレビューの任意の詳細では、観察されたタイポグラフィ、間隔、パディング、角の値が示されます。保存されたHTML/CSSやネイティブなウェブサイトの読み取りは宣言値を報告しますが、それがレンダリングされたページで実際に使われているとは限りません。ブラウザ拡張機能は、そのビューポートとブラウザの色設定とともに、可視要素の限られたサンプルから測定されたスタイルを報告できます。古い拡張機能は引き続き宣言値で動作します。欠けているフィールドはNot observedと表示されます。

これらは観察結果であり、自動的なスタイル設定ではありません。フォントファイルは参照スキャンによって取得もインストールもされず、ソースの間隔があなた自身のものを黙って置き換えることもありません。件数はサンプル内での出現回数を表すものであり、信頼度や品質ではありません。

デザインシステムに対して構成をチェックする

DesignでExportを開き、書き出す前にを開きます。このチェックは、レンダリングと同じ有効なデザインシステムのバージョンを使用します。作成された色、トークンのエイリアス、フォントの選択、画像アセットIDを比較します。カスタム値は意図的である場合もあります。宣言されたブランドアセット以外の画像はレビュー項目であり、禁止された画像ではありません。

具体的な色やフォントの提案がある場合、そのボタンはその1つのレイヤーだけを変更します。通常の元に戻すで元の値に戻せます。ロックされた、または変更されたレイヤーは、古い提案によって上書きされません。ソースの根拠が欠けている場合は、一致とは別に扱われます。レンダリングされたコントラストとテキストのレイアウトは、既存の組み込みチェックによって確認されます。グラデーション、エフェクト、入れ子になったツールのコンテンツ、権利、主観的な品質は、ブランド比較では評価されません。チェックはダウンロードをブロックしません。

デザインコンテキストをローカルで使う

Download design contextには、トークンドキュメント、解決済みの色、宣言されたフォントファミリー、アセット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キーも必要ありません。

ブランドスタジオ

ルーム