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

convertkit-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces inspired by Convertkit's aesthetic, ensuring consistency in light-mode design, font usage, and spacing.

Core Features & Use Cases

  • Consistent Design Language: Enforces Convertkit's specific color palette, typography (Inter font), and 4px grid system.
  • Accessibility Compliance: Mandates a minimum text contrast ratio of 4.5:1.
  • Use Case: When developing a new feature for a marketing platform that needs to align with Convertkit's existing brand identity, use this Skill to guide the UI development process.

Quick Start

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

Frequently Asked Questions about convertkit-ui-skills

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

FAQPage Schema
How do I build a light-mode UI design system using a 4px grid?▼

To build a light-mode UI design system using a 4px grid, apply this Skill to enforce the Inter font, specific color tokens, and consistent spacing rules. It defines typography styles, border-radius scales, and layout constraints for reliable component implementation.

What color tokens and typography styles are required for Convertkit-style interfaces?▼

Convertkit-style interfaces require specific color tokens for light mode and typography styles based on the Inter font. This Skill specifies heading and body text sizes, ensuring all components adhere to a strict 4px grid system for visual consistency.

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

Yes, this UI design system meets accessibility standards by mandating a minimum text contrast ratio of 4.5:1. This ensures that light-mode interfaces built with the Inter font and 4px spacing rules remain readable and compliant.

Can I use this Skill to align a marketing platform feature with an existing brand identity?▼

You can use this Skill to align a marketing platform feature with an existing brand identity by enforcing opinionated design constraints. It provides the specific color palette, typography, and 4px grid system needed to match the Convertkit aesthetic.

What are the limitations of applying a 4px grid system to light-mode interfaces?▼

A limitation of applying this 4px grid system is its strict focus on light-mode interfaces only. It enforces specific color tokens and Inter font typography, which may not translate to dark-mode designs without modifying the underlying design constraints.

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
ihlamuryihlamury
73

monzo-ui-skills

Enforce Monzo's light-mode UI design system with Inter font and 4px grid.

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
ihlamuryihlamury
73

framer-ui-skills

Enforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.

Community
Intermediate