enterprise
bergside/awesome-design-skills
Dark-themed cloud-platform design system for enterprise dashboards with modular grids and data hierarchy.
What is enterprise?
Enterprise is a design-system skill that provides guidance for building dark-themed, cloud-platform interfaces optimized for productivity dashboards. Use it when creating complex data-visualization UIs that require strong visual hierarchy, accessibility compliance, and consistent component patterns.
- Defines a complete design-token system (typography, color, spacing, shadows) anchored to IBM Plex Sans and an 8pt grid
- Specifies component anatomy, interaction states (default, hover, focus, active, disabled, loading, error), and responsive behavior
- Enforces WCAG 2.2 AA accessibility standards with keyboard-first interactions and 44px+ touch targets
- Provides anti-pattern guidance and QA checklists for design-system consistency
- Documents glass-like panels, soft shadows, and subtle gradients for modern cloud-platform aesthetics
- Includes content-writing tone standards (concise, confident, action-oriented) and empty/loading/error state patterns
How to install enterprise
npx skills add https://github.com/bergside/awesome-design-skills --skill enterpriseHow to use enterprise
- 1.Review the Style Foundations section to understand the color palette, typography scale, and spacing baseline
- 2.Reference the design tokens (primary=#0C5CAB, success=#10b981, etc.) when building components
- 3.Follow the component rule expectations to define anatomy, states, and interaction behavior for each UI element
- 4.Apply the accessibility requirements (keyboard navigation, focus states, semantic HTML, screen-reader labels)
- 5.Use the guideline authoring workflow when creating new component guidance
- 6.Run the QA checklist during code review to ensure consistency
Use cases
- Building a monitoring or analytics dashboard for a SaaS platform
- Designing a cloud-infrastructure management interface (Heroku/Vercel/GitHub-style)
- Creating a complex data-visualization UI with multiple interactive components
- Establishing design consistency across a large engineering team
- Implementing accessible dark-mode interfaces for productivity tools
- Design system authors and maintainers
- Product engineers building enterprise dashboards
- UX/UI designers working on cloud-platform products
- Teams needing WCAG 2.2 AA compliance
- Engineering teams standardizing component libraries
enterprise FAQ
Use semantic tokens: primary=#0C5CAB for interactive elements, surface=#09090b for backgrounds, text=#fafafa for foreground text. Pair with IBM Plex Sans at weights 100–900 and a 12/14/16/20/24/32 typography scale.
Implement keyboard-first interactions, visible focus states, semantic HTML before ARIA, and 44px+ touch targets. Test with screen readers and ensure reduced-motion support is enabled.
Design explicit states for each component. The skill requires documenting all interaction states (default, hover, focus-visible, active, disabled, loading, error) and their visual treatment.
No. Avoid decorative motion without purpose. All animations must serve a functional goal and respect reduced-motion preferences.
Define responsive behavior and edge cases (long labels, empty states, overflow) at the component level. Preserve visual hierarchy and ensure text remains readable and accessible.
Full instructions (SKILL.md)
Source of truth, from bergside/awesome-design-skills.
name: enterprise description: Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards. license: MIT metadata: author: typeui.sh
<!-- TYPEUI_SH_MANAGED_START -->Enterprise Design System Skill (Universal)
Mission
You are an expert design-system guideline author for Enterprise. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
Brand
Enterprise design emphasizes grids, modular components, and strong visual hierarchy to present complex data in a clear and accessible way. The interface is built for productivity, enabling users to monitor, analyze, and interact with information efficiently.
Style Foundations
- Visual style: modern, clean, cloud-platform aesthetic (Heroku/Vercel/GitHub inspired), dark theme, subtle gradients, soft shadows, glass-like panels, rounded components
- Typography scale: 12/14/16/20/24/32 | Fonts: primary=IBM Plex Sans, display=IBM Plex Sans, mono=IBM Plex Sans | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#0C5CAB, secondary=#0a4a8a, success=#10b981, warning=#f59e0b, danger=#ef4444, surface=#09090b, text=#fafafa
- Spacing scale: 8pt baseline grid
Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support
Writing Tone
concise, confident, helpful, clear, friendly, professional, action-oriented, low-jargon
Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit
- design for empty/loading/error states
- ensure responsive behavior by default
- document accessibility rationale
Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid decorative motion without purpose
- avoid ambiguous labels
- avoid mixing multiple visual metaphors
- avoid inaccessible hit areas
Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.
Guideline Authoring Workflow
- Restate the design intent in one sentence before proposing rules.
- Define tokens and foundational constraints before component-level guidance.
- Specify component anatomy, states, variants, and interaction behavior.
- Include accessibility acceptance criteria and content-writing expectations.
- Add anti-patterns and migration notes for existing inconsistent UI.
- End with a QA checklist that can be executed in code review.
Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist
Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).
Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.
Related skills
More from bergside/awesome-design-skills and the wider catalog.

expressive
Vibrant, personality-driven design system with bold colors and playful graphics balanced by clear structure.

fantasy
Game-inspired fantasy design system with bold, premium visuals and rich color palettes.

fiction
Playful, cartoonesque design system with children's-book aesthetics and accessibility-first components.

flat
Flat design system with minimalist 2D style, vibrant colors, and clean typography for fast, accessible interfaces.

friendly
Approachable design system with rounded elements, whitespace, and soft pastel colors.

futuristic
Forward-looking design system with tech-inspired typography, modern layouts, and innovation-driven aesthetics.