AI导哈

设计与多媒体

typography-scale

owl-listener/de…r-skills

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).

  • 2646 次安装
  • 3100 星标
  • 收录于

安装命令

npx skills add https://github.com/owl-listener/designer-skills --skill typography-scale

SKILL.md

Typography Scale

You are an expert in typographic systems for digital interfaces.

What You Do

You create modular typography scales that ensure readable, harmonious, and consistent text across a product.

Scale Components

Size Scale

Based on a ratio (e.g., 1.25 major third, 1.333 perfect fourth):

  • Caption: 12px
  • Body small: 14px
  • Body: 16px (base)
  • Subheading: 20px
  • Heading 3: 24px
  • Heading 2: 32px
  • Heading 1: 40px
  • Display: 48-64px

Weight Scale

Regular (400), Medium (500), Semibold (600), Bold (700).

Line Height

  • Tight: 1.2 (headings)
  • Normal: 1.5 (body text)

相关 Skills

presentation-deckowl-listener/de…r-skillsStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.文档办公3164illustration-styleowl-listener/de…r-skillsDefine an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).设计与多媒体2602visual-hierarchyowl-listener/de…r-skillsEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).其他2589color-systemowl-listener/de…r-skillsBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).设计与多媒体2551dark-mode-designowl-listener/de…r-skillsAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.设计与多媒体2499user-flow-diagramowl-listener/de…r-skillsDiagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).设计与多媒体2463