KARAKURIDESIGN SYSTEM
デザイントークンコンポーネント
トークンコンポーネント

はじめに

  • Overview
  • Installation
  • AI Guide

デザイントークン

  • Colors
  • Typography
  • Spacing
  • Shadows
  • Border Radius
  • Border Width
  • Breakpoints
  • z-Index
  • Opacity
  • Icon Sizes
  • Duration
  • Easing
  • Scale
  • Animation

デザインガイド

  • Icons
Figma Synced

Design Tokens

トークンを変えるだけで、デザインのすべてが変わる。テーマもカスタマイズも、驚くほどシンプル

Visual· 5
Colors

ブランドカラーからUI用途別カラーまで

A
Typography

書体、サイズ、太さの組み合わせ

Spacing

要素間の余白とレイアウト間隔

Shadows

UIの深さと浮き上がりを表現

Opacity

要素の透明度で視覚的な階層を表現

Shape· 3
Border Radius

角の丸みで柔らかさを調整

Border Width

境界線の太さで強調レベルを制御

Icon Sizes

用途別に最適化された6段階サイズ

Layout· 2
Breakpoints

画面サイズに応じたレイアウト切替

z-Index

要素の重なり順を管理

Motion· 4
Duration

アニメーションの速さを統一

Easing

動きの加速・減速カーブ

Scale

押下やアニメーションの拡縮効果

Animation

UI要素の出現・状態遷移モーション