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

loom-ui-skills

Enforce Loom's UI design system with color tokens, Inter font, and 4px spacing grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Loom's aesthetic, ensuring a familiar and polished user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Loom's specific color palette, typography, and spacing rules.
  • Light Mode Focus: Tailored for interfaces that utilize a light background and clean design.
  • Use Case: When developing a new feature for a SaaS product that needs to feel like a natural extension of Loom's existing user interface, use these guidelines to maintain brand consistency and user familiarity.

Quick Start

Apply Loom's UI design system to create a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about loom-ui-skills

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

FAQPage Schema
How do I build a light-mode interface that matches Loom's UI design system?▼

Build a light-mode interface matching Loom's UI design system by applying specific color tokens, the Inter font family, and a 4px spacing grid. This enforces visual consistency and a familiar user experience for SaaS features.

What color palette and typography rules define the Loom aesthetic for UI design?▼

The Loom UI design aesthetic is defined by specific light-mode color tokens, the Inter font family, and a strict 4px spacing grid. These constraints ensure polished, brand-consistent visual styling across new features.

Does this Loom UI design system support accessibility contrast ratios?▼

Yes, the Loom UI design system adheres to accessibility contrast ratios. It enforces specific color tokens for light-mode interfaces and defines component styling for buttons and interactive states to meet these standards.

Can I use this UI design system to style buttons and interactive states?▼

Yes, you can use this UI design system to style buttons and interactive states. It defines specific component styling rules alongside the 4px spacing grid and Inter typography to maintain Loom's visual consistency.

When should I use opinionated design constraints for light-mode interfaces?▼

Use opinionated design constraints for light-mode interfaces when developing a new SaaS feature that needs to feel like a natural extension of Loom's existing user interface, ensuring brand consistency and user familiarity.

Related Skills

Explore More Design & Creative Skills→
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
zm2231zm2231

handoff-manager

Generate design handoff specifications with component specs, design tokens, and accessibility notes.

Community
Advanced
sanky369sanky369
29

color-system

Create cohesive color systems with accessible theming and dark-mode support.

Community
Advanced
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate