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

substack-ui-skills

Enforce Substack-inspired UI constraints with light mode, Inter font, and a 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Light Mode Design: Enforces light backgrounds and a clean, minimal visual style.
  • 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 content platform that aims for a clean, readable, and modern feel similar to Substack, these guidelines will ensure brand consistency and a polished UI.

Quick Start

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

Frequently Asked Questions about substack-ui-skills

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

FAQPage Schema
How do I build a Substack-style UI with a 4px grid and Inter font?▼

To build a Substack-style UI, apply design constraints enforcing a 4px grid system, Inter font family typography scales, and light mode color palettes for consistent, minimal interface development.

What are the core design system constraints for Substack-style interfaces?▼

Core design system constraints for Substack-style interfaces include light backgrounds, specific color palettes, Inter font typography scales, 4px grid spacing rules, border radiuses, and accessibility standards for text contrast.

Can I use this UI design system for dark mode platforms?▼

You cannot use this UI design system for dark mode platforms because it explicitly enforces light mode backgrounds and a clean, minimal visual style to match the Substack aesthetic.

Do I need specific dependencies to enforce Substack UI design constraints?▼

You do not need specific dependencies to enforce Substack UI design constraints, as the guidelines operate independently to define color palettes, typography, spacing, and accessibility standards.

What is the best way to ensure accessibility in a Substack-style design system?▼

The best way to ensure accessibility in a Substack-style design system is to adhere to the enforced text contrast and interactive state standards specified within the provided UI design constraints.

Why does my content platform UI look inconsistent despite using an Inter font?▼

Your content platform UI likely looks inconsistent because it lacks a 4px grid system and opinionated spacing, border radius, and layout rules to enforce visual alignment alongside the Inter font.

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
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
ihlamuryihlamury
73

framer-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

plaid-ui-skills

Enforce Plaid's UI design system with dark mode, Inter font, and 4px grid.

Community
Intermediate