UI Components & Tokens

デザインシステム

Arterectのブランドアイデンティティと一貫性を保つための基盤。プレミアムなコンポーネントライブラリ。

Background
#050505

Accent
#9ca3af

Text
#FFFFFF

colors

Color Palette

ブランドのコアとなるカラーパレット。深い黒とニュートラルなアクセントが基調です。

Usage Example

// tailwind.config.ts
colors: {
  background: '#050505',
  accent: {
    DEFAULT: '#9ca3af',
    light: '#d1d5db',
    dark: '#6b7280',
  }
}

Display Large

text-5xl md:text-7xl / font-bold / tracking-tighter

Section Heading

text-2xl / font-bold / tracking-tight

Body text that is highly legible and elegant. Used for descriptions and paragraphs across the application.

text-sm / text-white/60 / font-light / leading-relaxed

typography

Typography System

可読性とデザイン性を両立するタイポグラフィの設定。見出しには力強さを、本文には透明感を持たせています。

Usage Example

// font family usage
className="font-sans font-bold tracking-tighter"
className="font-mono text-sm tracking-[0.3em] uppercase"

Glass Panelbg-white/5 backdrop-blur-xl

glassmorphism

Glassmorphism Panels

Context Layerなどで使用される、背景のブラー効果と透過度を活用したパネルデザイン。

Usage Example

<div className="
  bg-white/5 
  backdrop-blur-xl 
  border border-white/10 
  rounded-3xl 
  shadow-[0_8px_32px_0_rgba(0,0,0,0.3)]
">
  {content}
</div>