DESIGN SYSTEM — LIVE

EurekaOrange
Design System.

複数プロダクト横断で使えるトークンベースのデザインシステム。カラー・タイポグラフィ・コンポーネント・モーション・アイコンの統一された体系。

614+

Tokens

56

Icons

10

Pages

2

Themes

Foundation

Design System

カラーパレット・タイポグラフィ・スペーシング・シャドウ・コンポーネントを網羅したメインカタログ。

Colors Typography Spacing

Token Reference

57個のデザイントークン一覧。CSS・JSON形式でダウンロード可能。検索・カテゴリフィルター付き。

57 tokens CSS Export JSON Export

Light Mode Tokens

ダーク/ライト両テーマのセマンティックトークン比較。data-theme属性でワンライン切替。

Dark Light Semantic

Motion Principles

Duration・Easing・アニメーションのインタラクティブデモ。reduced-motionアクセシビリティ対応。

5 Durations 5 Easings A11y

Grid System

12カラムグリッド・レスポンシブブレークポイント・よく使うレイアウトパターンの定義と見本。

12 cols Responsive Templates

Components & Assets

Components

ボタン・フォーム・モーダル・テーブル・ナビ・フィードバック・データ表示。インタラクティブデモ付き。

Buttons Forms Table Modal

Icon System

56個のDuotoneアイコン。Navigation・UI・Status・Brand・Dataカテゴリ。SVGエクスポート対応。

56 Icons Duotone SVG Export

Brand Assets

OGイメージ・SNSバナー・メールヘッダー・アプリアイコン・ロゴ各種バリエーション。

Logo Banners App Icon

Product Mockups

Landing Page

Hi-fiマーケティングページ。Hero・Features・TokenShowcase・Pricing・CTA・Footerを含む完全版。

Hi-fi Marketing Interactive

Settings

プロフィール・外観・セキュリティ・請求・通知・API Keys・Danger Zoneの7タブ完全実装。

Hi-fi 7 Tabs Interactive

Tools & Export

Figma Variables

全トークンをFigma Variables JSON形式でエクスポート。Primitives・SemanticのDark/Lightモード対応。

JSON Export Dark/Light Collections

CSS Package

全トークンのCSS Custom Properties + ユーティリティクラス。Dark/Lightテーマ・コンポーネントCSSを含む。

CSS Variables Utilities Components

Tailwind Config

TailwindCSSの全トークン設定。カラー・スペーシング・フォント・アニメーション・シャドウを含む。

Tailwind v3/v4 Theme Extend Animations

─── Quick Start

5分で始める

eureka-orange.css をHTMLに読み込むだけで、全トークン・ユーティリティクラス・コンポーネントCSSが使えます。

1

CSSファイルをlink要素で読み込む

2

<html data-theme="dark"> でテーマ指定

3

var(--eo-*) トークンまたは eo-btn クラスを使用

index.html

<!-- 1. Load CSS -->
<link rel="stylesheet"
      href="eureka-orange.css">

<!-- 2. Set theme -->
<html data-theme="dark">

<!-- 3. Use tokens + classes -->
<button class="eo-btn eo-btn-primary">
  Get started
</button>

/* Or use raw tokens */
.my-element {
  color: var(--eo-accent);
  background: var(--eo-surface-raised);
}

EurekaOrange Design System v1.0.0

© 2025 · Built with EurekaOrange CSS