余白

スケール

使うのは 0.5 / 1 / 2 / 4 の4段階だけ。数字がそのまま余白の名前で、sm や md のようなトークン名は無い。帯の長さが実際の px に比例している。

この4値の間にある p-1.5 や p-3 は使わない。大きな区切りほど大きな余白、という対応を 4段で完結させる。縦の間隔は margin でなく gap / space-y で作る。

横は、近い要素ほど詰める

横に並べるとき、意味が近い要素は gap-1 で詰めてひとかたまりに見せる。独立した操作は gap-2 で開けて別々だと分かるようにする。図解の色付きの帯が、要素の間に空く実寸の隙間。

縦は、地続きか区切りかで決める

タイトルと会社名のように意味が地続きな行は gap-0.5 でほぼ隙間なく重ね、1つのかたまりに見せる。かたまり同士は gap-2 で区切って、別々の情報だと分かるようにする。

内側は、面から一定の余白を空ける

カードのように内容を囲む面は、内側に p-4 の余白を回す。縁と内容がくっつかず、四辺すべてで同じ厚みの額縁になる。

完成形

横の gap-1 / gap-2、縦の gap-0.5 / gap-2、内側の p-4。ここまでの原則が、この求人カード 1枚に全部入っている。図解ではなく実クラスをそのまま使っている。