Colors

Surfaces

--color-bg#0c0d10Background

--color-bg-elevated#14161bElevated

--color-bg-panel#1a1d24Panel

--color-bg-inset#0a0b0eInset

Ink

--color-ink#eceef2Default

--color-ink-soft#ced2dbSoft

--color-ink-faint#9199a6Faint

--color-ink-ghost#5c6270Ghost

Accent

--color-accent#52a878Accent

--color-accent-dim#2d6649Accent Dim

Semantic

--color-up#5fd08aUp

--color-down#e5705aDown

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

xenoMateria

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

Design SystemTokensVueTypeScript

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

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

Timeline

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

example

2024

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

2023

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

2022

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