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

lemonsqueezy-ui-skills

Enforce Lemonsqueezy's UI design system with light mode, Inter font, and a 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the Lemonsqueezy platform, ensuring a familiar and branded user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Lemonsqueezy's specific use of light mode, Inter font, and a 4px grid for UI elements.
  • Color Palette Enforcement: Ensures adherence to a defined set of semantic color tokens for backgrounds, text, and accents.
  • Typography Guidelines: Specifies font families, sizes, weights, and text balancing for headings and body text.
  • Spacing and Borders: Mandates the use of a 4px grid for spacing and a defined scale for border-radius.
  • Use Case: When developing a new feature or a standalone application that needs to feel like a native part of the Lemonsqueezy ecosystem, these guidelines ensure immediate brand recognition and usability.

Quick Start

Apply the Lemonsqueezy UI skills to create a light mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about lemonsqueezy-ui-skills

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

FAQPage Schema
How do I build interfaces that match the Lemonsqueezy UI design system?▼

To build Lemonsqueezy-style interfaces, apply design constraints enforcing light mode, the Inter font, and a 4px grid for spacing, borders, and typography to ensure brand consistency.

What color tokens are required for Lemonsqueezy light mode interface development?▼

Lemonsqueezy light mode interface development requires using specific semantic color tokens for backgrounds, accents, and text, including `surface-base`, `accent`, and `text-primary`.

How do I format typography and spacing using a 4px grid for UI design?▼

Formatting typography and spacing on a 4px grid involves using the Inter font family with specific font sizes and weights for headings and body text, alongside a defined border-radius scale.

Does this UI design system support dark mode or only light mode?▼

This UI design system specifically enforces light mode for interface development. It provides opinionated constraints for colors and typography to ensure a branded Lemonsqueezy user experience.

When should I use Lemonsqueezy UI constraints for application development?▼

Use Lemonsqueezy UI constraints when developing a new feature or standalone application that needs to feel like a native part of the Lemonsqueezy ecosystem for immediate brand recognition.

What are the limitations of using a 4px grid and semantic tokens for UI design?▼

The limitations of this 4px grid and semantic token approach include strict adherence to defined colors, typography, spacing, and interactive states, limiting custom design deviations.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
first-flukefirst-fluke
218

frontend-engineer

Implement Next.js frontend code with shadcn/ui and design-token fidelity.

Official
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

arc-ui-skills

Enforce Arc's UI design system for light-mode interfaces with Inter font and a 4px grid.

Community
Intermediate