Implementation at a Glance
A structured workflow for adopting Skillprint design tokens, base components, and interface modules.
Design Token Scale
Color tokens, CSS variables, and typography definitions for dark and light surfaces.
Primitive Controls
Buttons, button groups, badges, tags, form fields, and code block containers.
Submodule Export
Consumable component exports in index.ts for seamless integration into host apps.
Overview implementation pattern
Use this compact pattern when a design-system landing page needs to explain the implementation sequence.
:root {
--content: 1240px;
--nav: 272px;
--panel-950: #171A38;
--panel-900: #212549;
--violet: #573EEB;
}Declare root CSS variables before adding component stylesheets.
Use CSS grid with auto-fitting minmax columns.
System Principles
High-contrast surface identities, responsive typography scales, and modular visual components.
Dual Surface Identity
Customer surface uses Core Green (#09E08F), Developer surface uses Mindset Violet (#573EEB).
Restricted Palette
Eight canonical brand colors used purposefully for trait taxonomies and state feedback.
Accessible Contrast
All foreground text elements meet WCAG AAA contrast ratios against dark and light panel bases.
Scalable Architecture
Pure React & Next.js components designed for clean consumption via Git submodule imports.
Neutral Panel Foundations
The 12-step Panel Blue color scale for backgrounds, surfaces, cards, and borders.
Panel Blue Surface Hierarchy
12-step neutral panel scale supporting dark and light surface modes.
--panel-[25..950]#171A38Sidebar, Mobile Bar, Modal backdrop#212549Default surface cards, code blocks, controls#2B3159Hover state, inset containers, badges#39416AElevated panels, subtle borders#4A527ADisabled controls, muted borders#5F678DSecondary text & tertiary metadata#7C83A7Icons & inactive states#9DA3C0Muted text role#BCC0D5Subtle text & borders#D9DCEASecondary text#ECEEF5Primary text base#F7F7FBHigh contrast textBrand Colour Spectrum
Color tokens defined with CSS custom properties and interactive click-to-copy hex codes.
Core Green
--greenCustomer Surface Accent & Success
Mindset Violet
--violetDeveloper Surface Accent & Actions
Violet Light
--violet-400Hover & Highlight Accents
Lime
--limeMood Traits & Highlights
Mint
--mintCognition Traits & Indicators
Blue
--bluePersonality Traits & Badges
Pink
--pinkDanger & High Energy Traits
Orange
--orangeWarnings & Secondary Accents
Typography System
Geist UI for interfaces, Geist Mono for code & data, and Fraunces for brand storytelling.
Geist
var(--font-geist-sans)
Primary font for interface labels, buttons, navigation, and body copy.
Geist Mono
var(--font-geist-mono)
Technical data, metrics, code snippets, and developer surface UI.
Fraunces
var(--font-fraunces)
Editorial headlines, feature titles, and brand storytelling.
Typography Hierarchy
Logos & Clear Space Guides
Vector Skillprint brand marks for Customer and Developer surface environments.
Status Badges
Contextual status indicators matching design system color tokens.
Badge Variants
Form Input Controls
Input controls demonstrating default, focused, error, success, and disabled states.
Code Block Viewer
Syntax-styled technical code block component with copy chip button.
import { Button, TraitSystemCard, SurfaceProvider } from 'skillprint-fe-components';
export default function App() {
return (
<SurfaceProvider initialSurface="developer" initialTheme="dark">
<Button variant="primary">Launch Skillprint App</Button>
</SurfaceProvider>
);
}Achievement Badges
Geometric motif achievement cards representing player milestones.
Pattern Seeker
Recognized 50 visual sequence patterns under 30 seconds.
Deep Flow
Maintained uninterrupted focus state for 45 consecutive minutes.
Lightning Reflex
Achieved top 1% response latency across spatial reaction games.
Chart Exploration Studies
Area, Line, Bar, and Radar charts rendered with responsive SVG visualization.
Cognitive Growth Curve
Daily flow index and response score metricsTrait Radar Spectrum
Multidimensional cognitive & personality evaluationTrait System Modules
Skillprint cognitive, mood, and personality trait metrics.
High Energy Flow
Elevated enthusiasm and swift task transition willingness.
Spatial Reasoning
Rapid mentally rotated object analysis and layout synthesis.
Strategic Thinking
Methodical problem evaluation with multi-step forward planning.
Evaluated Game Catalog
Evaluated games rated by Skillprint cognitive impact algorithms.
Evaluated Game Library Application
Standalone search & filter interface for Skillprint evaluated games.
Evaluated Game Library
Interactive standalone game catalog search interface.
API Documentation Portal
OpenAPI v3.0 REST specification for telemetry and trait scoring endpoints.
Skillprint API Specification
RESTful endpoints for trait scoring, game evaluations, and telemetry ingestion.
{
"user_id": "usr_948201",
"session_id": "sess_847120",
"game_id": "g_spatial_block_fusion",
"events": [
{ "timestamp": 1786028400, "event": "block_fusion", "latency_ms": 142 },
{ "timestamp": 1786028405, "event": "pattern_solved", "difficulty_level": 4 }
]
}Skillprint Ecosystem Source Surfaces
Active production surfaces grouped by identity family.
Rollout Roadmap
4-Phase roadmap for component library distribution and submodule adoption.
Tokens & Neutral Foundations
Establish shared CSS variable tokens, surface attributes (data-surface, data-brand-family), color spectrum, and typography hierarchy.
Base Primitive Controls
Build reusable Button, ButtonGroup, Badge, Tag, Input, CodeBlock, and Modal components with strict TypeScript prop contracts.
Specialized Domain Modules
Implement Achievement Badges, Chart Exploration SVG studies, Trait Engine cards, and Evaluated Game Catalog modules.
Submodule Distribution & Showcase
Package public exports in index.ts and deploy interactive Next.js component showcase site.