Marketplace ui-design-system

Name: ui-design-system
Author: aiskillstore

The Design System, Theme, and UX rules for the Physical AI Hub.

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/abdulsamad94/ui-design-system" ~/.claude/skills/aiskillstore-marketplace-ui-design-system && rm -rf "$T"

manifest: skills/abdulsamad94/ui-design-system/SKILL.md

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).