kkhys design system

Principles

髪の毛ラインで区切る

カードや影を重ねず、--c-border の 1px 境界線と余白で構造を示す。

パレットは uchu ひとつ

OKLCH の --uchu-* を直接使わず、意味を持つ --c-* を介して使う。

テーマは light-dark()

メディアクエリの分岐ではなく、トークン自身が両テーマの値を持つ。

本文カラムは --content-width

42rem。どのサイトも同じ幅に収まる。

素の CSS

フレームワークを足さず、カスケードレイヤーとモダン CSS で組む。

文字は小さく、密に

本文 14px・注釈 12px。余白より情報を優先し、行送りで読みやすさを保つ。

Usage

@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);

Pages