frontend-design-skill

name frontend-design-skill description Create production-grade frontend interfaces following the Dynamous brand system. Use when building web components, pages, or applications for Dynamous. Implements a sophisticated dark-mode-first design language with glass morphism, signature blue accents, and technical-but-approachable aesthetics. Dynamous Frontend Design Skill Location: .kiro/skills/frontend-design-skill This skill guides creation of frontend interfaces that embody the Dynamous brand identity . Every interface should feel technical yet approachable, sophisticated yet accessible. Required reading for implementation details: Brand philosophy & complete specifications : See .kiro/skills/frontend-design-skill/resources/brand-system.md Live CSS reference & component examples : See .kiro/skills/frontend-design-skill/resources/design-system.html Brand Philosophy Before coding, internalize these core principles: 1. Technical but Approachable Complex AI topics made accessible without dumbing them down. Show sophistication, explain it clearly. The interface should feel like it was built by engineers who care about craft. 2. Clean over Flashy No unnecessary decoration. Every visual element has a purpose. Elegance through restraint. One well-placed glow effect beats ten scattered animations. 3. Dark Mode by Default Modern, developer-focused aesthetic. Easy on the eyes for people who stare at screens all day. The dark canvas makes the content shine. 4. Intentional Design Choices Bold decisions executed with precision. If something glows, it should glow for a reason. If something moves, it should move purposefully. Essential Design Tokens Colors — Dynamous Blue is the Hero /* Primary — Use sparingly for maximum impact */ --dynamous-blue : #3B82F6 ; /* Primary buttons, links, hero accents */ --dynamous-dark : #2563EB ; /* Hover states, outlines */ --dynamous-light : #60A5FA ; /* Secondary accents, highlights */ /* Dark Theme (Default) */ --background : #07090F ; /* Near-black with subtle blue tint */ --background-alt : #080A13 ; /* Slightly warmer alternative */ --surface : rgba ( 0 , 0 , 0 , 0.4 ); /* Glass card backgrounds */ --border : rgba ( 255 , 255 , 255 , 0.1 ); /* Text Hierarchy */ --text-primary : rgba ( 255 , 255 , 255 , 0.98 ); /* Headings */ --text-secondary : rgba ( 255 , 255 , 255 , 0.8 ); /* Body text */ --text-muted : rgba ( 255 , 255 , 255 , 0.7 ); /* Meta, labels */ /* Semantic (use only for meaning, not decoration) */ --success : #047857 ; --success-bg : #A7F3D0 ; --warning : #B45309 ; --warning-bg : #FEF3C7 ; --error : #B91C1C ; --error-bg : #FECACA ; --ai-purple : #6D28D9 ; --ai-purple-bg : #DDD6FE ; /* AI/LLM elements */ Rule : Dynamous Blue is the hero. Use it for actions and emphasis. Don't dilute by overusing. Typography — The Dynamous Stack --font-sans : 'Inter' , ui-sans-serif, system-ui, sans-serif; --font-mono : 'JetBrains Mono' , ui-monospace, monospace; --font-display : 'Montserrat' , var (--font-sans); /* Thumbnails, bold headlines */ Element Font Weight Notes Hero/Display Inter 700 Large, impactful headings H1 Inter 700 Page titles H2-H3 Inter 600 Section headers Body Inter 400 Readable paragraphs Buttons Inter 500 Clear CTAs Code JetBrains Mono 400 Developer-friendly Thumbnails Montserrat 800 Maximum impact only Spacing — Multiples of 8px --space-xs : 4px ; --space-sm : 8px ; --space-md : 12px ; --space-base : 16px ; --space-lg : 24px ; --space-xl : 32px ; --space-2xl : 48px ; --space-3xl : 64px ; Border Radius --radius-sm : 4px ; --radius-md : 8px ; --radius-lg : 12px ; --radius-xl : 16px ; --radius-full : 9999px ; Signature Elements These define the Dynamous visual identity. Use them consistently. Glass Card — The Defining Pattern Frosted glass over dark backgrounds. The signature container for content. .glass-card { background : rgba ( 0 , 0 , 0 , 0.4 ); backdrop-filter : blur ( 16px ); -webkit- backdrop-filter : blur ( 16px ); border : 1px solid rgba ( 255 , 255 , 255 , 0.1 ); border-radius : 12px ; } Use for : Content cards, video containers, feature highlights, testimonials. Do NOT use for : Buttons, navigation, form inputs (these need clarity). Blue Glow — Signature Emphasis Creates a soft halo around important elements. .blue-glow { box-shadow : 0 0 15px rgba ( 59 , 130 , 246 , 0.5 ), 0 0 30px rgba ( 59 , 130 , 246 , 0.3 ); } .text-glow { text-shadow : 0 0 10px rgba ( 59 , 130 , 246 , 0.5 ), 0 0 20px rgba ( 59 , 130 , 246 , 0.3 ); } Use for : Hero text highlights, primary buttons, featured content, logo in hero sections. Rule : Use sparingly. If everything glows, nothing does. Primary Button .btn-primary { background : var (--dynamous-blue); color : white; font-weight : 500 ; padding : 8px 16px ; border-radius : 8px ; box-shadow : 0 4px 14px - 4px rgba ( 59 , 130 , 246 , 0.4 ); transition : all 200ms cubic-bezier ( 0 , 0 , 0.2 , 1 ); } .btn-primary :hover { background : var (--dynamous-dark); transform : translateY (- 1px ); box-shadow : 0 6px 20px - 4px rgba ( 59 , 130 , 246 , 0.5 ); } Hero Gradient Background background : linear-gradient (to bottom, #07090f , rgba ( 30 , 58 , 138 , 0.9 ), #080a13 ); background-attachment : fixed; Grid Pattern (Subtle Background Texture) .grid-pattern { background-image : linear-gradient (to right, rgba ( 99 , 102 , 241 , 0.05 ) 1px , transparent 1px ), linear-gradient (to bottom, rgba ( 99 , 102 , 241 , 0.05 ) 1px , transparent 1px ); background-size : 40px 40px ; } Motion Guidelines Nothing should take longer than 600ms. Snappy > smooth. --duration-micro : 150ms ; /* Button states, toggles */ --duration-fast : 200ms ; /* Dropdowns, small transitions */ --duration-normal : 300ms ; /* Cards, modals */ --duration-slow : 600ms ; /* Page transitions, fade-ins */ --ease-out : cubic-bezier ( 0 , 0 , 0.2 , 1 ); /* Entrances */ --ease-in : cubic-bezier ( 0.4 , 0 , 1 , 1 ); /* Exits */ /* Never use linear for UI — feels robotic */ Signature Animations /* Float — decorative elements */ @keyframes float { 0% , 100% { transform : translateY ( 0 ); } 50% { transform : translateY (- 10px ); } } animation : float 6s ease-in-out infinite; /* Fade-in — content entrance */ @keyframes fade-in { 0% { opacity : 0 ; transform : translateY ( 10px ); } 100% { opacity : 1 ; transform : translateY ( 0 ); } } animation : fade-in 0.6s ease-out forwards; /* Shimmer — button hover effect */ .btn ::before { content : '' ; position : absolute; inset : 0 ; background : linear-gradient ( 90deg , transparent, rgba ( 255 , 255 , 255 , 0.1 ), transparent); transform : translateX (- 100% ); transition : transform 0.5s ease; } .btn :hover ::before { transform : translateX ( 100% ); } What Moves vs. What Doesn't Moves : Buttons, cards on hover, decorative logos, page sections on scroll, modals. Stays grounded : Body text, navigation, form inputs, critical UI. Anti-Patterns — What to Avoid Generic AI Aesthetics (AI Slop) Cliched purple gradients on white backgrounds Overused generic illustrations Cookie-cutter layouts without context Random floating geometric shapes Excessive glossy 3D elements Breaking Brand Consistency Using colors outside the Dynamous palette Light mode as default (always dark-first) Fonts other than Inter/Montserrat/JetBrains Mono Rounded corners that don't match the system (8px, 12px, 16px) Borders thicker than 1px for subtle elements Motion Mistakes Animations longer than 600ms Linear easing for UI transitions Animating body text Everything moving at once (use stagger delays) Glow Overuse Glowing everything (dilutes impact) Glow on non-interactive elements Multiple glow colors competing Implementation Workflow Start with the dark canvas : background: #07090F Establish text hierarchy : Primary (98%), secondary (80%), muted (70%) Add glass cards for containers : The signature frosted effect Use Dynamous Blue for actions : Buttons, links, highlights only Apply glow effects sparingly : Hero elements, primary CTAs Add motion last : Entrance animations, hover states When to Consult Reference Files Read .kiro/skills/frontend-design-skill/resources/brand-system.md when you need: Complete color specifications with HSL values Full typography rules and line heights Icon specifications (Lucide React, sizes) YouTube thumbnail specifications Diagram colors for Excalidraw Image treatment guidelines Complete CSS variables reference Read .kiro/skills/frontend-design-skill/resources/design-system.html when you need: Live component examples to reference Exact CSS implementations Interactive demos of animations Color swatches you can inspect Complete button/input/card variants Quick Reference Element Implementation Background #07090F or hero gradient Card Glass morphism with rgba(0,0,0,0.4) + blur Primary action Dynamous Blue #3B82F6 Text 98%/80%/70% white opacity hierarchy Borders rgba(255,255,255,0.1) always Corners 8px buttons, 12px cards Emphasis Blue glow, use once per viewport Motion ≤600ms, ease-out for entrances Remember: Dynamous interfaces should feel like they were crafted by engineers who deeply care about both technical excellence and visual design. Every pixel has purpose. Every animation has intent. Every glow creates focus.