Design System

takayaso.com のデザイントークン

Colors

グレースケール中心、最小限のアクセントカラー

Gray Scale

#fafafa
gray-50
#f5f5f5
gray-100
#e5e5e5
gray-200
#d4d4d4
gray-300
#a3a3a3
gray-400
#737373
gray-500
#525252
gray-600
#404040
gray-700
#262626
gray-800
#171717
gray-900

Background / Foreground

#ffffff
background.light
#0a0a0a
background.dark
#171717
foreground.light
#ededed
foreground.dark

Brand Colors (SNS)

#60a5fa
twitter
#ec4899
instagram
#22c55e
note
#404040
github

Semantic Colors

Success

#86efac
light
#22c55e
DEFAULT
#16a34a
dark

Warning

#fde047
light
#eab308
DEFAULT
#ca8a04
dark

Error

#fca5a5
light
#ef4444
DEFAULT
#dc2626
dark

Typography

Lato (Latin) + Noto Sans JP (Japanese)

Font Family

fontFamily: {
  sans: ['Lato', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
  mono: ['Lato', 'monospace'],
}

Font Size

xsあいうえお ABC 12312px
smあいうえお ABC 12314px
baseあいうえお ABC 12316px
lgあいうえお ABC 12318px
xlあいうえお ABC 12320px
2xlあいうえお ABC 12324px
3xlあいうえお ABC 12330px
4xlあいうえお ABC 12336px
5xlあいうえお ABC 12348px

Font Weight

normal (400) - 通常のテキスト
medium (500) - 少し強調
semibold (600) - 見出し
bold (700) - 強い強調

Line Height

lineHeight: {
  none: '1',
  tight: '1.25',
  snug: '1.375',
  normal: '1.5',    // 本文推奨
  relaxed: '1.625',
  loose: '2',
}

Spacing

4pxグリッドベース

Spacing Scale

14px
28px
312px
416px
624px
832px
1248px
1664px
2080px
2496px

Border Radius

sm2px
DEFAULT4px
md6px
lg8px
xl12px
2xl16px
full円形

Shadows

md: カード・ボタン / lg: ホバー時

sm
DEFAULT
mdカード・ボタン
lgホバー
xl

Transitions

短めのアニメーション (0.2-0.3s) + ease-out

Duration

fast: 200ms - カラー変化、ホバー
DEFAULT: 300ms - シャドウ、トランスフォーム
slow: 500ms - 複雑なアニメーション
entrance: 1000ms - ヒーロー、ページロード

Timing Function

transitionTimingFunction: {
  DEFAULT: 'ease-out',  // 推奨
  linear: 'linear',
  in: 'ease-in',
  inOut: 'ease-in-out',
}

Keyframe Animations

fadeIn
slideUp
scaleIn

Components

Buttons

Links

Normal LinkUnderline LinkExternal Link →

Cards

Standard Card

shadow-md, rounded-xl

Hover Card

shadow-lg on hover, -translate-y-1

Link Card

📄

Link Card Title

Description of the linked content

example.com

SNS Icon Buttons

takayaso.comで使用しているSNSアイコン（Lucide Icons）

白背景 + shadow-md, ホバーで shadow-lg + -translate-y-1

その他のSNS

アイコン一覧（Lucide Icons）

Twitter (X)
Instagram
File (note)
Github
Youtube
Linkedin
Facebook
Music2 (TikTok)
Home (Personal)

Input

Textarea

Select

Checkbox & Radio

Badge

DefaultInfoSuccessWarningError

Tooltip

Hover me (top)Hover me (bottom)

Dropdown Menu

Menu Item 1Menu Item 2Menu Item 3
Menu Item 4

Details / Accordion

Click to expand

This is the hidden content that appears when you expand the details element. It can contain any HTML content including text, images, and other elements.

Another accordion item

More hidden content here. Use this pattern for FAQs, collapsible sections, etc.

Image with Caption

Image Placeholder (16:9)
This is an image caption describing the content above.

Horizontal Rule

Default

Dashed

With text

OR

Profile Card

TA

Takayaso

Frontend Developer

Building beautiful and accessible web experiences.

Timeline

2024年1月

イベントタイトル

タイムラインアイテムの説明文がここに入ります。

2023年6月

別のイベント

過去のイベントの説明。

2023年1月

さらに過去のイベント

時系列で表示されるコンテンツ。

Alert

ℹ️
Info: This is an informational message.
✓
Success: Operation completed successfully.
⚠
Warning: Please review before continuing.
✕
Error: Something went wrong.

Avatar

XS
SM
MD
LG
XL

サイズ: xs(24px), sm(32px), md(40px), lg(48px), xl(64px)

Avatar Group

A
B
C
+3

Tabs

Tab 1 のコンテンツがここに表示されます。

Table

NameEmailRoleStatus
Takayasohello@takayaso.comDeveloperActive
John Doejohn@example.comDesignerPending
Jane Smithjane@example.comManagerInactive

Breadcrumb

Pagination

Loading

Spinner
Dots

Skeleton

Button Variations

Outline Buttons

With Icons

Loading State

Input with Icon

🔍
✉

Modal (Static Demo)

Modal Title

This is the modal content. You can put any content here.

Layout

Breakpoints

レスポンシブデザインのブレークポイント

sm640pxモバイル（横向き）
md768pxタブレット
lg1024pxデスクトップ
xl1280px大画面
2xl1536px超大画面

Z-Index Scale

レイヤー管理のためのz-index値

base0デフォルト
dropdown10ドロップダウン
sticky20スティッキーヘッダー
fixed30固定要素
modal-backdrop40モーダル背景
modal50モーダル
popover60ポップオーバー
tooltip70ツールチップ
toast80トースト通知

Container

smmax-w-2xl (672px)
mdmax-w-4xl (896px)
lgmax-w-6xl (1152px)
xlmax-w-7xl (1280px)

Section Backgrounds

default
gradient
white
dark

Hero Section

Hero Title

Subtitle or tagline goes here. Make it compelling.

Sidebar Layout

Main content area

Footer

takayaso.com

Building beautiful web experiences.

Links
HomeAboutWorks
Social

© 2026 takayaso. All rights reserved.

Navigation

ハンバーガーメニューはモバイル表示時に使用

Mobile Menu

Menu