Enterprise design skill for AI agents

Overview

Enterprise is an enterprise-grade design system skill file built for workflow automation platforms and data-heavy applications. When you give this skill file to an AI coding assistant, it generates interfaces that feel like professional tooling — clean, high-contrast, information-dense, yet never cluttered. The system combines the humanist warmth of Ubuntu with the condensed authority of Oswald to create a visual language that handles complex dashboards, drag-and-drop builders, and data visualization with confidence.

This skill is built for enterprise SaaS, automation platforms, internal tools, admin dashboards, analytics products, and any application where users work with data, workflows, and integrations for extended periods.

Design Tokens

Color Palette

Enterprise pairs a deep teal-black primary with a vibrant orange secondary — the combination signals both trustworthiness and energetic action:

The deep teal-black primary (#072C2C) anchors the interface with seriousness, while the orange secondary (#FF5F03) provides a high-energy contrast that makes calls to action unmissable. The warm parchment surface (#EDEADE) avoids the cold, sterile white that plagues most enterprise tools — it gives the interface a grounded, approachable quality without sacrificing professionalism.

Typography

Enterprise uses a three-font system that balances authority with readability across dense interfaces:

• Primary font: Ubuntu — a humanist sans-serif with a friendly, open character. Its rounded terminals and generous apertures make it exceptionally readable in data tables, form labels, and long-form settings pages where users scan quickly
• Display font: Oswald — a condensed, modernized gothic typeface that commands attention in headings and navigation. Its vertical compression fits more text in horizontal space, which is critical in enterprise layouts with many navigation items and section headers
• Monospace font: Ubuntu Mono — the natural monospace companion to Ubuntu, used for code snippets, workflow expressions, API endpoints, and technical values

The typography uses a desktop-first expressive scale — sizes are calibrated for the wide viewports where enterprise tools are primarily used, then adapt responsively for tablet and mobile contexts. The Oswald-to-Ubuntu shift between headings and body text creates a clear two-tier hierarchy: condensed display type for structure and wayfinding, humanist body type for readability and extended use.

Spacing

Enterprise uses a comfortable density mode — spacing is neither compact (which creates cognitive overload in data-heavy tools) nor loose (which wastes screen real estate that users need for content). The system prioritizes a balanced density where:

• Components have enough internal padding to be comfortably interactive
• Sections have enough separation to be visually distinct
• Data-dense views (tables, grids, dashboards) maintain readability without excessive scrolling
• Touch targets remain accessible without inflating the layout

This approach is specifically designed for the productivity context: users who spend hours in the interface need comfortable spacing that reduces eye strain, but they also need to see enough information at a glance to work efficiently.

The Enterprise Workflow Context

Enterprise is purpose-built for the patterns that workflow automation and data platforms require:

• Drag-and-drop builders — the skill file includes guidance for drag handles, drop zones, connection lines, and canvas interactions that are core to workflow editors
• Data-dense tables and grids — optimized for displaying many rows and columns with sortable headers, inline actions, and row selection states
• Multi-panel layouts — sidebars, property panels, and canvas areas that coexist on wide enterprise viewports
• Status and state indicators — workflow nodes, pipeline stages, and automation runs need clear visual states beyond the standard success/warning/danger
• Pattern and image components — visual elements specific to workflow diagrams, integration icons, and platform imagery

The skill file ensures AI-generated interfaces understand these enterprise patterns natively, not as afterthoughts bolted onto a generic component library.

Component Coverage

Enterprise includes guidance for over 40 component families plus enterprise-specific additions, each tuned for complex, data-rich interfaces:

• Inputs and forms — buttons, text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks
• Enterprise additions — patterns (workflow diagrams, connection lines, node maps) and images (integration icons, platform illustrations)

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, and explicit token usage for spacing, typography, and color. The skill file specifically prohibits mixing visual metaphors — the enterprise aesthetic stays consistent whether the user is in a workflow builder, a data table, or a settings page.

Accessibility

Enterprise enforces WCAG 2.2 AA compliance as a baseline, with particular attention to the accessibility challenges of complex enterprise interfaces:

• Keyboard-first interactions with visible focus states on every interactive element, including within drag-and-drop contexts
• Sufficient contrast between the warm parchment surface (#EDEADE) and text (#111827), and between the deep teal primary (#072C2C) and any overlaid text
• Semantic HTML structure and proper ARIA attributes throughout
• No decorative motion without purpose — animations serve functional feedback (drag confirmations, state transitions) rather than visual flair
• Accessible hit areas on all interactive elements, including small controls in dense data views

Enterprise tools often regress on accessibility because of their complexity. The skill file explicitly flags areas where data density, custom drag interactions, or multi-panel layouts risk creating accessibility gaps, and provides concrete solutions.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull enterprise

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build workflow editors, dashboards, settings pages, or data tables, and the output will follow the Enterprise system's tokens, comfortable density, and three-font hierarchy.

Claude (Anthropic)

Use Enterprise directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce enterprise-grade, data-rich interfaces following the Enterprise tokens, typography rules, and accessibility requirements

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and enterprise patterns as prompt context

Design Philosophy

Enterprise is built on the principle that enterprise software should be powerful without being punishing. The skill file follows three rules:

1. Density with comfort — users need to see a lot of information, but they also need to use the interface for hours. The comfortable density mode balances information access with visual breathing room
2. Warmth in enterprise — the parchment surface, the humanist Ubuntu body type, and the orange accent deliberately reject the cold-gray enterprise stereotype. Professional tools can feel welcoming
3. Patterns over pages — enterprise products are built from repeating patterns (data tables, form groups, workflow nodes) not standalone pages. The skill file optimizes for pattern consistency across the entire application surface