design system v4 - advanced toolkit
UI IP
ToolkitPro Frontend Assets
Explorar
01 - Neumorphism
Soft UI Kit
Modern Neumorphic elements with deep and surface shadows.
*
Soft Card
inset
Concave
02 - Animated Borders
Rotating Edges
Inspired by ReactBits - CSS-only conic gradient border animations.
Conic Rotate
Self-contained animation
03 - Text Reveal
Kinetic Typography
REVEAL
04 - Colors
Color System
Curated palette - click any swatch to copy standalone HTML.
Void
#060507
Violet
#c2a4ff
Purple
#c481ff
Amethyst
#aa42ff
Pink
#fb8dff
White
#eae5ec
Navy
#020617
Orange
#ff9966
Mint
#4ade80
Rose
#f43f5e
Gold
#eab308
05 - Gradients
Gradient Library
Purple -> Pink
Violet -> White
Brand Radial
Mint -> Violet
Aurora
Vaporwave
Matrix
Quantum
Dynamic 1
Dynamic 2
Dynamic 3
Dynamic 4
Dynamic 5
Dynamic 6
Dynamic 7
Dynamic 8
Dynamic 9
Dynamic 10
Dynamic 11
Dynamic 12
Dynamic 13
Dynamic 14
Dynamic 15
Dynamic 16
Dynamic 17
Dynamic 18
Dynamic 19
Dynamic 20
06 - Animations
Keyframe Animations
Blink
Cursor pulse
Bounce
Elastic jump
Pulse
Heartbeat
Spin
Loader
Glow
Neon pulse
Float
Levitate
Morph
Shape shift
Shake
Error alert
07 - Typography
Font Collection
ClashDisplay
Creative
Developer
Developer
300400500600700
Geist Sans
Clean &
Modern
Modern
200400600
09 - Input Kit
Form Elements
A denser input library with balanced cards, practical form patterns, and cleaner previews for real product surfaces.
SearchCmd K
Command Search
Rounded query field with shortcut affordance.
Floating Label
Minimal underline input with persistent label.
Split Fields
Two-up identity inputs for faster onboarding.
Contact Stack
A complete contact card with strong spacing rhythm.
Password Field
Protected entry with action button and calmer chrome.
482196
OTP Row
Six-digit confirmation layout sized for mobile keyboards.
DashboardFormsMotion
Filter Builder
Tags plus input field for search-driven configuration.
Newsletter Bar
Inline capture row sized for hero or footer placement.
Used to tailor the starter workspace.
Select Field
Dropdown with inline guidance instead of extra clutter.
0 / 280
Composer
Textarea pattern with built-in action row and counter.
Upload files
Drop assets here
PNG, JPG or SVG up to 8 MB
Dropzone
Upload state that reads clearly without icons or noise.
Payment Fields
A compact checkout card with readable grouping.
Starter
For lean teams
Scale
For bigger launches
Plan Cards
Radio alternative that feels premium on pricing flows.
Seats24
StarterEnterprise
Range Selector
Quantity slider that reads well inside pricing and config flows.
10 - Loading States
Loading Patterns
Bouncing Dots
Alternative dots
Sonar Pulse
Radar effect
Indeterminate Bar
Progress sweep
Spinner
Classic ring
Dots Pulse
Bouncing dots
Skeleton
Content shimmer
Orbit Spinner
Circular orbiting dots
Skeleton Block
Shimmering placeholder
Wave Bars
Audio-like equalizer
Morph Square
Square to circle
Spinner 1
Spinner 2
Spinner 3
Spinner 4
Spinner 5
Spinner 6
Spinner 7
Spinner 8
Spinner 9
Spinner 10
Ping Ring 1
Expanding circle
Ping Ring 2
Expanding circle
Ping Ring 3
Expanding circle
Ping Ring 4
Expanding circle
Ping Ring 5
Expanding circle
Ping Ring 6
Expanding circle
Ping Ring 7
Expanding circle
Ping Ring 8
Expanding circle
Ping Ring 9
Expanding circle
Ping Ring 10
Expanding circle
Ping Ring 11
Expanding circle
Ping Ring 12
Expanding circle
11 - Text Effects
Text Styles
Glitch Echo
GLITCHShine Sweep
Shine SweepTypewriter
Gradient Fill
Gradient Text
Outline Stroke
Outline Type
Neon Glow
Neon Glow
Hard Shadow
Shadow Stack
Soft Focus
Soft FocusLayered Echo
Layered EchoMono Signal
mono signal12 - Shadows
Shadow Collection
Subtle
0 1px 2px
Default
0 4px 12px
Large
0 16px 48px
Neon Glow
neon #c2a4ff
Glow 1
Shadow 1
Glow 2
Shadow 2
Glow 3
Shadow 3
Glow 4
Shadow 4
Glow 5
Shadow 5
Glow 6
Shadow 6
Glow 7
Shadow 7
Glow 8
Shadow 8
Glow 9
Shadow 9
Glow 10
Shadow 10
13 - Hover FX
Hover Effects
Shine Sweep ->
Shine Sweep
Light sweep across on hover
*
Scale Glow
Grow with neon shadow
14 - Glassmorphism
Glass Components
Frost Panel
Sessions
18.4KOverviewAssets
Orb Badge
Modal shellDraft
42
87
19
15 - CSS Utils
Interactive Utilities
Progress Rail
Micro progress indicator for sticky headers.
Spotlight
Spotlight Mask
Ambient highlight for hovered panels.
Noise panel
Noise Panel
Texture helper for empty states and hero plates.
Divider
Dotted Divider
Timeline and editorial separator utility.
LiveDraft
Floating Pill Bar
Compact status switcher for dashboards and docs.
Sticky note
Sticky Note
Utility block for ephemeral inline reminders.
Window Dots
Desktop shell accent for browser or app mockups.
BetaPanel
Corner Badge
Status tag for cards without extra wrapper markup.
16 - Neutral Toolkit
Core Components
Quiet Tabs
Neutral segmented control
Home/Library/Inputs
Breadcrumb Trail
Neutral path navigation
Skeleton Row
Loading placeholder for text blocks
Saved locallyAuto-sync
Inline Notice
Calm status banner
Loader Rail
Mono progress stripe
Reveal Block
High-contrast headline treatment
Conversion
12.8%Stat Tile
Metric panel without color bias
Milestone shippedApril 2026
Timeline Chip
Neutral event row for roadmaps
17 - Components
UI Components
Timeline Dot
Neon pulse for timelines
Gradient Border
Gradient Border
Animated gradient wrapper
ReactOnlineUrgentPremium
Badges
Color-coded status tags
Toggle
On/off switch
Tooltip
Hover to reveal
Avatar Group
Overlapping avatars
Progress Bar
Status visualizer
Status Dot
Active status indicator
18 - Layouts
Layout Blueprints
Masonry Mock
Holy Grail
Sidebar + Content
Bento Layout
Split Hero
Dashboard Rail
Editorial Stack
Dense Data Grid
19 - Dialogs & Overlays
Dialogs & Overlays
Modals, drawers, command layers and stacked alerts tuned for production product flows.
20 - Tables & Data Views
Tables & Data Views
Dense admin tables, KPI grids and list-detail compositions that still read cleanly at a glance.
21 - Empty States & Feedback
Empty States & Feedback
Zero states, inline success and failure messaging, and onboarding prompts with stronger product presence.
22 - Panels & Settings
Panels & Settings
Inspector rails, settings slabs and split-pane shells for account, security and workspace management.
24 - Hero Headlines
Hero Headlines
Headline systems for SaaS, editorial and launch pages, built as native HTML snippets instead of copied gallery assets.
25 - CTA Blocks
CTA Blocks
Conversion blocks for pricing, downloads, newsletters and modal actions with readable preview stages.
26 - 404 & Error Pages
404 & Error Pages
Recovery states with clear hierarchy, fallback actions and enough personality to avoid dead-end product moments.
28 - Bento Systems
Bento Systems
Feature, dashboard, stats and media bento layouts generated as responsive native snippets.
29 - Pricing Sections
Pricing Sections
Plan cards, comparison bands and upgrade prompts generated as native pricing UI.
30 - Form Patterns
Form Patterns
Lead forms, onboarding forms, checkout forms and search inputs with strong preview anatomy.
31 - Feature Sections
Feature Sections
Feature rows, process strips and comparison sections built as reusable landing-page blocks.
37 - H1 AI & SaaS
AI & SaaS Headlines
Original headline systems for AI tools, cloud platforms, analytics and B2B workflow products.
38 - H1 Commerce & Creator
Commerce & Creator Headlines
Original marketing headlines for commerce, creator tools, memberships and download-led products.
39 - H1 Editorial & Portfolio
Editorial & Portfolio Headlines
Large-type headline compositions for studios, editorial surfaces and personal portfolio pages.
40 - CTA Purchase & Subscription
Purchase & Subscription CTAs
Buy, upgrade, pricing and subscription prompts built as reusable conversion blocks.
41 - CTA Download & Template
Download & Template CTAs
Download, starter kit, free resource and template CTAs with clear payload framing.
43 - 404 Style Studies
404 Style Studies
Minimal, bold, typographic, playful and visual error-page styles built as original native blocks.
44 - 404 Recovery Flows
Error Recovery Flows
Search, support, retry, route-switch and permission recovery states for real product failures.
45 - 404 Industry Pages
Industry Error Pages
Original 404 systems tailored for SaaS, commerce, media, finance, nonprofit and portfolio contexts.
49 - Bento Feature Landing
Feature Landing Bentos
Landing-page bento grids for feature storytelling, product proof and modular value props.
50 - Bento Dashboard Grids
Dashboard Bento Grids
Dashboard, metrics, automation and operations bento layouts with reusable native surfaces.
51 - Bento Media & Portfolio
Media & Portfolio Bentos
Portfolio, creator, media and case-study bento compositions with mobile-safe geometry.
20 - Design Tokens
Token System
Atomic design values as CSS custom properties. Click copy on any token block.
Spacing Scale
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-4: 1rem; /* 16px */
--sp-6: 1.5rem; /* 24px */
--sp-8: 2rem; /* 32px */Shadow Tokens
--sh-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
--sh-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--sh-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
--sh-xl: 0 20px 25px -5px rgba(0,0,0,0.1);Font Size Scale
xs size
sm size
base size
lg size
xl size
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.25rem;Z-Index Scale
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 30;
--z-modal: 40;
--z-toast: 50;21 - Easing Curves
Motion Easings
Ease Out Expo
cubic-bezier(0.16, 1, 0.3, 1)
Ease Out Back
cubic-bezier(0.34, 1.56, 0.64, 1)
Spring Bounce
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Elastic Out
cubic-bezier(0.3, 1.7, 0.5, 1)
22 - Style Catalog
UI Style Archetypes
58 visual archetypes. Copy any palette as CSS variables.
Minimalism
GENERALClean, spacious, grid-based, sans-serif.
EnterpriseSaaSDashboards
Glassmorphism
GENERALFrosted glass, translucent, backdrop blur.
SaaSFinanceModals
Dark Mode OLED
GENERALDeep black, minimal glow, OLED optimized.
Night ModeCodingEntertainment
Cyberpunk UI
GENERALNeon, terminal, HUD, glitch, sci-fi.
GamingCryptoDev Tools
AI-Native UI
GENERALChatbot, conversational, streaming text.
AI ProductsCopilotsChatbots
Vaporwave
RETROSynthwave, dreamy, sunset gradients.
MusicGamingCreative
23 - Industry Palettes
Product Color Kits
SaaS
Trust blueAccent contrast
Gaming
VibrantNeonImmersive
Cybersecurity
Matrix greenTerminal
Quantum Computing
NeonInterference
24 - Spacing Scale
Spacing Visualization
1
4px - 0.25rem
2
8px - 0.5rem
4
16px - 1rem
6
24px - 1.5rem
8
32px - 2rem
10
40px - 2.5rem
12
48px - 3rem
14
56px - 3.5rem
16
64px - 4rem
20
80px - 5rem
24
96px - 6rem
28
112px - 7rem
32
128px - 8rem
40
160px - 10rem
48
192px - 12rem
64
256px - 16rem
25 - Border Radius
Radius System
None
0px
sm
2px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
full
50%
26 - Material UI
Google Material
Material Design patterns like ripple buttons and floating labels.
MUI Card
MUI Chip
MUI Chip
Floating Action
MUI FAB
Snackbar
MUI Notification
Pagination
MUI Pages
Outlined Button
MUI style outline
Radio Group
MUI Radio
Switch
MUI Switch
27 - Chakra UI
Accessible Components
iChakra Info Alert
Total Users
71,887
up 5.36%
Success
Account created successfully.
New Feature
Warning Alert
Chakra Warning
Solid Tag
Chakra Tag
Circular Progress
Chakra Progress
Error Alert
Chakra Error
Outline Tag
Chakra Outline Tag
Spinner
Chakra Spinner
28 - Tailwind UI
Utility Patterns
Pricing Card
$15/mo
Team Members
Manage your team.
- Jane Doejane@example.com
Empty State
Tailwind placeholder
Badge Array
Tailwind Labels
Input Group
Tailwind Add-on
Action Panel
Tailwind panel
Stat Simple
Tailwind stat
Radio Cards
Tailwind selector
29 - 3D Hover Cards
Interactive Cards
Hover Me
Depth transition for featured content.
Studio Card
Soft-lit panel with editorial feel.
Launch Tile
High-contrast promo frame.
Data Pulse
Ambient UI tile for metrics.
Signal Deck
Chromatic treatment for system states.
Night Panel
Clean dark surface for product shots.
31 - Sera Cards
Structured forms and card surfaces
Higher-density Sera UI cards, auth blocks and spotlight panels grouped in one place for easier scanning.
32 - Sera Sections
Hero blocks and section-level composition
Dedicated landing-page and header compositions, separated from utility cards so full-width ideas are easier to find.