Menu
Comprehensive guidelines for the Finflow design system, prioritizing a professional LinkedIn-inspired aesthetic.
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
Use when you have a written implementation plan to execute in a separate session with review checkpoints
Use when executing implementation plans with independent tasks in the current session
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes
UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
| name | styling-guide |
| description | Comprehensive guidelines for the Finflow design system, prioritizing a professional LinkedIn-inspired aesthetic. |
This guide defines the visual language and implementation rules for the Finflow platform. All new components and modifications must strictly adhere to these principles to maintain a premium, professional, and consistent user experience.
Finflow is built for financial clarity and professional trust. Our design draws heavy inspiration from LinkedIn's minimalist, clean, and accessibility-focused interface.
The colors are derived from professional fintech standards.
| Token | Value | Usage |
|---|---|---|
| Primary | #0a66c2 | Principal actions, branding, active states, links. |
| Primary Hover | #004182 | Hover states for primary buttons/links. |
| Background | #f3f2ef | Global page background (LinkedIn Grey). |
| Surface/Card | #ffffff | Content containers, cards, navigation bars. |
| Border | #e0e0e0 | Subtle dividers, input borders, card outlines. |
| Text Primary | #191919 | Main headings, body text, high-contrast labels. |
| Text Secondary | #666666 | Descriptions, timestamps, less important metadata. |
CRITICAL: Use outline-style icons only. High-fidelity stroke icons provide a lighter, more modern feel.
fill="none").2 for a balanced look.muted-foreground (#666666) for general icons, and primary (#0a66c2) only for active navigation or highlighted items.Buttons should feel solid and clickable without being bulky.
#0a66c2#ffffff)#004182#0a66c2#0a66c2rgba(10, 102, 194, 0.1)).Cards are the primary building block for data.
#ffffff).#e0e0e0). Do not use heavy shadows.#d1d1d1.backdrop-blur).#0a66c2).#0a66c2#f3f2ef) for all main page views to make white cards "pop".Always verify your changes against these rules. If a requested design contradicts these principles, prioritize the LinkedIn aesthetic for consistency.