SPORTSfolio DESIGN SYSTEM
Design system tokens, components, and patterns derived from the SPORTSfolio mockups.
Logo
Horizontal Logo
Logomark / Favicon
ロゴは「SPORTS folio」のテキストロゴ（logo.svg）と、Sフレームのロゴマーク（favicon.png）の2種類。白背景・黒背景の両方で使用可能。
Colors
Background Base
#FFFFFF
--color-bg-base
Surface
#FFFFFF
--color-bg-surface
Overlay
#F5F5F5
--color-bg-overlay
Overlay Hover
#E8E8E8
--color-bg-overlay-hover
Text Primary
#131313
--color-text
Text Secondary
#888888
--color-text-sub
Text Muted / Hover Dark
#333333
--color-text-muted
Border
#E5E5E5
--color-border
Accent / Brand Blue
#2563EB
--color-accent
Accent Hover
#1D4ED8
--color-accent-hover
Live / Alert / Error
#DC2626
--color-live
Success
#22C55E
--color-success
Warning
#D97706
--color-warning
Warning Background
#FFFBEB
--color-warning-bg
Info
#38BDF8
--color-info
Info Background
#F0F9FF
--color-info-bg
Error
#DC2626
--color-error
Error Background
#FEE2E2
--color-error-bg
Footer Background
#131313
--color-footer-bg
Footer Text
#FFFFFF
--color-footer-text
Gradients
Brand Gradient
#131313 → #3C92ED (135deg)
--gradient-brand
Typography
Font Families
--font-sans
Oswald, Noto Sans JP, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
スポーツを通じたつながりをデザインする
--font-mono
Geist Mono, JetBrains Mono, monospace
const portfolio = await fetch(url);
Font Size Scale (Fluid Typography)
全サイズがclamp()によるfluid typographyで定義。320px〜1280pxの間でスムーズに補間。
Buttons
5 variants: Primary (black), Secondary (gray), Ghost (minimal), Danger (red), Accent (blue). Border radius is 4-6px (subtle, not pill-shaped). fullWidth prop で全幅 CTA に。
Sizes
Form Elements
Box-style inputs: rounded-lg border with bg-overlay background. Label above in medium weight. Error state uses border-live (red border) with text-live error message below.
Display name shown on your profile
We will never share your email.
Username must be at least 3 characters.
Sports Tags
ピル型（rounded-full）のスポーツタグ。2バリアント。
Accent（通常背景）
ストーリーカード、ポートフォリオのスポーツ表示に使用
Overlay（画像上）
カバー画像やダーク背景上でのスポーツ表示に使用
Layout
--content-width-xs
--content-width-sm
--content-width-md
--content-width-lg
--content-max-width
--content-gutter
--content-gutter
--content-gutter
--header-height
--sidebar-width
Border Radius
2種類のみ。rounded-lg（4px）を基本に、rounded-fullはアバター・ピル型タグ専用。
Shadows
Transitions
Hover
全てのインタラクティブ要素のhover表現は hover:opacity-70 transition-opacity に統一。 色変更・影追加・浮き上がり・underline等のhover表現は禁止。
Card
例外: フォーム要素（Input/Select/Textarea）の hover:border-text-sub/30 のみ許可。
Z-Index Scale
レイヤーの重なり順を管理するスケール。値が大きいほど前面に表示される。
Cards
Default Card
White background, subtle border, rounded-lg corners.
Hoverable Card
Hover to see opacity change.
Confirm Dialog
削除・実行確認などの破壊的/重要なアクションの前に表示する確認ダイアログ。2 variants: Danger (red), Primary (black).
danger — 削除・停止等
Confirm Action
本当に削除しますか？
この操作は取り消せません。
primary — 通常確認
Confirm Action
変更を保存しますか？
保存した内容は公開されます。
Toast
操作結果のフィードバックに使用するトースト通知。画面上部中央に表示、3秒で自動消去。
タイトルのみ
フォローしました
タイトル + サブテキスト
保存に失敗しました
もう一度お試しください。
Spacing Scale
Tailwindデフォルトスケールから以下の値のみ使用を許可。gap, padding, margin, space全てに適用。 これ以外の値（arbitrary values含む）は使用禁止。
Font Weights
使用を許可するフォントウェイト。これ以外（font-light, font-thin, font-normal等）は使用禁止。 テキストのデフォルトウェイトは400（CSS初期値）。
Line Height
使用を許可する行間は3種類。bodyデフォルト（1.5）は暗黙で適用されるため明示不要。
スポーツを通じたつながりをデザインする。SPORTSfolioはアスリートのキャリアを可視化し、チームとのマッチングを実現するプラットフォームです。
スポーツを通じたつながりをデザインする。SPORTSfolioはアスリートのキャリアを可視化し、チームとのマッチングを実現するプラットフォームです。
スポーツを通じたつながりをデザインする。SPORTSfolioはアスリートのキャリアを可視化し、チームとのマッチングを実現するプラットフォームです。
Letter Spacing
使用を許可するレタースペーシング。デフォルト（tracking-normal = 0）以外に使う場面は限定的。
Opacity Scale
色の透明度修飾子（/XX）で使用を許可する値。例: text-text-sub/60, bg-accent/10。 opacity-50はdisabled状態専用。
SPORTSfolio Design System v1.3