← スキル一覧に戻る

brand-guidelines
by tienbm92
Personal AI context base used for bootstrapping new projects and feature development. Acts as the backbone for architecture, domain rules, and reusable design patterns.
⭐ 0🍴 0📅 2026年1月26日
SKILL.md
name: brand-guidelines description: 'Apply brand colors, typography, và style guidelines cho artifacts. Sử dụng khi cần brand identity, visual formatting, company design standards, corporate styling.'
Brand Guidelines Skill
Skill này cung cấp brand identity và style resources. Áp dụng cho artifacts cần consistent brand look-and-feel.
Khi Nào Sử Dụng
- Apply brand colors/typography
- Visual formatting theo brand
- Corporate identity styling
- Consistent design standards
- Post-processing artifacts
Default Brand Template
Colors
Main Colors:
| Color | Hex | Usage |
|---|---|---|
| Dark | #141413 | Primary text, dark backgrounds |
| Light | #faf9f5 | Light backgrounds, text on dark |
| Mid Gray | #b0aea5 | Secondary elements |
| Light Gray | #e8e6dc | Subtle backgrounds |
Accent Colors:
| Color | Hex | Usage |
|---|---|---|
| Orange | #d97757 | Primary accent, CTAs |
| Blue | #6a9bcc | Secondary accent, links |
| Green | #788c5d | Tertiary accent, success |
Typography
| Type | Font | Fallback |
|---|---|---|
| Headings | Poppins | Arial |
| Body Text | Lora | Georgia |
CSS Variables Template
:root {
/* Main Colors */
--brand-dark: #141413;
--brand-light: #faf9f5;
--brand-mid-gray: #b0aea5;
--brand-light-gray: #e8e6dc;
/* Accent Colors */
--brand-orange: #d97757;
--brand-blue: #6a9bcc;
--brand-green: #788c5d;
/* Typography */
--font-heading: 'Poppins', Arial, sans-serif;
--font-body: 'Lora', Georgia, serif;
}
Application Guidelines
Headings
h1, h2, h3 {
font-family: var(--font-heading);
color: var(--brand-dark);
font-weight: 600;
}
Body Text
body, p {
font-family: var(--font-body);
color: var(--brand-dark);
line-height: 1.6;
}
Buttons (Primary)
.btn-primary {
background: var(--brand-orange);
color: var(--brand-light);
border: none;
padding: 12px 24px;
border-radius: 8px;
}
Buttons (Secondary)
.btn-secondary {
background: transparent;
color: var(--brand-dark);
border: 2px solid var(--brand-mid-gray);
}
Links
a {
color: var(--brand-blue);
text-decoration: none;
}
a:hover {
color: var(--brand-orange);
}
Custom Brand Setup
Khi cần brand riêng, thu thập:
Required Information
| Element | Details Needed |
|---|---|
| Logo | URL hoặc description |
| Primary Color | Hex code |
| Secondary Colors | Hex codes |
| Heading Font | Font name |
| Body Font | Font name |
| Tone | Professional, playful, etc. |
Brand Definition Template
brand_name: "[Company Name]"
colors:
primary: "#XXXXXX"
secondary: "#XXXXXX"
accent: "#XXXXXX"
background: "#XXXXXX"
text: "#XXXXXX"
typography:
heading: "[Font Name]"
body: "[Font Name]"
tone: "[professional/playful/modern/classic]"
Quick Reference
Color Contrast Guidelines
| Background | Text | Accent |
|---|---|---|
| Light (#faf9f5) | Dark (#141413) | Orange (#d97757) |
| Dark (#141413) | Light (#faf9f5) | Blue (#6a9bcc) |
| Mid Gray (#b0aea5) | Dark (#141413) | Green (#788c5d) |
Font Pairing Rules
| Heading | Body | Vibe |
|---|---|---|
| Poppins | Lora | Modern + Classic |
| Montserrat | Open Sans | Clean + Readable |
| Playfair Display | Lato | Elegant + Friendly |
Note: Fonts should be pre-installed hoặc imported từ Google Fonts for best results.
スコア
総合スコア
70/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
✓説明文
100文字以上の説明がある
+10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です