NimbleBrain Design System
Clean, conversational, and built for SMBs and mid-market teams
Brand Identity
Primary Logo
Use on light backgrounds. Primary wordmark for all marketing materials.
NIRA Icon
Conversational AI identity. Use for product features and in-app branding.
Color Palette
Primary Colors
Neutral Colors
Brand Gradients
Typography
Font Family
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', ...
Inter for clean, professional typography. Falls back to system fonts for optimal performance.
Type Scale
Glassmorphic UI
Inspired by Studio's aesthetic - frosted glass effects with subtle transparency, blur, and depth.
Spacing System
8px base unit for consistent rhythm and alignment across all components.
Shadow System
Small
0 1px 3px rgba(0, 0, 0, 0.1) Medium
0 4px 12px rgba(0, 0, 0, 0.1) Large
0 10px 30px rgba(0, 0, 0, 0.15) XLarge
0 20px 60px rgba(0, 0, 0, 0.2) Buttons
Primary
Secondary
Ghost & Text Buttons
Perfect for footer links, navigation items, and low-emphasis actions
Glass Buttons
Navigation
Sticky navbar with glassmorphic backdrop blur for depth and clarity.
Sticky Navigation (Light)
nav {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 1000;
}Dark CTA Sections
High-contrast dark backgrounds for final CTAs and footer-adjacent sections.
Solid Dark CTA
Ready to transform your workflow?
Join thousands of teams automating their business through conversation.
<section class="cta-dark">
<div class="container-narrow" style="text-align: center;">
<h2>Ready to transform your workflow?</h2>
<p>Join thousands of teams...</p>
<a href="#" class="btn btn-primary btn-lg">Start talking to Nira</a>
</div>
</section>Gradient Dark CTA
<section class="cta-gradient-dark">
<div class="container-narrow" style="text-align: center;">
<h2>Automation through conversation.</h2>
<p>No flowcharts. No setup. Just talk to Nira.</p>
<a href="#" class="btn btn-primary btn-lg">Get started free</a>
</div>
</section>Dark CTA with Blue Gradient Accent
Border Radius
Clean, minimal components with subtle colors and refined details.
Subtle Tinted Cards
Replace bright colored backgrounds with elegant subtle tints. Perfect for feature cards and content sections.
Blue Tint
Subtle blue gradient for trust and professionalism
.card-tinted-blue Warm Tint
Warm gradient for energy and optimism
.card-tinted-warm Cool Tint
Cool gradient for freshness and growth
.card-tinted-cool Purple Tint
Purple gradient for creativity and innovation
.card-tinted-purple Amber Tint
Amber gradient for warmth and attention
.card-tinted-amber Feature Cards (with Icons)
Clean, minimal cards with category labels and icon containers. Perfect for feature grids.
Describe it. Done.
Tell Nira what you need in plain English. Nira builds and runs your workflows automatically.
Lightning fast
Optimized for speed and efficiency. Run hundreds of workflows simultaneously without slowdown.
Accurate results
Advanced AI ensures your automations work correctly every time, with built-in error handling.
Team-friendly
Share workflows with your team. Everyone stays in sync with real-time updates.
Feature Cards with Media
Cards where image/video extends to the edges with no padding. Media appears below content.
Describe it. Done.
Tell Nira what you need in plain English. Nira builds and runs your workflows automatically.
Ask once. Runs forever.
Set up recurring workflows that run automatically on your schedule.
One conversation. Every tool.
Connect all your tools in a single conversation interface.
Simple as a conversation.
No complex configuration. Just describe what you need.
<div class="feature-card feature-card-with-media">
<!-- Content first -->
<div class="feature-card-content">
<span class="feature-card-label">Category</span>
<h4 class="feature-card-title">Card Title</h4>
<p class="feature-card-description">Description text</p>
</div>
<!-- Media below with tinted background -->
<div class="feature-card-media-bottom media-bg-blue">
<img src="/image.jpg" alt="Feature" />
<!-- or <video> -->
</div>
</div>
<!-- Available tint backgrounds: -->
<!-- media-bg-blue, media-bg-warm, media-bg-cool, media-bg-purple, media-bg-amber, media-bg-gray -->Media Background Tints
Subtle background colors for media containers. Use these to color the padding area around images/videos.
media-bg-blue
media-bg-warm
media-bg-cool
media-bg-purple
media-bg-amber
media-bg-gray
Badges
Small, elegant badges for labels, status indicators, and feature highlights.
<span class="badge badge-new">New</span>
<span class="badge badge-primary">Featured</span>
<span class="badge badge-success">Active</span>
<span class="badge badge-warning">Beta</span>
<span class="badge badge-subtle">Coming Soon</span>Icon System (Lucide)
Using Lucide icons for clean, consistent iconography.
---
import { Sparkles, Zap, Target } from 'lucide-astro';
---
<div class="feature-icon feature-icon-blue">
<Sparkles size={24} />
</div>Refined Shadow System
Subtle shadows for cards and interactive elements.
Extra Small
--shadow-xs Card
--shadow-card Card Hover
--shadow-card-hover Subtle Tint Colors
Subtle tints for elegant background colors.
Hero Feature Card
Large feature card with 1/3 content + 2/3 image layout. Image extends to card edges with no padding.
Introducing Nira
Your AI coworker who handles the busywork.
Builds workflows automatically
Describe what you need. Nira builds it and runs it.
Full context of your business
Connected to your tools and data. Knows what you know.
Works with your team
Collaborates alongside everyone, keeping work in sync.
Usage: This card uses a 1fr 2fr grid layout. Content on left, full-bleed image on right with glowing orb effect.