// 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.
| 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. |
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:
.kiro/skills/frontend-design-skill/resources/brand-system.md.kiro/skills/frontend-design-skill/resources/design-system.htmlBefore coding, internalize these core principles:
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.
No unnecessary decoration. Every visual element has a purpose. Elegance through restraint. One well-placed glow effect beats ten scattered animations.
Modern, developer-focused aesthetic. Easy on the eyes for people who stare at screens all day. The dark canvas makes the content shine.
Bold decisions executed with precision. If something glows, it should glow for a reason. If something moves, it should move purposefully.
/* 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.
--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 |
--space-xs: 4px; --space-sm: 8px; --space-md: 12px;
--space-base: 16px; --space-lg: 24px; --space-xl: 32px;
--space-2xl: 48px; --space-3xl: 64px;
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
--radius-xl: 16px; --radius-full: 9999px;
These define the Dynamous visual identity. Use them consistently.
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).
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.
.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);
}
background: linear-gradient(to bottom, #07090f, rgba(30, 58, 138, 0.9), #080a13);
background-attachment: fixed;
.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;
}
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 */
/* 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%); }
Moves: Buttons, cards on hover, decorative logos, page sections on scroll, modals. Stays grounded: Body text, navigation, form inputs, critical UI.
background: #07090FRead .kiro/skills/frontend-design-skill/resources/brand-system.md when you need:
Read .kiro/skills/frontend-design-skill/resources/design-system.html when you need:
| 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.