背景カード
Sunbeam を象徴する面。流し撮りの自然写真を土台に、少数の要素を決まったルールで配置します。
構造
写真を切り替えたり、ガイドを重ねたりしてみてください。どの写真でもレイアウトは変わりません。
Lyra
Lyra はワークスペースをひとつの会話にまとめます。最初のメッセージから完成したキャンバスまで。
ゾーン
4 つのゾーンを左から右、上から下へ読みます。マークとキャプションは同じ余白を共有します。
- 1
マーク
左上の余白の位置に、グリフを載せた 40–48px の不透明なタイル、続いて明るいインクのワードマーク。
- 2
焦点の列
縦の中央付近。shadow-5 を持つ不透明なカードの面がひとつ。同じ高さの tint チップが両側に並び、端からはみ出してもよい。
- 3
ステータス
焦点の面の下、その左端にそろえて、小さなアイコンと現在形の短いステータス。
- 4
キャプション
左下の余白の位置に、控えめな明るいインクで、最大 2 行。
ルール
- 1本物のカメラの動きがある自然の被写体。ストックのグラデーション、AI の抽象画、スクリーンショットは使わない。
- 2写真はそのまま使う。色の層、ぼかしフィルター、ビネットは加えない。明るい写真を暗くするのではなく、暗い写真を選ぶ。
- 3不透明な面はカードにひとつ。ふたつにしない。カードの中にカードを入れない。
- 4余白はスマートフォンで 24px、広い画面で 48–64px。角丸は 24px、1024px 以上で 40px。
- 5アートの中にボタンを置かない。実際の操作はカードの外に置く。
- 6アートは装飾か、ラベル付きの 1 枚の画像として扱う。タイトルとキャプションは本物のテキストのまま。
写真
ライセンスとクレジットを確認済みで、背景パイプラインが AVIF と WebP に書き出します。直リンクはしません。
- telo撮影：DL314 Lin
- brand-hero撮影：Travis Fish
- gladiolus撮影：Eugene Golovesov
- pink-motion撮影：Raphael Nicolas
