skills.rest
Artag-Chris
Artag-ChrisCOMMUNITY
Explore all skills by this author →
Website𝕏@scristxyzGitHub

lumen-design-system

Define design tokens, typography, spacing, and component styling for web interfaces.

1|Updated Apr 24, 2026
Search Tags:#typography#accessibility#tokens#design-system#brand-guidelines#visual-identity
One-click install
npx skills add https://github.com/Artag-Chris/xproyect --skill lumen-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lumen-design-system
Source: https://github.com/Artag-Chris/xproyect/tree/main/.agents/skills/lumen-design-system
Command: npx skills add https://github.com/Artag-Chris/xproyect --skill lumen-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Lumen X Labs lacked a cohesive visual identity, leading to inconsistent UI, brand drift, and elevated design debt across products.

Core Features & Use Cases

  • Visual Identity guidelines covering color, typography, spacing, and component styling to ensure a consistent look and feel across web interfaces and marketing materials.
  • Design Tokens and typography rules that translate brand decisions into code-ready tokens for CSS variables and design systems.
  • Accessibility and motion guidelines to maintain usable, inclusive interfaces while preserving brand aesthetics.

Quick Start

Apply the design system to a new component to ensure consistent typography, spacing, and color usage.

Frequently Asked Questions about lumen-design-system

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

FAQPage Schema
How do I establish a unified visual identity across multiple web products?▼

To establish a unified visual identity, apply standardized design tokens, typography rules, and color palettes to ensure consistent component styling across web interfaces, marketing pages, and internal tools.

How do I translate brand guidelines into code-ready design tokens for CSS variables?▼

Translate brand guidelines into code-ready design tokens by mapping visual identity decisions for color, typography, and spacing directly into CSS variables for seamless design-to-code handoffs.

What design tokens and typography rules are needed for an accessible design system?▼

An accessible design system requires color, typography, and spacing tokens paired with motion guidelines and accessibility considerations to maintain usable, inclusive interfaces without sacrificing brand aesthetics.

Can I use this design system to enforce consistent spacing and color usage for new components?▼

Yes, you can apply the design system to a new component to enforce consistent typography, spacing, and color usage, directly resolving UI inconsistencies and reducing accumulated design debt.

Why does brand drift occur and how can design tokens prevent it?▼

Brand drift occurs when a cohesive visual identity is lacking, but implementing standardized design tokens and typography rules prevents it by translating strict brand guidelines into enforceable code variables.

Does this visual identity system include motion guidelines and accessibility considerations?▼

Yes, the visual identity system includes motion guidelines and accessibility considerations to maintain inclusive interfaces while specifying design tokens, typography rules, and component styling for web interfaces.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
FeedbackFriendsFeedbackFriends
1

tailwind-nextjs-expert

Guide Tailwind CSS and Next.js UI development with design tokens and semantic utilities.

Official
Advanced
yannzurkindenyannzurkinden

ui-ux-pro-max

Consolidate UI/UX design guidelines into a reusable playbook for web and mobile apps.

Community
Basic
plurigridplurigrid
60

brand-guidelines

Apply brand colors, typography, and spacing to documents and presentations.

Official
Basic