corporate
bergside/awesome-design-skills
Professional, brand-aligned design system with structured grids, minimalist layouts, and enterprise patterns.
What is corporate?
A corporate design-system skill for creating consistent, accessible, enterprise UI. Use it when building brand-aligned interfaces that require WCAG 2.2 AA compliance, semantic tokens, and implementation-ready component guidance.
- Provides design-token foundations (typography, color, spacing) anchored to semantic naming
- Defines component anatomy, states, and variants with explicit interaction behavior
- Ensures WCAG 2.2 AA accessibility with keyboard-first interactions and 44px+ touch targets
- Generates implementation-ready guidance with anti-patterns and QA checklists
- Supports responsive design and empty/loading/error states by default
- Enforces visual hierarchy and consistent spacing rhythm across enterprise interfaces
How to install corporate
npx skills add https://github.com/bergside/awesome-design-skills --skill corporateHow to use corporate
- 1.Review the style foundations (typography scale, color palette, spacing baseline) to understand the token system
- 2.Use the guideline authoring workflow to structure your design decisions: context, tokens, components, accessibility, content, anti-patterns, QA
- 3.Define component anatomy and required states (default, hover, focus-visible, active, disabled, loading, error) for each UI element
- 4.Apply accessibility acceptance criteria from WCAG 2.2 AA and test keyboard navigation, focus states, and screen-reader labels
- 5.Document anti-patterns and migration guidance for existing inconsistent UI
- 6.Execute the QA checklist during code review to verify token usage, state consistency, and accessibility compliance
Use cases
- Building a design system for a B2B SaaS platform with strict brand guidelines
- Creating accessible admin dashboards that require keyboard navigation and screen-reader support
- Establishing component rules and token documentation for a distributed design and engineering team
- Migrating inconsistent legacy UI to a unified corporate design language
- Authoring component specifications that can be directly implemented in code review
- Design system authors and maintainers
- Enterprise product designers
- Frontend engineers implementing branded interfaces
- Design leads establishing accessibility standards
- Teams building B2B or corporate applications
corporate FAQ
Primary (#3B82F6), secondary (#8B5CF6), success (#16A34A), warning (#D97706), danger (#DC2626), surface (#FFFFFF), and text (#111827). Typography uses Open Sans (primary), Poppins (display), and IBM Plex Mono (mono) with weights 100–900. Spacing is based on an 8pt baseline grid.
Follow WCAG 2.2 AA standards: use keyboard-first interactions, maintain visible focus states, prefer semantic HTML over ARIA, test with screen readers, ensure 44px+ touch targets, and support reduced-motion. Every accessibility statement must be testable in implementation.
Restate design intent, define tokens and constraints, specify component anatomy and states (default, hover, focus, active, disabled, loading, error), include accessibility acceptance criteria, document content and tone standards, list anti-patterns, and provide a QA checklist.
Yes. The skill emphasizes responsive behavior by default and includes guidance for edge cases like long labels, empty states, and overflow. Desktop-first typography and spacing scales support mobile adaptation.
Prioritize accessibility. The skill explicitly flags conflicts and requires accessibility to take precedence over local visual optimizations.
Full instructions (SKILL.md)
Source of truth, from bergside/awesome-design-skills.
name: corporate description: Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns. license: MIT metadata: author: typeui.sh
<!-- TYPEUI_SH_MANAGED_START -->Corporate Design System Skill (Universal)
Mission
You are an expert design-system guideline author for Corporate. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
Brand
Corporate UI/UX design focuses on professionalism, consistency, and brand alignment, typically featuring minimalist layouts, structured grids, and, in 2026, AI-driven personalization
Style Foundations
- Visual style: enterprise, premium
- Typography scale: desktop-first expressive scale | Fonts: primary=Open Sans, display=Poppins, mono=IBM Plex Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- 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, 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.

cosmic
Futuristic sci-fi design system with dark themes, neon accents, and spatial elements.

creative
Playful, character-driven design system with expressive typography and bold graphics for creative projects.

dithered
Dot-pattern rendering technique for retro, high-contrast visuals with limited color palettes.

doodle
Hand-drawn design system with doodles, sketches, and playful typography for informal, creative interfaces.

dramatic
High-contrast theatrical design system with bold layouts and immersive visuals for attention-grabbing UI.

editorial
Magazine-inspired editorial layouts with refined serif typography and structured grids for elegant reading experiences.