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
300400500600700
Geist Sans
Clean &
Modern
200400600
08 - Buttons Kit
Button Variants
Retro 3D
8-bit style push button
Gradient Outline
Border gradient via clip
Ghost Glow
Subtle hover glow
Arrow Slide
Icon slides on hover
Pulse Ring
Continuous pulsing border
Brutal 1
Brutal 2
Brutal 3
Brutal 4
Brutal 5
Brutal 6
Brutal 7
Brutal 8
Brutal 9
Brutal 10
Brutal 11
Brutal 12
Brutal 13
Brutal 14
Brutal 15
Gradient Btn 1
3D Push button
Gradient Btn 2
3D Push button
Gradient Btn 3
3D Push button
Gradient Btn 4
3D Push button
Gradient Btn 5
3D Push button
Gradient Btn 6
3D Push button
Gradient Btn 7
3D Push button
Gradient Btn 8
3D Push button
Gradient Btn 9
3D Push button
Gradient Btn 10
3D Push button
Gradient Btn 11
3D Push button
Gradient Btn 12
3D Push button
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.
Payments are secured with local validation before submit.
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
GLITCH
Shine Sweep
Shine Sweep
Typewriter
> booting toolkit_
Gradient Fill
Gradient Text
Outline Stroke
Outline Type
Neon Glow
Neon Glow
Hard Shadow
Shadow Stack
Soft Focus
Soft Focus
Layered Echo
Layered Echo
Mono Signal
mono signal
12 - 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.4K
OverviewAssets
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

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

Hover me
Tooltip content
Tooltip
Hover to reveal
A
B
+3
Avatar Group
Overlapping avatars
Progress Bar
Status visualizer
System Operational
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

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
GENERAL
Clean, spacious, grid-based, sans-serif.
EnterpriseSaaSDashboards
Glassmorphism
GENERAL
Frosted glass, translucent, backdrop blur.
SaaSFinanceModals
Dark Mode OLED
GENERAL
Deep black, minimal glow, OLED optimized.
Night ModeCodingEntertainment
Cyberpunk UI
GENERAL
Neon, terminal, HUD, glitch, sci-fi.
GamingCryptoDev Tools
AI-Native UI
GENERAL
Chatbot, conversational, streaming text.
AI ProductsCopilotsChatbots
Vaporwave
RETRO
Synthwave, 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.

Card Title

Secondary text goes here.

MUI Card

MUI Chip

MUI Chip

Floating Action
MUI FAB
Note archived.
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%
OK

Success

Account created successfully.

New Feature
!Update required
Warning Alert
Chakra Warning
Sample Tag
Solid Tag
Chakra Tag
Circular Progress
Chakra Progress
XOperation Failed
Error Alert
Chakra Error
Chakra Tag
Outline Tag
Chakra Outline Tag
Spinner
Chakra Spinner
28 - Tailwind UI
Utility Patterns

Pricing Card

$15/mo

Team Members

Manage your team.

  • Jane Doe
    jane@example.com
Folder

No projects

Get started by creating a new project.

Empty State
Tailwind placeholder
SuccessFailedIn Progress
Badge Array
Tailwind Labels
https://
Input Group
Tailwind Add-on

Update subscription

Change your plan.

Action Panel
Tailwind panel
Total Revenue
$71,897
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.

30 - Sera Navigation
Menus, tabs and navigation flows
Recovered Sera UI navigation patterns separated from generic components so they stop getting buried in the main grid.
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.