skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

wise-ui-skills

Enforce Wise UI design constraints for light-mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#design system#ui design#light mode#wise#inter font#4px grid
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill wise-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wise-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/wise
Command: npx skills add https://github.com/ihlamury/design-skills --skill wise-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces inspired by Wise's aesthetic, ensuring consistency and adherence to their design principles.

Core Features & Use Cases

  • Light Mode UI: Guides the creation of interfaces that utilize a light color scheme.
  • Inter Font & 4px Grid: Enforces the use of the Inter font family and a consistent 4px spacing grid for layout and element sizing.
  • Color Palette Adherence: Specifies semantic color tokens and ensures sufficient text contrast ratios for accessibility.
  • Use Case: When designing a new feature for a Wise-inspired application, use this Skill to ensure the UI matches Wise's clean, light, and grid-based design language.

Quick Start

Apply the wise-ui-skills to build a light-mode interface using Inter font and a 4px grid.

Frequently Asked Questions about wise-ui-skills

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

FAQPage Schema
How do I enforce a 4px grid and Inter font in UI design?▼

To enforce a 4px grid and Inter font in UI design, apply design system constraints that specify spacing rules, typography scales, and border-radius values for consistent layout and element sizing.

What are semantic color tokens for light mode interfaces?▼

Semantic color tokens for light mode interfaces are predefined color values that ensure sufficient text contrast ratios for accessibility while maintaining a clean, light color scheme across the application UI.

How do I build a Wise-inspired design system for front-end development?▼

Build a Wise-inspired design system by applying opinionated constraints for light mode, Inter font, 4px grid spacing, semantic color tokens, typography scales, and specific border-radius values to match their clean aesthetic.

Does this UI design system support dark mode?▼

No, this UI design system does not support dark mode. It enforces strict constraints for building light-mode interfaces only, utilizing a light color scheme with specific semantic color tokens.

Can I use this design system for UX design tasks or is it only for front-end development?▼

You can use this design system for both front-end development and UI/UX design tasks, as it enforces design principles, typography scales, spacing rules, and border-radius values for consistent interface creation.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
inbharataiinbharatai
22

theme-factory

Generate UI themes with color tokens, spacing scales, and typography for CSS and Tailwind CSS.

Community
Intermediate
ihlamuryihlamury
73

ramp-ui-skills

Enforce Ramp UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

ashby-ui-skills

Enforce Ashby-inspired UI design constraints with dark mode, Inter font, and a 4px grid.

Community
Intermediate