design-system

Name: design-system
Availability: InStock
Author: Gabriel

Standardizes a Mars-themed UI design system for cockpit dashboards.

2|Updated Mar 18, 2026

Search Tags:#typography #tailwind #design-system #dark-mode #ui-patterns #color-palette #component-library

Ready to run

npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill design-system-nattergabriel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.claude/skills/design-system
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill design-system-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A cohesive Mars-themed UI design system that ensures consistent visuals and interaction patterns across cockpit dashboards.

Core Features & Use Cases

Color palette: defines dark Mars-inspired colors for background, surfaces, and accents.
Typography & spacing: establishes typography scale and spacing rules for readable, consistent interfaces.
Component patterns: provides reusable building blocks (cards, buttons, status indicators, layout patterns) aligned to the cockpit aesthetic.

Quick Start

Adopt the Mars UI design system to standardize colors, typography, and components across your cockpit interfaces.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize a dark mode UI component library with Tailwind?▼

You standardize a dark mode UI component library by defining a cohesive design system with CSS variables and Tailwind mappings for colors, typography, and spacing, ensuring consistent visual building blocks across your frontend.

What is a cockpit-grade UI design system for dashboard interfaces?▼

A cockpit-grade UI design system is a standardized set of dark mode interface rules covering color palettes, typography scales, and component patterns to ensure consistent visuals and interactions across complex dashboard interfaces.

Can I use this Mars UI design system to standardize dashboard color palettes and typography?▼

Yes, you can use this Mars UI design system to standardize dashboard color palettes and typography, providing a single source of truth for dark mode surfaces, accents, and readable text scales.

How do I implement reusable card patterns and status indicators for a dark mode command center?▼

You implement reusable card patterns and status indicators by applying predefined component patterns and CSS variables from the design system, ensuring visual consistency and accessibility within your dark mode command center.

Does this design system provide accessibility considerations for dark mode dashboards?▼

Yes, the design system provides accessibility considerations tailored for dark mode dashboards, ensuring that the Mars-inspired color palette, typography, and component patterns maintain readable and accessible interface interactions.

Are there specific CSS variables and Tailwind mappings for defining a dark mode color palette?▼

Yes, the design system specifies implementation details using CSS variables and Tailwind mappings to define a dark Mars-inspired color palette, covering background, surfaces, and accent colors for consistent application.