Installs into .claude/skills of the current project.
Are you the author of Brand Identity?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/david-li0406-brand-identity)
---
name: brand-identity
description: Maintain the ArtFrost Portfolio aesthetic (Dark/Glassmorphism/3D). Use this skill when generating UI, styling components, or creating design assets.
---
# Brand Identity: ArtFrost Portfolio
## When to use this skill
- Generating or styling UI components (CSS/Tailwind).
- Creating or selecting icons and 3D assets.
- Writing marketing copy or content for the portfolio.
- Making decisions about layout, gradients, or glassmorphism effects.
## Reference Documentation
Always consult the specific resource files below. Do not guess design values.
### 1. Visual Design & Glassmorphism
For specific colors, gradients, blur values, and border radii:
👉 **[`resources/design-tokens.json`](resources/design-tokens.json)**
### 2. 3D Icon Strategy
For the list of required 3D icons, their placement, and generation prompts:
👉 **[`resources/3d-icon-strategy.md`](resources/3d-icon-strategy.md)**
### 3. Voice & Tone
For copywriting consistency (Professional, Future-forward):
👉 **[`resources/voice-tone.md`](resources/voice-tone.md)**
## Design Principles
1. **Theme by Default**: Default theme is **dark**; a **light** theme is available via a toggle.
2. **Smooth Switching**: Theme changes use a short, subtle transition; avoid FOUC on initial load.
3. **Dark & Deep**: Dark backgrounds lean to black/deep green.
4. **Glass**: Use subtle transparency with backdrop blur for cards/nav.
5. **Glow**: Use restrained radial gradients to support depth and 3D assets.
6. **Icons Hierarchy**: Flat UI icons are allowed for controls/social links; 3D assets are reserved for key visual anchors (Hero/section illustrations).
