Design System

Micro-neumorphic components for VibeTrading. Built with CSS variables, color-mix, and structured shadows.

Brand Colors

--vt-green

#00ff87

--vt-cyan

#00e5ff

--vt-navy

#0a0d18

--vt-card

#161b2e

--vt-card-elevated

#1c2240

--vt-border

rgba(255,255,255,0.12)

--background

oklch(0.2166...)

--primary

oklch(0.7058...)

Gradient Text

.gradient-text

Hello, vibes.

.gradient-text-reverse

Reversed gradient

.gradient-text-shimmer + animate-[shimmer_3s_linear_infinite]

Shimmer effect

.glow-green

+127.4%

Cards

.neu-card

Raised Card

Default card with gradient background, border, and 3-layer shadow.

.neu-card .neu-card-glow

Glow Card

Hover to see the cyan glow accent effect.

.neu-inset

Inset Card

Recessed panel for nested content.

Buttons

.neu-btn-primary

.neu-btn-secondary

Small

Default

Large

Inputs

.neu-input

.neu-input (textarea)

Input + Button combo

Badges

.neu-badgeDefault

.neu-badge-greenGreen

.neu-badge-cyanCyan

Low RiskMedium RiskHigh RiskPaper ModeLive

Shadow Structure

/* 3-layer shadow structure */
box-shadow:
  0 4px 20px rgba(0,0,0,0.5), /* outer drop */
  inset 0 1px 0 rgba(255,255,255,0.1), /* top highlight */
  inset 0 -1px 0 rgba(0,0,0,0.25); /* bottom dark */

Special Effects

.popular-glow

Popular Glow

Cyan glow border for featured items.

.hero-gradient + .grid-pattern

Background Effects

Radial gradient overlays with grid pattern.

Composition Example

⚡Momentum Rider

Running

+$310.00

+6.2% this week

Design Rules

✓

Border radius20px+ for cards, 16px for nested elements

✓

ShadowsAlways 3-layer: outer drop + inset top highlight + inset bottom dark

✓

ColorsUse CSS variables (--vt-*) with color-mix() for derivations

✓

No backdrop-blurSolid gradient backgrounds only

✓

No glow shadowsOnly structured drop shadows

✓

No hardcoded colorsEverything via CSS custom properties