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

cal-ui-skills

Apply Cal's UI design system with Inter font and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with the Cal application's aesthetic, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

  • Light Mode Design: Enforces light backgrounds and a clean, minimal color palette.
  • Consistent Typography: Utilizes the Inter font family with specific heading and body text styles.
  • 4px Grid System: Ensures consistent spacing and alignment based on a 4px grid.
  • Use Case: When designing a new scheduling feature for a platform that aims to match Cal's look and feel, use these guidelines for colors, fonts, and spacing.

Quick Start

Apply Cal's UI design system to a new web component.

Frequently Asked Questions about cal-ui-skills

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

FAQPage Schema
How do I build light-mode interfaces with a 4px grid system?▼

You can build light-mode interfaces with a 4px grid system by applying semantic color tokens, Inter font typography styles, and specific border-radius scales to ensure consistent spacing and alignment. This enforces a clean, minimal color palette for web components.

What design tokens are needed for Cal-inspired UI design?▼

Cal-inspired UI design requires semantic color tokens for light backgrounds, Inter font family typography styles, border-radius scales, and layout constraints based on a 4px grid. These tokens enforce visual consistency and adhere to accessibility standards for text contrast.

Can I use the Inter font family for scheduling application interfaces?▼

Yes, you can use the Inter font family for scheduling application interfaces by applying specific heading and body text styles. This ensures consistent typography that matches the Cal application aesthetic and maintains a high-quality user experience.

Does this UI design system support accessibility standards for text contrast?▼

Yes, this UI design system supports accessibility standards for text contrast and interactive states. It provides specific semantic color tokens for light-mode interfaces that ensure adequate contrast ratios for visually consistent and accessible web components.

How do I apply consistent spacing and alignment to web components?▼

You apply consistent spacing and alignment to web components by utilizing a 4px grid system. This enforces specific layout constraints and border-radius scales, ensuring that all elements maintain uniform spacing and visual alignment across the interface.

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
vecearvecear

design-to-component-translator

Translate Figma design specs into React components with Tailwind/shadcn styling.

Community
Advanced
jaydubya818jaydubya818

core-components

Provide reusable UI components and enforce design tokens in React Native applications.

Community
Intermediate
ihlamuryihlamury
73

ashby-ui-skills

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

Community
Intermediate