Enforce Intercom's light-mode UI constraints with Inter font and a 4px grid.
npx skills add https://github.com/ihlamury/design-skills --skill intercom-ui-skills
Please help me install this Agent Skill. Skill: intercom-ui-skills Source: https://github.com/ihlamury/design-skills/tree/main/skills/intercom Command: npx skills add https://github.com/ihlamury/design-skills --skill intercom-ui-skills
This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Intercom's design system, ensuring a familiar and polished user experience.
Apply the intercom-ui-skills to ensure the new interface uses the Inter font and a 4px grid for spacing.
High-intent search queries and answers about installing and using this skill.
To build an Intercom-style interface, apply the Inter font family, enforce a strict 4px grid for spacing, and use predefined semantic color tokens. These constraints ensure your application maintains visual consistency with Intercom's familiar light-mode aesthetic.
Intercom-style UI design requires the Inter font for all heading and body text styles, combined with a 4px grid system for spacing. Adhering to these specific typography and spacing rules ensures layout consistency and brand familiarity.
This design system approach is specifically configured for light mode interfaces. It enforces light-mode semantic color tokens and layout considerations, meaning it is not suitable for building dark mode customer support portals without modifying the underlying color tokens.
Semantic color tokens standardize the application of colors across your customer support portal by defining specific values for elements like backgrounds and text. Using these predefined tokens instead of raw hex values ensures UI consistency and simplifies future theme adjustments.
The best way to ensure border and layout consistency is to apply the specified border radius scales alongside the 4px grid system. This enforces geometric uniformity across all components, matching Intercom's polished visual style.
This UI design system requires no external dependencies or pre-built component libraries. It functions purely as a set of design constraints and guidelines, allowing you to implement the Intercom aesthetic directly within your existing development environment.
ihlamuryEnforce Notion's UI design system for light-mode interfaces using Inter font and 4px grid.
JaylaelikeCodify design tokens for spacing, radii, color, and typography into reusable UI guidelines.
ihlamuryEnforce Pinterest UI design constraints for light-mode interfaces.
ihlamuryEnforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.
