Why Use This
This skill provides specialized capabilities for aiskillstore's codebase.
Use Cases
- Developing new features in the aiskillstore repository
- Refactoring existing code to follow aiskillstore standards
- Understanding and working with aiskillstore's codebase structure
Install Guide
2 steps - 1
- 2
Install inside Ananke
Click Install Skill, paste the link below, then press Install.
https://github.com/aiskillstore/marketplace/tree/main/skills/abdulsamad94/ui-design-system
Skill Snapshot
Auto scan of skill assets. Informational only.
Valid SKILL.md
Checks against SKILL.md specification
Source & Community
Updated At Jan 19, 2026, 04:39 AM
Skill Stats
SKILL.md 37 Lines
Total Files 1
Total Size 0 B
License NOASSERTION
---
name: ui-design-system
description: The Design System, Theme, and UX rules for the Physical AI Hub.
---
# UI Design System & Theme
## Core Philosophy
- **Aesthetic**: Premium, Modern, "Physical AI" (Dark, Sleek, Futuristic).
- **Feel**: Smooth, Responsive, High-End.
## Typography
- **Font**: **Poppins** (Geometric Sans-Serif).
- **Weights**: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold).
- **Usage**: Clean, legible, widely spaced.
## Color Palette (Dark Mode - Primary)
- **Background**: `linear-gradient(135deg, #1a1f28 0%, #161b23 50%, #0f1419 100%)`
- **Primary Accent**: `#2d7d6c` (Teal/Greenish) used in buttons and highlights.
- **Text**: `#ededed` (Off-white for readability).
- **Borders**: Subtle, often `rgba(255, 255, 255, 0.1)`.
## Components
- **Buttons**: Rounded corners, smooth hover transitions, subtle shadows.
- **Cards**: Glassmorphism effect (blur + transparency), rounded corners (`12px` or `16px`).
- **Inputs**: Rounded (`24px`), borderless or subtle border, focus rings.
- **Dropdowns**: Floating, animated slide-in, shadow depth.
## Animations
- **Transitions**: `all 0.2s ease` or `cubic-bezier` for premium feel.
- **Keyframes**: `fadeIn`, `slideIn`, `dropdownSlideIn`.
## CSS Structure
- **Global**: `app/globals.css` (Tailwind + Variables).
- **Docusaurus**: `textbook/src/css/custom.css` (Overrides).
- **Modules**: `styles.module.css` for complex components (like Chatbot, Dropdown).
