Menu
Reference guide for portfolio color palettes. Includes quick vibe lookup, full palettes, and application guidelines using the 60-30-10 rule.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
AI assistant framework for building unique, authentic portfolio websites from scratch. Guides agents through research, design, and implementation phases.
Publish a completed Persona portfolio safely through Vercel or GitHub Pages.
Generate authentic, compelling copy for portfolios. Covers tone calibration, taglines, bios, project descriptions, and avoiding assumptions.
Create unique visual designs by synthesizing from inspirations and preferences. Covers typography, color, layout, spacing, and animation philosophy.
Reference for selecting distinctive typography. Includes font recommendations by vibe, category, archetype, and pairing guidelines for Next.js projects.
Gather information about users from materials, profile config, GitHub, and web search to inform portfolio content and design decisions.
| name | colors |
| description | Reference guide for portfolio color palettes. Includes quick vibe lookup, full palettes, and application guidelines using the 60-30-10 rule. |
Reference guide for portfolio color palettes.
| Vibe | Palette | Key Colors |
|---|---|---|
| Professional | Minimalist | #F4F4F4 #2E2E2E #4A90E2 |
| Creative | Bold | #1B1B1B #F8B400 #E63946 |
| Technical | Tech | #0F172A #22D3EE #64748B |
| Approachable | Earthy | #E9C46A #264653 #2A9D8F |
| Luxury | Elegant | #1C1C1C #BFA181 #D4C5B0 |
| Calm | Soft | #F3EEE9 #C4737C #DFA0F3 |
| Mysterious | Night | #272930 #17191A #B8B8CA |
| Nature | Forest | #1C1C1C #435146 #4A6958 |
Frontend devs, clean professional look
#F4F4F4 background #2E2E2E text
#FFFFFF surface #4A90E2 accent
Designers, personality-forward
#1B1B1B background #FFFFFF text
#F8B400 primary #E63946 secondary
Backend, AI, cybersecurity
#0F172A background #F4F4F4 text
#22D3EE accent #64748B muted
Sustainability, ethical tech
#FFFFFF background #264653 primary
#E9C46A accent #2A9D8F secondary
Senior devs, consultants
#1C1C1C background #F4F4F4 text
#BFA181 primary #D4C5B0 secondary
Wellness, personal brands
#F3EEE9 background #E1D3CA secondary
#C4737C primary #DFA0F3 accent
Photography, contemplative
#272930 background #121315 deep
#17191A surface #B8B8CA accent
Nature-focused elegance
#1C1C1C background #1B2922 deep
#435146 primary #4A6958 secondary
Lifestyle, warmth
#273231 background #17191A deep
#EEC5A0 primary #AD6E54 accent
Monochromatic tech
#141413 background #AFACA1 primary
#BDBBB2 secondary #C9C8BF tertiary
60-30-10 Rule: 60% background, 30% secondary, 10% accent
| Element | Color Role |
|---|---|
| Page background | Background |
| Headers, nav, buttons | Primary |
| Cards, surfaces | Secondary |
| CTAs, links, hover | Accent |
#FF6B35, #E76F51)#000000 on #FFFFFF (too harsh)