Guidelines

Design System

Lull のデザイン言語を定義するガイドラインとコンポーネント集。 招待状のような温もりと、余白が語る静けさを、すべてのUIに。

Color Palette

生成り（きなり）を基調とした、温度のある色彩体系。原色は使わず、自然光の中の紙とインクの世界観を表現する。

Base

Background生成り--background
Foreground墨色--foreground
Card--card
Muted--muted

Brand

Primaryテラコッタ--primary
Secondary淡温色--secondary
Accentキャメル--accent
Destructive--destructive

Functional

Border--border
Input--input
Ring--ring
Muted Foreground--muted-foreground

Color Guidelines

  • 原色は使わない。彩度の高い色は空間の静けさを壊す
  • テラコッタは封蝋のように、要所でのみ使う
  • 墨色のテキストは黒ほど硬くなく、万年筆のインクのような温かさ
  • 生成りの背景は真っ白ではなく、自然光の中の紙を想起させる

Typography

本文は Noto Serif JP の端正な可読性、ロゴと見出しは Shippori Mincho の繊細な品格。文字が呼吸できる余白を確保し、詰め込まない。

Body / Base

Noto Serif JP

視認性と可読性に優れた明朝体。本文・UI要素・キャプションなど日常的なテキストすべてに使用。画面上での長文読解にも疲れにくい安定した字形。

font-sans

Display / Logo

Shippori Mincho

横線の繊細さと縦線の凛とした強さが「力みのない本気」を体現。ロゴタイプとセクション見出しに使用し、特別感を演出。

font-serif

Type Scale

Display / 4.5rem

Lull

H1 / 3rem

静けさの中に

H2 / 1.875rem

確かな手触りを

H3 / 1.25rem

余白はデザインの主役

Body / 1rem

要素と要素のあいだの「間（ま）」が、情報よりも多くを語る。密度より呼吸 ― 一画面に載せる情報量を意図的に抑え、スクロールやページ遷移を許容する。

Small / 0.875rem

控えめ、でも不在ではない。派手なアニメーションは使わない。しかし、画面遷移のフェードや要素の出現に「余韻」を持たせる。

Caption / 0.75rem

A quiet space where moments breathe

Typography Guidelines

  • ゆったりとした字間と行間。文字が呼吸できる余白を確保する
  • 本文のline-heightは1.6以上（leading-relaxed）
  • 見出しには tracking-wide 以上のletter-spacingを適用
  • キャプション・ラベルにはuppercase + 広めのtrackingで静謐な印象を

Iconography

Phosphor Icons を採用。6 種類のウェイト（thin / light / regular / bold / fill / duotone）を使い分け、Lull の世界観に合わせた線の細さと余白感を実現する。 標準ウェイトは light 。

Weights

Thin

繊細。装飾的な大型アイコンに

LightDefault

推奨。Lull の標準ウェイト

Regular

強調が必要な箇所に

Bold

アクティブ状態やアクセントに

Fill

選択済み・お気に入り等の塗り表現

Duotone

二重層。装飾的な場面に

Size Scale

16px
20px
24px
32px
40px
48px

ボタン内アイコンは 20px 、 本文中は 16px 、 装飾的アイコンは 32~48px を推奨。

Icon Library

Heart
Envelope
Gear
Bell
Search
Arrow
Plus
Trash
Edit
Eye
Bookmark
Share
Calendar
Chat
User
Home
Moon
Sun
Check
Close
Warning
Info
Caret
Back
Download
Upload
Copy
Link
Location
Clock
Star
Leaf
Drop
Feather

Icon Guidelines

  • 標準ウェイトは light 。Lull の線の細さ・余白感と調和する
  • アクティブ / 選択済み状態には fill を使い、状態変化を視覚的に伝える
  • アイコン単体で意味を伝えず、必ずラベルまたは aria-label を併用する
  • 色はテキストカラーを継承（currentColor）し、アイコン専用色は設けない
  • 装飾的に大きく使う場合は thin ウェイトで繊細な線画として扱う

Buttons

触覚的なフィードバック。押した実感のある微細なレスポンスを持たせる。

Variants

Sizes

With Icons

Icon Only

States

Composition

CTA examples following Lull design language

Form Elements

丁寧なインタラクション。フォーム要素にも手触りと余白を。

Text Input

Textarea

Select

Checkbox

Radio Group

Switch

Slider

40%

Composed Form

Feedback & Overlay

即座に現れず、すっと現れる。0.2~0.4秒の穏やかなイージングで、空間に自然に馴染む。

Badge

DefaultSecondaryOutlineDestructive

Progress

Progress60%

Tabs

招待状を原風景にした、温もりのあるデザイン言語。余白と呼吸を大切にする。

Toast

Dialog

    Cards

    情報を包み込む器。カードは招待状の封筒のように、大切なものを丁寧に届ける。

    Basic Card
    シンプルな情報表示

    余白を大切にしたカードコンポーネント。情報を詰め込まず、呼吸のある構成を。

    Featured
    NewLatest update

    バッジとの組み合わせ。控えめなアクセントが、重要な情報を自然に際立たせる。

    Actionable
    Actions available

    アクションを伴うカード。CTAは控えめながらも、確かに存在する。

    Horizontal Layout
    Wide card with media area

    横長のカードレイアウト。画像やメディアエリアとテキストを非対称に配置し、 自然光が片側から差し込むような重心のある構図を実現する。

    Spacing & Rhythm

    余白はデザインの主役。要素と要素のあいだの「間（ま）」が、情報よりも多くを語る。

    Spacing Scale

    xs
    4pxgap-1 / p-1
    sm
    8pxgap-2 / p-2
    md
    16pxgap-4 / p-4
    lg
    24pxgap-6 / p-6
    xl
    32pxgap-8 / p-8
    2xl
    48pxgap-12 / p-12
    3xl
    64pxgap-16 / p-16
    section
    128pxgap-32 / py-32

    Separator

    Horizontal

    Vertical

    separator

    example

    Border Radius

    none
    sm
    md
    lg
    xl
    full

    Lull では rounded-sm を基本とし、 角の丸みを控えめに保つ。過度な丸みはカジュアルになりすぎるため避ける。

    Motion Guidelines

    • 控えめ、でも不在ではない。派手なアニメーションは使わない
    • 0.2~0.4秒の穏やかなイージング（ease-out）で、空間に自然に馴染む動き
    • 要素の出現にはフェードイン + 微細なY軸移動を組み合わせる
    • 触覚的なフィードバック: hover時のscale変化は1.02以下に抑える