201 lines
2.8 KiB
Markdown
201 lines
2.8 KiB
Markdown
# Design System Naming Conventions
|
|
|
|
**Purpose:** Consistent naming across design system components and tokens.
|
|
|
|
**Referenced by:** Component-type instructions, design system operations
|
|
|
|
---
|
|
|
|
## Component IDs
|
|
|
|
**Format:** `[type-prefix]-[number]`
|
|
|
|
**Prefixes:**
|
|
|
|
- btn = Button
|
|
- inp = Input Field
|
|
- chk = Checkbox
|
|
- rad = Radio
|
|
- tgl = Toggle
|
|
- drp = Dropdown
|
|
- mdl = Modal
|
|
- crd = Card
|
|
- alt = Alert
|
|
- bdg = Badge
|
|
- tab = Tab
|
|
- acc = Accordion
|
|
|
|
**Examples:**
|
|
|
|
- `btn-001` = First button component
|
|
- `inp-002` = Second input field component
|
|
- `mdl-001` = First modal component
|
|
|
|
**Rules:**
|
|
|
|
- Always lowercase
|
|
- Always hyphenated
|
|
- Always zero-padded (001, not 1)
|
|
- Sequential within type
|
|
|
|
---
|
|
|
|
## Component Names
|
|
|
|
**Format:** `[Type] [Descriptor]` or just `[Type]`
|
|
|
|
**Examples:**
|
|
|
|
- `Button` (generic)
|
|
- `Navigation Button` (specific)
|
|
- `Primary Button` (variant-focused)
|
|
- `Icon Button` (visual-focused)
|
|
|
|
**Rules:**
|
|
|
|
- Title case
|
|
- Descriptive but concise
|
|
- Avoid redundancy (not "Button Button")
|
|
|
|
---
|
|
|
|
## Variant Names
|
|
|
|
**Format:** Lowercase, hyphenated
|
|
|
|
**Purpose-Based:**
|
|
|
|
- `primary` - Main action
|
|
- `secondary` - Secondary action
|
|
- `destructive` - Delete/remove
|
|
- `success` - Positive confirmation
|
|
- `warning` - Caution
|
|
- `navigation` - Navigation action
|
|
|
|
**Visual-Based:**
|
|
|
|
- `outlined` - Border, no fill
|
|
- `ghost` - Transparent background
|
|
- `solid` - Filled background
|
|
|
|
**Size-Based:**
|
|
|
|
- `small` - Compact
|
|
- `medium` - Default
|
|
- `large` - Prominent
|
|
|
|
**Rules:**
|
|
|
|
- Lowercase
|
|
- Hyphenated for multi-word
|
|
- Semantic over visual when possible
|
|
|
|
---
|
|
|
|
## State Names
|
|
|
|
**Standard States:**
|
|
|
|
- `default` - Normal state
|
|
- `hover` - Mouse over
|
|
- `active` - Being clicked/pressed
|
|
- `focus` - Keyboard focus
|
|
- `disabled` - Cannot interact
|
|
- `loading` - Processing
|
|
- `error` - Error state
|
|
- `success` - Success state
|
|
- `warning` - Warning state
|
|
|
|
**Rules:**
|
|
|
|
- Lowercase
|
|
- Single word preferred
|
|
- Use standard names when possible
|
|
|
|
---
|
|
|
|
## Design Token Names
|
|
|
|
**Format:** `--{category}-{property}-{variant}`
|
|
|
|
**Color Tokens:**
|
|
|
|
```
|
|
--color-primary-500
|
|
--color-gray-900
|
|
--color-success-600
|
|
--color-error-500
|
|
```
|
|
|
|
**Typography Tokens:**
|
|
|
|
```
|
|
--text-xs
|
|
--text-base
|
|
--text-4xl
|
|
--font-normal
|
|
--font-bold
|
|
```
|
|
|
|
**Spacing Tokens:**
|
|
|
|
```
|
|
--spacing-1
|
|
--spacing-4
|
|
--spacing-8
|
|
```
|
|
|
|
**Component Tokens:**
|
|
|
|
```
|
|
--button-padding-x
|
|
--input-border-color
|
|
--card-shadow
|
|
```
|
|
|
|
**Rules:**
|
|
|
|
- Kebab-case
|
|
- Hierarchical (general → specific)
|
|
- Semantic names preferred
|
|
|
|
---
|
|
|
|
## File Names
|
|
|
|
**Component Files:**
|
|
|
|
```
|
|
button.md
|
|
navigation-button.md
|
|
input-field.md
|
|
```
|
|
|
|
**Rules:**
|
|
|
|
- Lowercase
|
|
- Hyphenated
|
|
- Match component name (simplified)
|
|
|
|
---
|
|
|
|
## Folder Names
|
|
|
|
```
|
|
components/
|
|
design-tokens/
|
|
operations/
|
|
assessment/
|
|
templates/
|
|
```
|
|
|
|
**Rules:**
|
|
|
|
- Lowercase
|
|
- Hyphenated
|
|
- Plural for collections
|
|
|
|
---
|
|
|
|
**Consistency in naming makes the design system easier to navigate and maintain.**
|