skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

power

Implement a dark aesthetic design system with typography and color scales.

Updated Jun 23, 2026
Search Tags:#design system#color palette#typography scale#spacing scale#dark aesthetic
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill power
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: power
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/power
Command: npx skills add https://github.com/guideops/agentic-shared --skill power

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for a consistent and high-quality design system, providing a comprehensive set of guidelines for creating premium brand experiences.

Core Features & Use Cases

  • Modern Visual Style: Emphasizes bold headings and a monochromatic palette for a premium feel.
  • Typography Scale: Desktop-first expressive scale with Oswald and JetBrains Mono fonts.
  • Color Palette: Defined primary, secondary, success, warning, danger, surface, text, and neutral colors.
  • Spacing Scale: 8pt baseline grid for a clean and consistent layout.
  • Use Case: Ideal for design teams looking to establish a strong and cohesive visual identity for their brand.

Quick Start

Apply the Power Design System to your project by incorporating the provided design tokens and following the guidelines outlined in the documentation.

Frequently Asked Questions about power

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

FAQPage Schema
What is a dark aesthetic design system and when do I need one?▼

A dark aesthetic design system provides a cohesive set of rules for premium brand experiences using a monochromatic palette and bold typography. You need one to establish a consistent, high-end visual identity across desktop-first platforms.

How do I implement a consistent color and spacing scale for a premium brand identity?▼

To implement a consistent spacing scale and color palette, apply the provided design tokens which utilize an 8pt baseline grid for layout and define primary, secondary, surface, and neutral colors for a unified visual structure.

Can I use this desktop-first typography scale for mobile web design?▼

This design system targets a desktop-first typography scale emphasizing bold headings with Oswald and JetBrains Mono fonts. You can adapt it for mobile, but the initial visual style and expressive scale are optimized for larger screens.

What's the best way to establish a modern visual style with a monochromatic palette?▼

The best way to establish a modern visual style with a monochromatic palette is to integrate predefined design tokens for text and neutral colors alongside bold headings, ensuring a premium feel without manual color tuning.

Does this design system include success, warning, and danger color definitions?▼

Yes, this design system includes defined success, warning, and danger colors within its comprehensive color palette, ensuring semantic UI states maintain the overarching high-end dark aesthetic.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

colorful

Define WCAG 2.2 AA-aligned design tokens and UI guidance for product interfaces.

Official
Basic
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
JayZeeDesignJayZeeDesign
170

theme-factory

Apply selected themes with cohesive color palettes and typography to artifacts.

Community
Basic