MokuMoku Design System

ひとりの集中と、チームの気配をつなぐ。

calmspaciousfriendlysoft edgeneutralairy

Color

Background / Surface

Text

Brand

Gray

Status

Typography

Hiragino Sans, Yu Gothic UI, BIZ UDPGothic, Meiryo, sans-serif

displayひとりの集中と、チームの気配をつなぐ。40–72 / 700

h1ひとりの集中と、チームの気配をつなぐ。24–32 / 700

h2ひとりの集中と、チームの気配をつなぐ。18–22 / 600

body.lgひとりの集中と、チームの気配をつなぐ。15–17 / 400

bodyひとりの集中と、チームの気配をつなぐ。14 / 400

captionひとりの集中と、チームの気配をつなぐ。11 / 500

labelひとりの集中と、チームの気配をつなぐ。10 / 600

Icons

Phosphor Icons · weight: bold · via components/icons.tsx

Status

Focus

Working

Talk

Break

Away

Tool

Add

Pen

Note

Image

Sticker

Campfire

Subtitle

Assistant

Screen Share

Share

Tab

Window

Screen

Device

Action

Search

Settings

Mic

Speaker

Forward

Leave

Expand

Copy

Trash

Link

Lock

More

Caret

Bell

Spacing

Tailwind utilities (p-*, gap-*, m-*) + CSS vars for shell gutters

--space-shell-xclamp(16px, 2vw, 32px)

--space-shell-yclamp(16px, 2.5vw, 28px)

Common scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px

4

8

12

16

24

32

48

64

Radius

28px

Panel (.surface-panel)

24px

Card (--radius-card)

16px

Dialog

12px

Menu / Note

8px

Input (rounded-lg)

999px

Button / Chip (--radius-control)

Shadow

shadow-soft0 20px 52px rgba(26,34,48,0.08)Card, Panel

shadow-float0 28px 64px rgba(26,34,48,0.12)Floating menu, Modal

shadow-press0 10px 22px rgba(74,98,128,0.2)Active / pressed state

Motion

fast150msease-outButton press, toggle

base200msease-outColor transition

soft320mscubic-bezier(0.2,0.9,0.2,1)Toast float-in

expand1800–6800mscubic-bezier(0.16,0.84,0.24,1)Toast width reveal

Components

Avatar

Button

Primary

Secondary

Ghost

ui/button.tsx — tone: primary | secondary | ghost — size: sm | md

Icon Button

Chip

もくもく中かきかき中話せるよ〜ひと休み離席中

Input

Card

設計原則

余白が、思考を支える

3 層で読み切れる状態を保つ。

Badge

DefaultPrimaryAccent

ui/badge.tsx — tone: neutral | primary | accent

Toggle

Toast

接続しました

接続を終了しました

注意が必要です

お知らせ

Progress

タスク進捗72%

アップロード100%

WarningTip

brand-system.tsx WarningTip

Skeleton

Spinner

Link

デザインシステムを見る
補助リンク（下線なし）

Divider

または

Tabs

Empty State

メモが見つかりません

キーワードを変えて再検索

Panel

surface-panel (default)

glass-panel + radius-panel (28px)

surface-panel-strong

Higher opacity + shadow-float

ui/panel.tsx — tone: default | strong

Sticky Note

Lemon トーンの付箋です

Sky トーンの付箋です

Mint トーンの付箋です

Rose トーンの付箋です

Lemon

Sky

Mint

Rose

140px · rounded-lg · border-left 3px accent · color: lemon | sky | mint | rose

Sticker

焚き火

150 x 160px

ambient-bonfire.wav

soundRadius: 300px

sticker-presets.ts — type: "bonfire"