kkhys design system
kkhys.me / memo / lgtm / diary / trends の5サイトを支えるデザイントークンと共有コンポーネント。 実体は monorepo の packages/styles と packages/ui にあり、 このサイトは同じソースを読んで描画している。
原則
- 髪の毛ラインで区切る。カードや影を重ねず、
--c-borderの1px境界線と余白で構造を示す。 - パレットは uchu ひとつ。OKLCH の
--uchu-*を直接使わず、意味を持つ--c-*を介して使う。 - テーマは light-dark()。メディアクエリの分岐ではなく、トークン自身が両テーマの値を持つ。
- 本文カラムは
--content-width(42rem)。どのサイトも同じ幅に収まる。 - 素の CSS。フレームワークを足さず、カスケードレイヤーとモダン CSS で組む。
使い方
各アプリの global.css は次の4行から始まる。
@layer reset, tokens, base;
@import "kiso.css" layer(reset);
@import "@kkhys/styles/uchu.css" layer(tokens);
@import "@kkhys/styles/tokens.css" layer(tokens);
@import "@kkhys/styles/base.css" layer(base);アプリ固有のトークンは、この後のローカル tokens レイヤーで追加・上書きする。 Satori(OG 画像)など CSS 変数を解決できない場所では@kkhys/styles/colors の hex ミラーを使う。