Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals. ## When to Use This Skill - Establishing design tokens for a new project - Creating or refining a spacing and sizing system - Selecting and pairing typefaces - Building accessible color palettes - Designing icon systems and visual assets - Improving visual hierarchy and readability - Auditing designs for visual consistency - Implementing dark mode or theming ## Core Systems ### 1. Typography Scale **Modular Scale** (ratio-based sizing): ```css :root { --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ } ``` **Line Height Guidelines**: | Text Type | Line Height | |-----------|-------------| | Headings | 1.1 - 1.3 | | Body text | 1.5 - 1.7 | | UI labels | 1.2 - 1.4 | ### 2. Spacing System **8-point grid** (industry standard): ```css :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ } ``` ### 3. Color System **Semantic color tokens**: ```css :root { /* Brand */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-active: #1e40af; /* Semantic */ --color-success: #16a34a; --color-warning: #ca8a04;
Philosophy
Skillora では、スキルを売る人も買う人も同じコミュニティにいます。 気に入った作者の新作やアップデートを追いかけたり、自分も出品して還元を受け取ったり。 好きなクリエイターをフォローして、発見と応援をひとつの場所で。
購入後にターミナルで実行してください。
正規購入者にはインストールコマンド再実行で最新版が配信されます。
継続的な価値を提供します
Skilloraのスキルはライセンス認証で保護されており、定期的にアップデートされます。スクリーンショットやコピーでは最新版を受け取れず、バグ修正や新機能の恩恵も得られません。正規購入者には常に最新バージョンが自動配信されます。
利用規約を確認 →—
評価なし
まだレビューがありません。最初のレビューを書いてみましょう。
Free
無料で導入共有する
SNS・リンクで広める
Visual Design Foundations — AIの使い方が変わるスキル
Typography, color theory, spacing, iconography for cohesive visual design. Use for design tokens, style guides, visual hierarchy.
https://skillora.jp/skills/visual-design-foundations
この作者の他のスキル