| name | portfolio-design |
| description | Visual consistency check for the portfolio website. Use when making UI changes, when the user asks to "refine", "polish", or "restyle" anything, when adding a new section or card, or when troubleshooting why something looks off. Enforces the design system documented in CLAUDE.md. |
Portfolio visual polish
Before writing any UI change, re-read CLAUDE.md — specifically the "Design system" section — and follow every rule.
Non-negotiables
- No gradients for decorative color fades. Hero two-tone split and 1px grid-line overlays are the only allowed gradient-syntax uses.
- No outlined text (
-webkit-text-stroke). Use italic + accent color for emphasis instead.
- No
apple-grid background class. Each section has its own --bg-<section> token.
- Tags stay quiet —
.tag + color variant, never loud ribbons with offset shadows.
- Cards use
.chunky-card — no per-card colored borders.
- Navbar is transparent at top of page, fades to solid on scroll — never fully solid at top (it would overlap the lamp).
- Freelance, not student — Lamia identifies as a freelance software engineer in hero/footer/about copy.
Before committing any visual change
When in doubt
- Reach for quiet over loud.
- Solid fills + thin borders beat gradient washes.
- Hand-drawn SVG accents (stars, doodles) fit; generic stock-vector shapes don't.
- cassie.codes + kawe.ski are the reference aesthetics.
