SuperAPI AI Directory
Partner中文AI newsFavorites
Skillskf-g-css-tak-design-system-terminology

kf-g-css-tak-design-system-terminology

Frontend & websites

View repository

Updated 10-15 23:42

About this skill

Design System Terminology Guidelines

This skill is for aligning the names used in design systems and UI implementation with Web standards and responsibility boundaries. Do not decide naming based on appearance or convention; judge based on the meaning of HTML and CSS, responsibilities, reuse contracts, and scope of application.

When to use this skill

  • When deciding the official names for a design system or UI library
  • Container Wrapper Block Text When reviewing designs or documents that contain ambiguous terms such as
  • Link と Button、Navigation と Menu、Pattern と Component と Template When separating out
  • When organizing the naming of layout wrappers, spacing, column structures, and text types
  • When unifying glossaries, implementation guides, Figma names, CMS names, and review comments

What to check first

  1. Does the term have an established meaning in Web standards?
  2. Does the name express responsibility rather than appearance?
  3. Is it structure, behavior, a reuse unit, a page rendering definition, or an appearance variation?
  4. Does it have a reuse contract managed from a single source?
  5. Is it a higher-level definition applied to the entire page?

Only when there is not enough information and the above judgments cannot be made, briefly check the following.

  • What HTML element is the entity?
  • Does it involve state changes or JavaScript?
  • Is it reused from a single definition?
  • Is it a rendering definition for the entire page, or a local UI fragment?

Most important policies

  • Do not make terminology contradict existing Web standards
  • Name by responsibility, not by appearance
  • Do not confuse structure, behavior, reuse units, page rendering definitions, and themes
  • Do not use overly broad generic terms as official names
  • Make design boundaries and reuse conditions understandable from the name

Terminology criteria

Element

  • Refers to an HTML element itself, or the smallest unit directly corresponding to an HTML element
  • For generic terms for HTML elements, prefer Element prioritize
  • Do not call every element Block Module Widget not called

Section

  • Refers to a semantic or structural section within a page
  • section The element is the first candidate, but depending on context, article etc. may be used
  • Do not use in the sense of a content-width wrapper Section not use

Container

  • CSS の container Refers only to elements to which -family properties are applied
  • section container Call it together with the related target, as in
  • Do not call a structural wrapper for content-width control Container not called

Inner / Outer

  • Inner refers to an inner wrapper responsible for content-width control or centering
  • Outer refers to an outer wrapper responsible for external spacing, surrounding placement, and adjusting relationships with the surroundings
  • Inner / Outer should not be used alone as an all-purpose wrapper name; handle it together with the related target, as insection inner card outer treat as a set with related targets, as in
  • Inner / Outer Do not confuse with the concept of a container query target

Gutter

  • Refers to inline-direction spacing that protects between the content edge and the viewport edge
  • Values should be tokenized and not replaced with ad hoc padding adjustments per Section
  • The spacing between columns or elements is Gutter not called

Gap

  • refers to the spacing between child elements in Flex, Grid, Multi-column, etc.
  • The distance between rows, columns, cards, and chips is gap handled with the concept of
  • In normal flow, margin を Gap not called

Columns / Flex Columns / Grid / Row

  • Columns refers only to column placement by CSS Multi-column Layout
  • Column placement by Flexbox is Flex Columns called
  • Structural placement by CSS Grid Layout is Grid called
  • Row is a placement result that holds in the parent layout context and is not defined as an independent element name

Paragraph / Rich Text

  • A single paragraph, or a single text block, is Paragraph called
  • An editing area that contains multiple inline decorations or multiple types of child elements is Rich Text called
  • A single paragraph, inline text, and long-form editing area are collectively Text not called

Link / Button

  • <a> An element that uses Link is called
  • <button> と <input type="submit"> <input type="button"> <input type="reset"> は Button treat as
  • Merely looking like a button does not mean Button should be named
  • <a role="button"> is a boundary case and Button is close to, but in principle the implementation itself should be avoided
  • ARIA role should not be the primary determinant of the official name

Navigation / Menu

  • Navigation flows within a site or app are Navigation called
  • If necessary, Primary Navigation Footer Navigation Local Navigation supplement the responsibility as in
  • UI for command execution or operation selection is Menu called
  • Site navigation flows Menu are not called, and operation menus are Nav also not called

Template / Pattern / Component / Dynamic Element / Theme

  • Template refers to a rendering definition applied at the page level or an equivalent higher-level unit
  • Pattern refers to a static, reusable display fragment and does not assume dynamic data or conditional logic
  • Component refers to a reusable unit managed from a single source and having replaceable input points
  • Dynamic Element refers to behavior-centric UI involving JavaScript and state transitions, andComponent is not mutually exclusive with
  • Theme refers to differences in appearance, tokens, typography, color, spacing, and default layout on top of a shared architecture
  • Static fragments Template are not called, and mere duplicates are not automatically Component regarded as, and the architecture itself Theme is not called

Deprecated term

Block

  • display: block easily conflicts with existing meanings such as, and is too ambiguous as a general generic term

Wrapper

  • Does not indicate what responsibility the wrapper has
  • For width control, Inner, and for externally related layout, Outer prioritize

Text

  • Cannot distinguish between a single paragraph, inline text, and a long-form editing area

Widget / Module

  • The scope of responsibility is ambiguous, making it hard to express design boundaries

Recommended correspondence table

Usage Recommended term Discouraged term
Generic term for HTML elements Element Block, Module, Widget
Section boundary Section Group
Element with CSS container functionality Container Generic container, Wrapper
Content width wrapper Inner Container, Wrapper
Wrapper for external related-type layout Outer Wrapper
Outer protective margin Gutter Padding, Column gutter
Inter-element margin Gap Gutter
Column layout via Multi-column Columns Flex Columns, Grid Columns
Column layout via Flex Flex Columns Columns
Structural layout via Grid Grid Columns, Grid Columns
Single paragraph Paragraph Text
Long-form editing area Rich Text Text
<a> Link Button, Link Button
<button> Button Link Button
Site navigation flow Navigation Menu
Action menu Menu Nav
Static reusable fragment Pattern Template
Page rendering definition Template Pattern
Unit with a reuse contract Component Static copy
Behavior-centric UI Dynamic Element Collective term for Component
Appearance difference Theme Architecture

Decision flow

  1. Check whether the meaning of that term is established in Web standards
  2. Check whether the name is appearance-driven
  3. Determine whether it is a static display fragment or dynamic UI
  4. If it is a single source with a reuse contract, consider Component consider
  5. If it is a page-level and conditional rendering definition, consider Template consider
  6. Otherwise, narrow it down to a more specific term such as Element Section Pattern narrow down to more specific terms such as

Documentation operation rules

  • For every official term, define what it refers to, what it does not refer to, where it is used, and where it is not used
  • Make UI labels and official names match as much as possible
  • Treat additions or changes to terms not as mere notation fixes but as compatibility changes
  • Even when allowing colloquial names, define an official name separately

Policy for output

  • First, clarify which of Element Section Container Inner Outer Gutter Gap Columns Flex Columns Grid Paragraph Rich Text Link Button Navigation Menu Pattern Component Dynamic Element Template Theme the target is handled as
  • When rejecting an existing name, briefly indicate what is risky. Perspectives are conflict with Web standards, appearance-driven naming, ambiguity of responsibility, and unclear design boundaries
  • Container If Inner is used as a content width wrapper, prioritize replacing it with
  • Wrapper Block Text For ambiguous terms such as
  • Pattern Component Template , propose breaking them down into terms with clearer responsibilities

Final check

  • Does that name contradict the existing meanings of HTML and CSS?
  • Does that name express responsibility rather than appearance?
  • Are structure, behavior, reuse unit, page rendering definition, and theme not being conflated?
  • Can the reuse conditions and management unit be understood from the name?
  • Is an overly broad generic term not being made the official name?
  • Are inconsistencies between UI labels, implementation names, and document names left unaddressed?
  • Is the scope of impact of terminology changes being checked?

References