skills.rest
Ender-Wiggin2019
Ender-Wiggin2019COMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-guidelines

Define Terraforming Mars visual design with Tailwind CSS color and typography tokens.

Updated Feb 11, 2023
Search Tags:#typography#UI/UX#design system#color palette#brand guidelines#frontend development
One-click install
npx skills add https://github.com/Ender-Wiggin2019/elo --skill brand-guidelines-ender-wiggin2019
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-guidelines
Source: https://github.com/Ender-Wiggin2019/elo/tree/main/.agents/skills/brand-guidelines
Command: npx skills add https://github.com/Ender-Wiggin2019/elo --skill brand-guidelines-ender-wiggin2019

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the visual design system for Terraforming Mars, ensuring consistency and a cohesive aesthetic across all frontend elements.

Core Features & Use Cases

  • Visual Language Definition: Establishes a clear set of rules for colors, typography, spacing, and component patterns.
  • Thematic Consistency: Enforces a "high-tech Mars colonization command center" theme with specific aesthetic pillars like contrast, depth, and precision.
  • Use Case: When developing a new UI component or styling an existing page, developers can consult these guidelines to ensure it aligns with the project's established brand identity, using the defined color tokens, font styles, and layout principles.

Quick Start

Apply the brand-guidelines skill to understand the color palette and typography for the project.

Frequently Asked Questions about brand-guidelines

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

FAQPage Schema
How do I establish a consistent visual design system for a Mars colonization UI?▼

To establish a consistent visual design system for a Mars colonization UI, apply predefined color palettes, typography rules, and component patterns that enforce a dark sci-fi theme with high contrast and layered depth.

What color palette and typography should I use for frontend development in a sci-fi themed project?▼

For sci-fi themed frontend development, utilize defined Tailwind CSS custom values and specific CSS properties to implement dark, high-contrast color palettes and technical typography styles that ensure thematic consistency.

How do I maintain brand guidelines and thematic consistency when developing new UI components?▼

Maintain brand guidelines and thematic consistency by consulting established design tokens for colors, fonts, and layout principles before styling new UI components, ensuring all elements align with the project's visual language.

Can I use Tailwind CSS custom values to enforce specific UI/UX design system rules?▼

Yes, you can use Tailwind CSS custom values to enforce specific UI/UX design system rules by applying defined color tokens and specific CSS properties that generate modern gradients and layered depth.

What are the limitations of using a predefined brand design system for UI/UX development?▼

The limitation of using this predefined brand design system is its strict enforcement of a specific dark, high-tech Mars colonization command center theme, which restricts flexibility for projects requiring alternative visual aesthetics.

Related Skills

Explore More Design & Creative Skills→
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced
markwang2658markwang2658
31

popular-web-designs

Render design-system templates into production-ready HTML and CSS artifacts.

Community
Advanced
jtangir87jtangir87

design-guide

Define Paperclip UI design standards for layout, color, typography, and components.

Community
Advanced
Progery222Progery222

project-uiux

Provide visual and style specifications for sci-fi themed UI and UX design.

Community
Intermediate