// SOURCE OF TRUTH
THE ARTBOARDS
DESIGN SYSTEM
The technical blueprint behind Artboards. High-performance dark-mode depth and zero external dependencies.
Design Philosophy
✦ Core Identity
Engineered for peak performance in dark environments. We utilize a stepped background hierarchy (bg0-bg4) to create focus and depth.
Every pixel follows a strict Base-8 rhythm. Space Mono is used for data to maintain a high-utility, developer-centric feel.
✕ The Rejection Protocol
"We reject the homogenization of the modern web."
We avoid the "colorful blur" trend in favor of deliberate, intentional neon accents.
Zero forced signups and zero server delays. All processing is handled 100% client-side for maximum speed.
Token Architecture
Our palette follows a strict Stepped Void hierarchy. Background tokens (bg0–bg4) are engineered to provide maximum depth in OLED environments while minimizing eye fatigue.
Typography & Fluid Scaling
Surface Architecture & Elevation
Selects & Control Logic
Custom selects utilize BG3 for the overlay layer to ensure separation from the content surface. The trigger features a 1px cyan highlight on focus.
Minimum click-target for all control elements is 44px to ensure mobile accessibility.
Active states use 100% luminance of the accent token (p/cy).
Toggles use a physical sliding animation over 250ms for tactile response.
Tooltip & Popover Engine
Tooltips serve as Micro-Instructional layers. They are intended to provide immediate context for icon-only buttons or technical abbreviations without cluttering the primary UI surface.
- → Delay: 400ms pre-entrance.
- → Duration: Persistent while hovered.
- → Context: Limit to 15 words or less.
Every tooltip is rendered on the Overlay Layer (BG4). To maintain the technical "Blueprint" aesthetic, we use a 1px solid stroke in the primary accent color rather than a fill-only approach.
Radius: 6px
Animation: 4px Spring Offset
Features a 4px spring-offset on entrance. Transitions from 0% opacity to 100% over 200ms.
The pointer arrow is an 8px isosceles triangle, color-matched to the tooltip stroke.
Pointer-events are disabled on the tooltip itself to prevent flickering during cursor transit.
Form Engine & Input Architecture
// Input_Field_States
Prefix icons are locked to a 48px hitbox with 1px stroke weights.
Active fields utilize a 2px outer glow in `--cy` or `--p` to guide visual focus.
Labels use 10px Mono Bold; Input text uses 14px Sans Regular.
Validation transitions occur over 300ms using the standard cubic-bezier.
Data & Grid Architecture
Notification & Alert System
// Tier_01: Global_System_Banners
// Tier_02: Inline_Contextual_Alerts
New merchandise SKU successfully pushed to global inventory.
Sensor updates available for Mercedes W15 powertrain modules.
Toasts appear at the bottom-center of the viewport. They are non-blocking and self-dismiss after 3000ms.
Success uses `--gr`, Info uses `--cy`, and Critical uses `--or` to maintain cognitive speed.
Alerts slide in with a 20px Y-offset over 400ms using the standard system ease.
Banners sit at Z-500, Inline Alerts at Z-0, and Toasts at Z-3000.
The evolution never stops.
We are currently forging the F1 Dashboard Engine, Motion Presets, and Neural Layouts. Stay synced for the next iteration.
// Core_Architecture
// UI_Components
About Artboards Design System
The Artboards Design System v15.0 is a high-performance, zero-dependency CSS framework and dark-mode UI kit. Engineered specifically for complex data environments, OLED screens, and motorsport telemetry dashboards. Created by Siddhesh Jain, this front-end architecture prioritizes speed, semantic HTML, and absolute visual precision over bloated external libraries.
Is the Artboards UI Kit Open Source?
Currently, the Artboards Design System is a proprietary framework built for the Artboards.in ecosystem, specifically optimizing e-commerce and F1-inspired data tracking interfaces. All components are processed client-side with zero external dependencies.
How does the Stepped Void color system work?
The Stepped Void system replaces traditional drop-shadows with chromatic Z-space elevation. It utilizes five distinct background hex variables (bg0 to bg4) to create optical depth on OLED screens, reducing eye strain while maintaining a high-contrast technical aesthetic.
Does this CSS framework require JavaScript?
The core styling, grid architecture, and responsive breakpoints are 100% CSS. A lightweight vanilla JavaScript engine (under 5kb) is used solely for interaction states like mobile navigation off-canvas toggles, custom dropdowns, and scroll-spy active link tracking.