skills.rest
peterbamuhigire
peterbamuhigireCOMMUNITY
Explore all skills by this author →
Website𝕏@peterbamuGitHub

design-system

Configure Tailwind CSS and global CSS for website fonts, colors, spacing, and animations.

1|Updated Feb 17, 2026
Search Tags:#typography#design system#color palette#visual identity#web design#aesthetics
One-click install
npx skills add https://github.com/peterbamuhigire/website-skills --skill design-system-peterbamuhigire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/peterbamuhigire/website-skills/tree/main/design-system
Command: npx skills add https://github.com/peterbamuhigire/website-skills --skill design-system-peterbamuhigire

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill establishes a cohesive and distinctive visual identity for a website, ensuring consistency in fonts, colors, spacing, and animations before page development begins.

Core Features & Use Cases

  • Aesthetic Direction: Defines a clear visual style based on industry and brand.
  • Typography Selection: Chooses and configures display and body fonts for optimal readability and brand personality.
  • Color Palette Design: Creates a robust color system, including primary, secondary, accent, and surface colors, with full scales.
  • Global Styles & Animations: Implements smooth scrolling, custom selection colors, and scroll-triggered animations.
  • Component Patterns: Standardizes the design of buttons, cards, sections, and images for a unified look and feel.
  • Use Case: A startup needs a modern, trustworthy website. This skill will help define a unique color palette, select a bold display font and a readable body font, and set up scroll animations to make the site engaging.

Quick Start

Use the design-system skill to establish the visual foundation for a new website, defining its aesthetic direction, typography, and color palette.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I establish a cohesive visual identity for a new website?▼

A cohesive visual identity requires defining aesthetic direction, typography, and color palettes before page development begins. This ensures consistency across fonts, colors, spacing, and animations to establish a unified brand experience.

How do I configure Tailwind CSS with a custom color palette and typography?▼

Configuring Tailwind CSS involves defining primary, secondary, accent, and surface colors with full scales, alongside display and body fonts. Global CSS then implements these choices, including custom selection colors and scroll-triggered animations.

What is included in a website design system foundation?▼

A website design system foundation includes typography selection, a robust color palette with full scales, global styles, animations, and standardized component patterns for buttons, cards, and sections to ensure a unified look and feel.

Can I generate design decisions based on my company profile and industry?▼

Yes, visual identity choices can be generated based on your company profile and industry. Reading style briefs informs the selection of fonts, colors, and animations to match the specific brand direction and required user experience.

Does this approach handle scroll-triggered animations and global CSS styles?▼

Yes, this approach handles scroll-triggered animations and global CSS styles. It implements smooth scrolling, custom selection colors, and standardized component patterns directly through Tailwind CSS configuration and global stylesheets.

When should I standardize component patterns like buttons and cards?▼

You should standardize component patterns for buttons, cards, sections, and images during the visual foundation phase. Standardizing these elements before page development begins ensures aesthetic coherence and a unified look throughout the website.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer

visual-identity-core

Generate a brand visual identity guide with color palettes, typography, logo rules, and imagery guidelines.

Community
Basic
fusebase-devfusebase-dev
6

app-ui-design

Standardize Fusebase UI implementation with Tailwind CSS v4 and shadcn/ui.

Official
Intermediate
motormetricsmotormetrics
21

ui-design-system

Standardize dashboard UI components, typography, and color usage.

Official
Advanced
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate