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

segment-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building Segment-style interfaces, ensuring consistency in light-mode design, Inter font usage, and a 4px grid system.

Core Features & Use Cases

  • Consistent Design Language: Enforces Segment's specific color palette, typography, and spacing.
  • Accessibility Compliance: Mandates a minimum text contrast ratio of 4.5:1.
  • Use Case: When developing a new feature that needs to visually align with Segment's existing product suite, use this Skill to guide the UI development process.

Quick Start

Apply the segment-ui-skills to ensure the new interface uses Inter font and a 4px grid.

Frequently Asked Questions about segment-ui-skills

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

FAQPage Schema
How do I build a Segment-style UI for a light-mode application?▼

To build a Segment-style UI for a light-mode application, apply constraints that enforce the Inter font, a 4px grid system, and specific color tokens for consistent visual alignment with Segment's product suite.

What typography and spacing rules do I need for Segment interface design?▼

For Segment interface design, you need to use the Inter font and adhere to a 4px grid system. Specific typography scales and spacing rules are applied to maintain consistent layout constraints across the application.

Does Segment UI design require specific accessibility contrast ratios?▼

Yes, Segment UI design requires accessibility compliance with a minimum text contrast ratio of 4.5:1. This ensures color contrast standards are met for readable text and interactive states in light-mode interfaces.

How do I apply Segment color tokens and border styles to my application?▼

You apply Segment color tokens and border styles by utilizing the design system's specified rules for layout constraints and interactive states. This opinionated approach ensures consistent application development and visual alignment.

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

No, you cannot use this design system for dark mode interfaces. The constraints specifically enforce Segment's UI design system for light-mode interfaces, meaning dark mode is not supported by this configuration.

Why does my new feature visually misalign with the Segment product suite?▼

Your feature visually misaligns because it lacks opinionated design constraints. Applying this Skill enforces Segment's specific color palette, typography, and 4px grid spacing to ensure visual consistency across the product suite.

Related Skills

Explore More Design & Creative Skills→
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
ihlamuryihlamury
73

miro-ui-skills

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

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced