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

descript-ui-skills

Enforce Descript UI design constraints for dark mode, Inter font, and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark UIs.
  • Typography Guidelines: Specifies the use of the Inter font family, font sizes, weights, and text balancing for clear hierarchy.
  • Spacing and Layout: Adheres to a 4px grid system and defines consistent spacing and layout patterns.
  • Component Styling: Provides guidance on button styles and interactive states (focus, hover, disabled).
  • Use Case: When designing a new feature for a video editing application that needs to match the aesthetic of Descript, use this Skill to guide the UI development.

Quick Start

Apply Descript's UI design system to a new project, ensuring dark mode, Inter font, and a 4px grid are used.

Frequently Asked Questions about descript-ui-skills

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

FAQPage Schema
How do I build a UI that matches Descript's dark mode design system?▼

You build Descript-style interfaces by enforcing dark backgrounds, the Inter font family, and a 4px spacing grid. This Skill provides the specific color tokens, typography scales, border-radius values, and layout patterns needed to ensure visual consistency.

What typography guidelines are required for Descript-style UI design?▼

Descript-style UI design requires the Inter font family. This Skill specifies the exact font sizes, weights, and text balancing needed to establish a clear visual hierarchy and consistent typography scale across your interface.

Can I use this design system for light mode interfaces?▼

No, this design system is strictly for dark mode implementation. It enforces dark backgrounds and specific color palettes suitable for dark UIs, meaning it is not configured to support light mode themes or light background layouts.

How do I apply a 4px spacing grid to video editing application features?▼

Apply a 4px spacing grid by following this Skill's defined spacing and layout patterns. It ensures all elements in your video editing application features align properly, maintaining consistent spacing and structure across the entire interface.

Does this UI design system provide guidance on interactive component styling?▼

Yes, it provides specific guidance on component styling, including button styles and interactive states. It defines the visual rules for focus, hover, and disabled states to ensure components react consistently within the dark mode interface.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

spotify-ui-skills

Enforce Spotify-inspired dark mode design constraints with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

convex-ui-skills

Enforce Convex design constraints for dark-mode UIs with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

things-ui-skills

Enforce Things-inspired design constraints for light mode interfaces using Inter font and an 8px grid.

Community
Intermediate