Shaders

Overview

Shaders is a WebGPU component library designed for creative developers building interactive visual effects in modern frontend frameworks. The design system embraces a "Vibrant-Technical" aesthetic—combining the precision of code with the fluidity of generative gradients. The UI celebrates shader effects as first-class citizens: the interface itself becomes a canvas, with dark surfaces (rgb(20, 20, 22)) serving as a neutral backdrop that allows vivid cyan (#6bdfff), golden yellow (#ffcb6b), and magenta (#d930b1) accents to command attention. The emotional response is one of creative empowerment—users feel they are wielding powerful, accessible tools for visual innovation.

The brand voice is direct, technical, and encouraging. Shaders speaks to developers with clarity and respect for their expertise, using precise terminology ("shader," "WebGPU," "component") without condescension. The tone avoids hype; instead, it demonstrates capability through concrete examples and clean documentation. Example sentence in brand voice: "Compose interactive backgrounds with 750+ Pro presets, or write your own shader in GLSL."

Colors

The color system is built on a dark-first foundation optimized for showcasing shader effects. The primary accent is cyan (#6bdfff), used exclusively for interactive elements—CTAs, focus states, and links—creating a visual anchor that draws the eye to actionable moments. Secondary accent is golden yellow (#ffcb6b), reserved for highlights, badges, and supporting UI elements that need warmth without competing with primary. Tertiary accent is bright lavender (#d1d7ea), used for text hierarchy and subtle emphasis. The surface stack ranges from near-black (#0a0a0c at surface-container-lowest) to charcoal (#2d2d35 at surface-container-highest), providing depth without harsh contrast. On-surface text is set to #e6e9fa (a cool off-white), ensuring readability at 16px body size with a contrast rati

Typography

The type system pairs Albert Sans (fontWeight: 500, used for headlines and display text) with Geist (fontWeight: 400–600, used for body and UI labels). Albert Sans at 60px with -0.02em letter-spacing creates a bold, modern headline presence; Geist at 16px with 24px line-height ensures comfortable reading of body copy. The hierarchy is strict: display (60px) for hero statements, headline-lg (40px) for section titles, headline-md (28px) for subsections, title-lg (20px) for card headers, body-lg (18px) for introductory paragraphs, body-md (16px) for standard body text, and label-md (14px) for UI labels and buttons. Code samples use Space Mono at 12px with 0.05em letter-spacing to signal technical content. When displaying code inline, apply background: rgba(107, 223, 255, 0.1) with 2px 6px pad

Layout

The layout uses a 12-column grid with a max-width of 1450px, centered on the viewport. The hero section spans full width with a 40px (lg spacing) gutter on desktop, collapsing to 24px (md spacing) on tablet. Content sections use a 24px (md spacing) margin between blocks, with 40px (lg spacing) reserved for major section breaks. The container padding follows a semantic scale: 24px for standard cards, 40px for hero sections, and 12px for compact UI elements like badges. White-space is generous—the design favors breathing room over density, with minimum 24px gaps between interactive elements to reduce accidental clicks. The grid aligns to 8px increments (unit: 8px), ensuring all dimensions (padding, margin, width) are multiples of 8px for visual harmony. Responsive breakpoints are implicit: d

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surfaces rather than dramatic drop shadows. Level 1 (Base): the background is a static dark surface (#141416) with optional animated gradient overlays. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), background: #1a1a1b, border: 1px solid #202129. Level 3 (Elevated/Hover): box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), background: #242430, border: 1px solid #202129. Interactive elements (buttons, inputs) use a 1px border at #202129 to define their boundary without relying on shadow. On hover, cards transition to Lev

Shapes

The shape philosophy is "Geometric Precision"—favoring sharp, technical corners over organic curves, reflecting the code-first nature of the brand. Buttons and inputs use border-radius: 4px (DEFAULT), creating a subtle, modern edge that feels intentional without softness. Cards use 15px (lg) for a slightly more approachable feel, balancing technical precision with visual warmth. Code blocks use 6px (md) to signal they are distinct content types. Full-width elements (badges, pills) use border-radius: 9999px (full) to create a capsule effect. The rationale: sharp corners (2–4px) reinforce the te

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use background: #6bdfff with color: #0a1820, padding: 12px 24px, height: 40px, border-radius: 4px, and font-weight: 500. On hover, background transitions to #87f3ff (primary-fixed-dim) over 200ms. Secondary buttons use background: #242430 with a 1px border at #202129, transitioning to #2d2d35 on hover with text color shifting to #6bdfff. Ghost buttons are transparent with no border, text color #e6e9fa, and hover background: rgba(107, 223, 255, 0.08). All buttons use cursor: pointer and transition: all 200ms cubic-bezier(0.2, 0, 0.8, 1).

Containers & Surfaces Cards are the primary container: background: #1a1a1b, border: 1px solid #202129, border-radius: 15px, padding: 24px, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)

Do's and Don'ts

**Do**

• Do use cyan (#6bdfff) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply 200ms cubic-bezier(0.2, 0, 0.8, 1) transitions to all interactive elements for a fluid, responsive feel that matches the brand's technical sophistication.
• Do maintain minimum 24px spacing (md) between major content blocks and 12px (sm) between UI elements to preserve breathing room and reduce cognitive load.
• Do use Albert Sans (fontWeight: 500) for all headlines and Geist (fontWeight: 400–600) for body and UI text to maintain the clean, modern type hierarchy.
• Do layer code examples and shader previews over gradient overlays at 15% opacity to reinforce the brand's visual energy without overwhelming content.

**Don't**

• Don't use primary cyan (#6bdfff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to preserve its visual impact.
• Don't apply drop shadows larger than 0 12px 32px rgba(0, 0, 0, 0.2)—the design favors subtle depth through layered surfaces and borders, not dramatic shadows.
• Don't use border-radius values outside the defined scale (2px, 4px, 6px, 15px, 20px, 9999px)—consistency in shape language reinforces the technical precision of the brand.
• Don't mix typefaces within a single component—Albert Sans is for headlines, Geist for body and UI, Space Mono for code. Mixing dilutes the visual hierarchy.
• Don't reduce line-height below 1.5x font-size for body text (e.g., 16px body must have at least 24px line-height)—readability on dark backgrounds requires generous vertical spacing.