Colors

Surfaces

--color-bg

D #0c0d10L #ffffff

Background

--color-bg-elevated

D #14161bL #f5f6f8

Elevated

--color-bg-panel

D #1a1d24L #eef0f4

Panel

--color-bg-inset

D #0a0b0eL #f9fafb

Inset

Ink

--color-ink

D #eceef2L #1a1e2a

Default

--color-ink-soft

D #ced2dbL #4a5066

Soft

--color-ink-faint

D #9199a6L #8090a8

Faint

--color-ink-ghost

D #5c6270L #c5cdd8

Ghost

Accent

--color-accent

D #52a878L #2b7050

Accent

--color-accent-dim

D #2d6649L #52a878

Accent Dim

Semantic

--color-up

D #5fd08a

--color-down

D #e5705a

Down

Typography

--font-display · 900 · displayDesign System

--font-display · 600 · headingComponent Library

--font-body · 400 · bodyデザインシステムは、AIによるUI生成の基盤である。

--font-mono · 400 · monoconst library = createLibrary({ root: "Stack", components: [...] })

Spacing

--s-1

4px

--s-2

8px

--s-3

12px

--s-4

16px

--s-5

24px

--s-6

32px

--s-7

48px

--s-8

64px

--s-9

96px

Border Radius

--radius-sm

4px

--radius-md

8px

--radius-lg

14px

TextContent

見出しと本文テキスト。variant で役割を指定する。

display

Design Engineer

heading

Design Systems × AI

body

デザインとエンジニアリングの両輪でデザインシステムを設計・構築し、AIを活用したフロントエンド実装の自動化を推進しています。

mono

library.prompt() → system prompt

StatCard

数値メトリクス。ラベルを上、数値を大きく表示する。

example

DESIGN EXPERIENCE

7 yrs

FRONTEND EXPERIENCE

2 yrs

COMPONENTS BUILT

20+

ProjectCard

ポートフォリオカード。ホバーで詳細がスライドアップする。

hover to reveal detail

Design System

デザインシステムの設計・運用フロー構築・実装。

Design SystemTokensVueTypeScript

既存プロダクトのバラバラなコンポーネントを整理し、トークンとコンポーネントを定義。

担当: 設計から実装まですべて
主な成果: 実装の自動化基盤の構築

Timeline

時系列リスト。キャリア歴やワークフローの表示に使う。

example

2026

デザインシステムの構築・運用

2025

Vue 2 → Vue 3 移行プロジェクト

2024

UIデザイン・フロントエンド実装を開始

Callout

キーメッセージや注釈の強調表示。tone で info / warn を切り替える。

info

デザインシステムは、AIによるUI生成の基盤である。

warn

このコンポーネント以外はLLMが生成できません。

Stack / Grid

レイアウトプリミティブ。Stack は縦並び、Grid はグリッド配置。

Stack

Stack の1番目

Stack の2番目

Stack の3番目

Grid (columns=2)

LABEL A

LABEL B