skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-ibm

Apply IBM Carbon Design System tokens and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#design tokens#dark theme#ui generation#ibm#brand styling#carbon design system
One-click install
npx skills add https://github.com/deepparser/skills --skill design-ibm-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ibm
Source: https://github.com/deepparser/skills/tree/main/design-ibm
Command: npx skills add https://github.com/deepparser/skills --skill design-ibm-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match IBM's visual identity requires precise knowledge of the Carbon Design System's tokens, typography scale, and component rules, which are tedious to look up and easy to get wrong. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact color values (Blue 60 #0f62fe, Gray scale), IBM Plex typography specs, 8px spacing grid, and elevation rules for both light and dark themes. - Component Specifications: Defines buttons, cards, forms, navigation, tags, and notifications with Carbon-accurate padding, border-radius, and state styles. - Visual Reference Previews: Bundled light and dark theme HTML previews let you verify exact CSS values and component structure. - Use Case: When asked to build an enterprise dashboard styled like IBM, use this Skill to generate a dark masthead navigation, flat Gray 10 cards with 0px border-radius, and Blue 60 primary buttons that match the Carbon system exactly. ## Quick Start Use the design-ibm skill to create a landing page styled like IBM's website with a hero section, card grid, and contact form.

Frequently Asked Questions about design-ibm

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

FAQPage Schema
How do I style a UI to look like IBM's website?▼

Use the Carbon Design System tokens: IBM Blue 60 (#0f62fe) as the single accent, IBM Plex Sans at weight 300 for display headings, 0px border-radius on buttons and cards, and an 8px spacing grid. This Skill provides all exact values and component specs.

What colors does the IBM Carbon Design System use?▼

Carbon uses a monochrome gray scale (#161616 to #f4f4f4) plus one accent, Blue 60 (#0f62fe), for all interactive elements. Support colors are Red 60 for errors, Green 50 for success, and Yellow 30 for warnings.

Does this Skill support dark mode for IBM-styled interfaces?▼

Yes, it includes a full dark theme based on Carbon's Gray 100 theme with a #161616 background, Gray 90/80 layered surfaces, and Blue 40 (#78a9ff) for interactive elements. A dark theme HTML preview is bundled for reference.

Why should IBM-style buttons have no border radius?▼

Carbon's identity is fundamentally rectangular, so primary buttons, inputs, and cards use 0px border-radius. The only rounded exceptions are 24px pill-shaped tags and circular avatars.

What typography rules does IBM Carbon use?▼

Carbon uses IBM Plex Sans in three weights: 300 for display sizes above 42px, 400 for body text, and 600 for emphasis, with no bold weight. Small text at 14px and 12px gets micro letter-spacing of 0.16px and 0.32px respectively.

Related Skills

Explore More Design & Creative Skills→
luanzebaluanzeba

bolder

Apply bold styling to brand, UI, and marketing assets with accessibility considerations.

Community
Advanced
must1fmust1f

qiskit

Build, simulate, and deploy IBM quantum workflows with Qiskit.

Community
Advanced
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
fefogarciafefogarcia
1

carbon-design-system

Develop user interfaces with IBM's Carbon Design System v11.

Community
Intermediate