design system

lemona.de・banana.de・melocil.de が共有するデザイントークンとルール。純黒、モノクロ、1px のヘアライン、小さな大文字のモノスペース。値はすべて tokens/tokens.json から生成しています（81 tokens / 35 colors）。

Principles

純黒とモノクロ

背景は #000000。区別は色相ではなく明度・字間・罫線で付ける。色相はメーター（ok / caution / over）、未入力・エラーの danger、コードビューのハイライトだけ。

塗りでなく罫線

面は 1px のヘアライン（border）で区切る。カードの塗りや影は使わない。余白は広めに取る。

小さな大文字のモノスペース

ラベル・ボタン・キャプションは等幅・大文字・小さめ（10–11px）で、字間 0.14em。見出しと長文だけプロポーショナル。

角丸は最小限

ウィジェットは 2px、パネル・ツールチップでも 6px まで。影・グラデーションは使わない。

反転で強調

ON / 押下 / ホバー時は fg で塗って文字を bg にする。アクセントカラーは持たない。

トークン以外の色を書かない

UI の色はすべてトークンから取る。新しい値が必要なら tokens.json に足して全アプリへ配る。

Color

Core — 全アプリ共通

#000000

Window, panel and page background (pure black).

#f2f2f3

Primary text, toggles that are on (inverted), fader caps, the selection stroke.

muted

#a1a1a8

Labels, captions, values.

muted-2

#7a7a80

Dimmer secondary text, hover borders, number wires, focus outlines.

white

#ffffff

Links and tooltip text on the web, where pure white sits above fg.

border

#ffffff29 · α 0.16

1px hairline borders and separators; pressed fill.

border-strong

#ffffff73 · α 0.45

Borders that should draw the eye: empty required fields, slider tracks.

border-subtle

#ffffff1a · α 0.10

Subtler borders, hover fills, empty heatmap cells.

selection

#ffffff40 · α 0.25

Text selection fill.

surface

#0a0a0b

Slightly lifted surface for buttons, inputs and nodes.

tip-bg

#080809f5 · α 0.96

Tooltips, popups, menus.

Film — 背景が動くページの半透明の面

film-panel

#ffffff09 · α 0.04

Panels over the background.

film-raised

#ffffff0f · α 0.06

A surface raised inside a panel (one track, a notice).

film-sunken

#00000073 · α 0.45

Inputs and code blocks, sunk below the panel.

Feedback — 未入力・エラー

feedback-danger

#ff6a5f

Error text, the 3px bar on the left of an invalid field or alert.

feedback-danger-border

#ff6a5f8c · α 0.55

Border of an invalid field or alert.

feedback-danger-surface

#ff6a5f14 · α 0.08

Fill of an invalid field or alert.

Role — melocil.de の DJ / VJ

role-dj

#ffffff → color.core.white

DJ appearances (melocil.de activity graph).

role-vj

#7a7a80 → color.core.muted-2

VJ appearances (melocil.de activity graph).

Meter — 唯一の色相とモノクロ 3 段

meter-ok

#4cd964

True peak below caution — one of the only three hues in the system.

meter-caution

#f5b731

True peak at or above the caution level.

meter-over

#ff453a

True peak over 0 dBTP.

meter-tier-low

#7a7a80 → color.core.muted-2

Monochrome level meter below the caution level.

meter-tier-mid

#a1a1a8 → color.core.muted

Monochrome level meter from caution up to 0 dB.

meter-tier-high

#f2f2f3 → color.core.fg

Monochrome level meter over 0 dB, and the peak-hold line.

Syntax — lemona.de のコードビュー

syntax-plain

#f2f2f3 → color.core.fg

Code view: plain text.

syntax-comment

#7f8c98

Code view: comments.

syntax-preprocessor

#ffa14f

Code view: #include, #define.

syntax-keyword

#ff7ab2

Code view: keywords.

syntax-type

#6bdfff

Code view: types.

syntax-builtin

#dabaff

Code view: built-in functions.

syntax-engine

#acf2e4

Code view: engine uniforms.

syntax-number

#d9c97c

Code view: numbers.

syntax-string

#ff8170

Code view: strings.

syntax-line-number

#4a4a50

Code view: line numbers.

Type

Web — melocil.de

type.web.display
clamp(2.75rem, 11vw, 4.5rem)

melocil.de

type.web.title
1.5rem

Section title

type.web.body
0.875rem

本文 Body text — 黒と罫線と小さな大文字

type.web.small
0.75rem

2026-10-12 · 23:00–24:00

type.web.label
0.6875rem

Label / caption

type.web.micro
0.625rem

Badge · axis

Native — egui / JUCE（px）

TYPE_HEADING
20px

lemona.de

TYPE_BODY
12px

Body 12 — SF Mono

TYPE_BUTTON
11.5px

Button

TYPE_CAPTION
10.5px

Caption

TYPE_SMALL
10px

Small 10

UI は等幅（SF Mono → Menlo → Consolas）、日本語はヒラギノ角ゴ / 游ゴシック / Noto Sans JP にフォールバック。見出しと長文だけ system-ui のプロポーショナル。

Shape & space

Token	Value	Usage
radius.swatch	1px	Legend swatches, dots.
radius.widget	2px	Buttons, inputs, tags, menus.
radius.panel	6px	Largest radius: panels, windows, tooltips.
stroke.hairline	1px	Every border, separator and outline.
space.native.item-x	8px	Horizontal gap between widgets.
space.native.item-y	6px	Vertical gap between widgets.
space.native.button-x	8px	Horizontal button padding.
space.native.button-y	3px	Vertical button padding.
space.web.1	0.25rem	Tight gaps.
space.web.2	0.5rem	Small gaps.
space.web.3	0.75rem	Inline groups.
space.web.4	1rem	Default gap.
space.web.5	1.5rem	Group gaps.
space.web.6	2rem	Section margins.
space.web.7	3rem	Section margins.
space.web.8	4rem	Between major sections.
motion.fast	150ms	Every hover / focus transition.
layout.content-max	860px	Web content column.
layout.breakpoint-sm	34rem	Narrow: one column, hide secondary labels.
layout.breakpoint-md	56rem	Medium: two columns.

Components

Buttons — inactive / hover / pressed / on / disabled

surface · border

border-subtle · muted-2

border · fg

on = fg 反転

disabled α 0.4

Links, badges, inputs, tooltips

outline pill · hover で反転

badge

input · selection

2026-10-12tip-bg · white · radius-panel

tooltip / popup

Meters, faders, knobs

LEVELS: muted-2 / muted / fg

TRUE PEAK: ok / caution / over

fader

knob

1#include "util/common.glsl"
2// pulse on the beat
3void main() {
4  float k = smoothstep(0.0, 1.0, u_beat);
5}

code view (syntax.*)

Apps

lemona.de

Rust / egui

dist/rust/theme_tokens.rs
→ crates/lemonade-ui/src/theme.rs

banana.de

C++ / JUCE

dist/cpp/DesignTokens.h
→ app/Source/Theme.h

melocil.de

Next.js / CSS

dist/css/tokens.css
→ app/globals.css

cue-parser

Next.js / Tailwind

dist/css/tokens.css
dist/ts/tokens.ts
→ web/app/tokens.css
→ web/utils/designTokens.ts

// lemona.de — theme.rs
mod theme_tokens;
pub use theme_tokens::*;          // BG, FG, MUTED, BORDER, RADIUS_WIDGET, ...

// banana.de — Theme.h
#include "DesignTokens.h"
const juce::Colour BG{design::BG};

/* melocil.de-site — app/layout.tsx */
import './tokens.css';            /* var(--bg), var(--ds-radius-widget), ... */

All tokens

Token	Value	Rust / C++	CSS	Usage
color.core.bg	#000000	BG	--ds-color-core-bg --bg	Window, panel and page background (pure black).
color.core.fg	#f2f2f3	FG	--ds-color-core-fg --fg	Primary text, toggles that are on (inverted), fader caps, the selection stroke.
color.core.muted	#a1a1a8	MUTED	--ds-color-core-muted --muted	Labels, captions, values.
color.core.muted-2	#7a7a80	MUTED_2	--ds-color-core-muted-2	Dimmer secondary text, hover borders, number wires, focus outlines.
color.core.white	#ffffff	WHITE	--ds-color-core-white --link --tip-fg	Links and tooltip text on the web, where pure white sits above fg.
color.core.border	#ffffff29	BORDER	--ds-color-core-border --border	1px hairline borders and separators; pressed fill.
color.core.border-strong	#ffffff73	BORDER_STRONG	--ds-color-core-border-strong --border-strong	Borders that should draw the eye: empty required fields, slider tracks.
color.core.border-subtle	#ffffff1a	BORDER_SUBTLE	--ds-color-core-border-subtle --cell-empty	Subtler borders, hover fills, empty heatmap cells.
color.core.selection	#ffffff40	SELECTION	--ds-color-core-selection	Text selection fill.
color.core.surface	#0a0a0b	SURFACE	--ds-color-core-surface	Slightly lifted surface for buttons, inputs and nodes.
color.core.tip-bg	#080809f5	TIP_BG	--ds-color-core-tip-bg --tip-bg	Tooltips, popups, menus.
color.film.panel	#ffffff09	FILM_PANEL	--ds-color-film-panel --panel	Panels over the background.
color.film.raised	#ffffff0f	FILM_RAISED	--ds-color-film-raised --raised	A surface raised inside a panel (one track, a notice).
color.film.sunken	#00000073	FILM_SUNKEN	--ds-color-film-sunken --sunken	Inputs and code blocks, sunk below the panel.
color.feedback.danger	#ff6a5f	FEEDBACK_DANGER	--ds-color-feedback-danger --danger	Error text, the 3px bar on the left of an invalid field or alert.
color.feedback.danger-border	#ff6a5f8c	FEEDBACK_DANGER_BORDER	--ds-color-feedback-danger-border --danger-border	Border of an invalid field or alert.
color.feedback.danger-surface	#ff6a5f14	FEEDBACK_DANGER_SURFACE	--ds-color-feedback-danger-surface --danger-surface	Fill of an invalid field or alert.
color.role.dj	{color.core.white}	ROLE_DJ	--ds-color-role-dj --role-dj	DJ appearances (melocil.de activity graph).
color.role.vj	{color.core.muted-2}	ROLE_VJ	--ds-color-role-vj --role-vj	VJ appearances (melocil.de activity graph).
color.meter.ok	#4cd964	METER_OK	--ds-color-meter-ok	True peak below caution — one of the only three hues in the system.
color.meter.caution	#f5b731	METER_CAUTION	--ds-color-meter-caution	True peak at or above the caution level.
color.meter.over	#ff453a	METER_OVER	--ds-color-meter-over	True peak over 0 dBTP.
color.meter.tier-low	{color.core.muted-2}	METER_TIER_LOW	--ds-color-meter-tier-low	Monochrome level meter below the caution level.
color.meter.tier-mid	{color.core.muted}	METER_TIER_MID	--ds-color-meter-tier-mid	Monochrome level meter from caution up to 0 dB.
color.meter.tier-high	{color.core.fg}	METER_TIER_HIGH	--ds-color-meter-tier-high	Monochrome level meter over 0 dB, and the peak-hold line.
color.syntax.plain	{color.core.fg}	SYNTAX_PLAIN	--ds-color-syntax-plain	Code view: plain text.
color.syntax.comment	#7f8c98	SYNTAX_COMMENT	--ds-color-syntax-comment	Code view: comments.
color.syntax.preprocessor	#ffa14f	SYNTAX_PREPROCESSOR	--ds-color-syntax-preprocessor	Code view: #include, #define.
color.syntax.keyword	#ff7ab2	SYNTAX_KEYWORD	--ds-color-syntax-keyword	Code view: keywords.
color.syntax.type	#6bdfff	SYNTAX_TYPE	--ds-color-syntax-type	Code view: types.
color.syntax.builtin	#dabaff	SYNTAX_BUILTIN	--ds-color-syntax-builtin	Code view: built-in functions.
color.syntax.engine	#acf2e4	SYNTAX_ENGINE	--ds-color-syntax-engine	Code view: engine uniforms.
color.syntax.number	#d9c97c	SYNTAX_NUMBER	--ds-color-syntax-number	Code view: numbers.
color.syntax.string	#ff8170	SYNTAX_STRING	--ds-color-syntax-string	Code view: strings.
color.syntax.line-number	#4a4a50	SYNTAX_LINE_NUMBER	--ds-color-syntax-line-number	Code view: line numbers.
font.family.mono	ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Noto Sans Mono, monospace	—	--ds-font-family-mono --font-mono	UI font: labels, values, buttons, node titles.
font.family.sans	system-ui, -apple-system, Segoe UI, Noto Sans JP, sans-serif	—	--ds-font-family-sans --font-sans	Headings and longer text, Japanese.
font.file.mono	/System/Library/Fonts/SFNSMono.ttf, /System/Library/Fonts/Menlo.ttc, C:\Windows\Fonts\consola.ttf	FONT_FILE_MONO	—	Monospace UI font files.
font.file.jp	/System/Library/Fonts/ヒラギノ角ゴシック W3.ttc, C:\Windows\Fonts\YuGothR.ttc	FONT_FILE_JP	—	Japanese fallback font files.
type.native.small	10	TYPE_SMALL	--ds-type-native-small	Small text.
type.native.caption	10.5	TYPE_CAPTION	--ds-type-native-caption	Caption: uppercase, monospace, muted, tracking 0.14em.
type.native.button	11.5	TYPE_BUTTON	--ds-type-native-button	Button labels.
type.native.body	12	TYPE_BODY	--ds-type-native-body	Body and monospace text.
type.native.heading	20	TYPE_HEADING	--ds-type-native-heading	Heading / app title (proportional).
type.web.display	clamp(2.75rem, 11vw, 4.5rem)	—	--ds-type-web-display	Page title (h1), sans 650, tracking -0.045em, line-height 1.
type.web.title	1.5rem	—	--ds-type-web-title	Section titles, mono 500, tracking 0.04em.
type.web.body	0.875rem	—	--ds-type-web-body	List body.
type.web.small	0.75rem	—	--ds-type-web-small	Summaries, times (mono, tabular-nums).
type.web.label	0.6875rem	—	--ds-type-web-label	Labels, links, legends: mono, uppercase, tracking 0.14em.
type.web.micro	0.625rem	—	--ds-type-web-micro	Badges, axis labels, overlays.
type.weight.regular	400	TYPE_WEIGHT_REGULAR	--ds-type-weight-regular	Default.
type.weight.medium	500	TYPE_WEIGHT_MEDIUM	--ds-type-weight-medium	Section titles; code view text.
type.weight.display	650	TYPE_WEIGHT_DISPLAY	--ds-type-weight-display	Page title (h1).
type.tracking.caption	0.14	TYPE_TRACKING_CAPTION	--ds-type-tracking-caption	Uppercase labels and captions (1.4px at 10.5px).
type.tracking.title	0.04	TYPE_TRACKING_TITLE	--ds-type-tracking-title	Section titles.
type.tracking.display	-0.045	TYPE_TRACKING_DISPLAY	--ds-type-tracking-display	Page title (h1).
type.line-height.body	1.6	TYPE_LINE_HEIGHT_BODY	--ds-type-line-height-body	Web body text.
radius.swatch	1	RADIUS_SWATCH	--ds-radius-swatch	Legend swatches, dots.
radius.widget	2	RADIUS_WIDGET	--ds-radius-widget	Buttons, inputs, tags, menus.
radius.panel	6	RADIUS_PANEL	--ds-radius-panel	Largest radius: panels, windows, tooltips.
stroke.hairline	1	STROKE_HAIRLINE	--ds-stroke-hairline	Every border, separator and outline.
space.native.item-x	8	SPACE_ITEM_X	--ds-space-native-item-x	Horizontal gap between widgets.
space.native.item-y	6	SPACE_ITEM_Y	--ds-space-native-item-y	Vertical gap between widgets.
space.native.button-x	8	SPACE_BUTTON_X	--ds-space-native-button-x	Horizontal button padding.
space.native.button-y	3	SPACE_BUTTON_Y	--ds-space-native-button-y	Vertical button padding.
space.web.1	0.25rem	—	--ds-space-web-1	Tight gaps.
space.web.2	0.5rem	—	--ds-space-web-2	Small gaps.
space.web.3	0.75rem	—	--ds-space-web-3	Inline groups.
space.web.4	1rem	—	--ds-space-web-4	Default gap.
space.web.5	1.5rem	—	--ds-space-web-5	Group gaps.
space.web.6	2rem	—	--ds-space-web-6	Section margins.
space.web.7	3rem	—	--ds-space-web-7	Section margins.
space.web.8	4rem	—	--ds-space-web-8	Between major sections.
motion.fast	150ms	—	--ds-motion-fast	Every hover / focus transition.
layout.content-max	860px	—	--ds-layout-content-max	Web content column.
layout.breakpoint-sm	34rem	—	--ds-layout-breakpoint-sm	Narrow: one column, hide secondary labels.
layout.breakpoint-md	56rem	—	--ds-layout-breakpoint-md	Medium: two columns.
meter-db.floor	-60	METER_DB_FLOOR	--ds-meter-db-floor	Bottom of the meter range.
meter-db.ceiling	6	METER_DB_CEILING	--ds-meter-db-ceiling	Top of the meter range.
meter-db.caution	-12	METER_DB_CAUTION	--ds-meter-db-caution	Caution level.
meter-db.over	0	METER_DB_OVER	--ds-meter-db-over	Over level.