Corporate design skill for AI agents

Overview

Corporate is a premium, structured design system skill file built for organizations that need their digital products to project professionalism, consistency, and brand confidence at scale. When you give this skill file to an AI coding assistant, it generates interfaces that feel like they were produced by a Fortune 500 design team — structured grids, measured typography, and a polished blue-and-violet palette that communicates trust and competence.

This skill combines the readability of Open Sans, the personality of Poppins display headings, and the technical precision of IBM Plex Mono to create a three-tier typographic system that handles everything from investor-facing landing pages to complex internal admin dashboards. The design is minimal but never bland — premium, not just professional.

This skill is built for corporate websites, B2B SaaS platforms, investor relations pages, company intranets, HR portals, financial dashboards, consulting firm sites, and any product where the interface must inspire confidence across stakeholders, executives, and end users.

Design Tokens

Color Palette

Corporate uses a blue-and-violet palette that is universally associated with trust, technology, and professionalism:

The blue-and-violet combination is the premium corporate palette. The primary blue (#3B82F6) is warm enough to feel approachable yet saturated enough to carry brand weight. The violet secondary (#8B5CF6) elevates the palette beyond the typical corporate-blue monotone, adding a layer of sophistication for premium moments — feature highlights, CTAs, and brand accents — without breaking the professional tone.

Typography

Corporate uses a three-font system engineered for the full range of corporate communications:

• Primary font: Open Sans — the industry-standard humanist sans-serif for professional interfaces. Its neutral, highly legible character makes it invisible in the best way — users read content, not type. Open Sans at body sizes (14–16px) handles data tables, form labels, long-form reports, and settings pages with effortless clarity
• Display font: Poppins — geometric, rounded, and modern. Poppins headings give the corporate interface personality without sacrificing professionalism. The shift from Open Sans body text to Poppins headings creates a subtle but effective two-tier hierarchy: warm authority for headings, neutral clarity for everything else
• Monospace font: IBM Plex Mono — the corporate-grade monospace. Designed by IBM for enterprise use, it brings the same precision and professionalism to code blocks, financial data, and technical content that Open Sans and Poppins bring to the rest of the interface

The typography uses a desktop-first expressive scale — sizes calibrated for the wide viewports where corporate dashboards and presentations are primarily consumed, with responsive adaptation for mobile. Font weights span 100 through 900, enabling fine-grained typographic hierarchy: light weights for large display numbers, regular for body text, semi-bold for labels, and bold for headings.

Spacing

All spacing is built on an 8pt baseline grid. Every margin, padding, and gap aligns to multiples of 8px. The 8pt grid is the corporate design standard because it:

• Creates mathematically consistent layouts that scale predictably across breakpoints
• Aligns with the pixel grids of standard displays (1x and 2x), preventing sub-pixel rendering artifacts
• Produces the structured, orderly visual rhythm that corporate interfaces require
• Enables design teams and AI assistants to make spacing decisions by formula rather than by eye

In a corporate context, the 8pt grid is also a governance tool — it reduces subjective spacing decisions that lead to visual inconsistency across teams, products, and pages.

The Corporate Premium Standard

Corporate distinguishes itself from generic "professional" design by elevating every detail to premium quality:

• Structured grids — layouts use defined column systems with consistent gutters. Content aligns to grid edges, not arbitrary positions. The result is the engineered precision expected from corporate digital products
• Brand alignment — the blue-and-violet palette, the Open Sans / Poppins pairing, and the 8pt grid create a visual system that works as well on a product page as it does on a pitch deck slide. Every element looks like it belongs to the same brand
• Minimalist but not sparse — Corporate uses enough visual density to feel substantial and information-rich, avoiding the over-simplified emptiness that can make corporate sites feel hollow. Cards, data displays, and navigation are well-populated and purposefully arranged
• AI-ready patterns — as corporate design in 2026 increasingly incorporates AI-driven personalization, the skill file includes guidance for adaptive content blocks, personalized dashboard layouts, and dynamic data visualization that responds to user context

Component Coverage

Corporate includes guidance for over 40 component families, each meeting the fit-and-finish standard expected by enterprise stakeholders:

• Inputs and forms — polished buttons with clear weight hierarchy, precise text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — clean cards, well-structured tables, data lists, data grids, charts, stats/metrics dashboards, badges, avatars with role indicators
• Navigation — breadcrumbs, pagination, steppers, sidebars, branded top bars, tabs, command palette
• Overlays and feedback — modals, drawers/sheets, tooltips, popovers, alerts, toasts, notifications center, progress indicators, skeleton loaders
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with mandatory designs for empty, loading, and error states. Responsive behavior is built in by default. The writing tone across all components is professional, action-oriented, and low-jargon — button labels, error messages, and onboarding copy all speak clearly to a mixed audience of executives, operators, and technical users.

Accessibility

Corporate has the most comprehensive accessibility specification, reflecting the legal and ethical obligations that enterprise organizations face:

• WCAG 2.2 AA compliance as a non-negotiable baseline
• Keyboard-first interactions with visible focus states on every interactive element
• Semantic HTML before ARIA — native elements first, ARIA attributes only when semantic markup cannot convey the interaction
• Screen-reader tested labels — every interactive element must have a programmatically associated label verified with a screen reader
• Reduced-motion support — all transitions and animations respect prefers-reduced-motion
• 44px+ touch targets — all interactive elements meet minimum touch target sizes across mobile and tablet viewports
• High-contrast support — the system works in forced high-contrast modes required by enterprise accessibility policies
• Accessibility rationale documented — every accessibility decision is accompanied by a brief explanation of why, enabling audit trails and compliance reporting

Corporate design carries specific accessibility pressure: enterprise customers often require VPAT documentation, government clients mandate Section 508 compliance, and large organizations face legal liability for inaccessible digital products. The skill file ensures AI-generated output meets these standards from the first generation, not as a retrofit.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull corporate

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 landing pages, admin dashboards, or investor-facing sites, and the output will follow the Corporate system's premium palette, three-font hierarchy, 8pt grid, and comprehensive accessibility standards.

Claude (Anthropic)

Use Corporate 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 polished, enterprise-grade interfaces following the Corporate tokens, structured grid, and premium typographic system

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 corporate guidelines as prompt context

Design Philosophy

Corporate is built on the principle that professional design is a competitive advantage. The skill file follows three rules:

1. Consistency is credibility — every page, every component, every interaction follows the same visual rules. In a corporate context, visual inconsistency signals organizational inconsistency. The structured grid, token system, and three-font hierarchy ensure that AI-generated output looks like it came from a unified design team
2. Premium, not just professional — Corporate goes beyond "clean and functional" to "polished and confident." The Poppins display headings, the violet secondary accent, and the measured 8pt spacing create a subtle sense of quality that distinguishes premium corporate design from generic corporate templates
3. Built for governance — the system is designed to scale across teams, products, and regions. Every decision is documented, every accessibility choice is rationale-backed, and every token is semantic. This is a design system that survives organizational growth