Developer Reference

    UI Code Kit

    A living reference of every component, color token, typography style, and animation used across the Neural Solutions site. See the source comments for full architecture docs.

    Color Tokens

    --background

    0 0% 98%

    --foreground

    240 10% 10%

    --primary

    262 70% 50%

    --accent

    275 80% 55%

    --secondary

    260 20% 94%

    --muted

    260 15% 93%

    --card

    0 0% 100%

    --border

    260 15% 88%

    Typography

    font-display (Playfair Display) — Headlines

    Heading 1 — 4xl bold

    font-display — H2

    Heading 2 — 3xl bold

    font-display — H3

    Heading 3 — xl semibold

    font-sans (Outfit) — Body

    Body text in Outfit. Used for paragraphs, descriptions, and general content.

    font-mono (Space Mono) — Labels & metadata

    Mono text for tags, labels, and technical content.

    .shimmer — Animated gradient textShimmer Effect
    .text-gradient — Static gradient textGradient Text

    Buttons

    variant="hero"
    variant="hero-outline"
    variant="default"
    variant="secondary"
    variant="ghost"
    variant="outline"

    Quote Section

    "
    There will be two kinds of companies at the end of this decade: those that are fully utilizing AI, and those that are out of business.
    — Peter Diamandis

    Utility Classes

    .glass

    Glassmorphism: white translucent bg + backdrop-blur + subtle purple border.

    .gradient-border

    Gradient border using mask-composite for elegant card edges.

    .atmosphere + .grain

    Layered subtle radial gradients with faint grain texture overlay.

    .perspective-card

    Hover to see 3D perspective tilt effect on this card.

    Form Inputs

    Components

    Card Component

    shadcn/ui Card with glass styling. Used for content grouping throughout the site.

    Badges
    AI Integration
    Automation
    Web Dev

    Animations & Effects

    Floating orbs (.float / .float-delayed / .animate-drift)
    Custom cursor (dot + ring)

    Move your mouse to see the custom cursor — a purple dot with a trailing ring that follows with lerp interpolation.

    Particle field (canvas)

    The background particle system is rendered on a fixed canvas at z-0 with 60 particles and subtle connection lines drawn between particles within 150px.

    ScrollReveal

    IntersectionObserver-based wrapper. Applies opacity(0→1), translateY(24px→0), and blur(4px→0) with configurable delay. Easing: cubic-bezier(0.16, 1, 0.3, 1). Duration: 700ms. Fires once.