Smartex.ai — Amethyst Design System
Category: Custom Surface: web, tablet Package:
@smartex/amethyst-ds-tokensv0.1.0 Source: Amethyst Foundations (Figma) + Amethyst UI Kit (Legacy) + Storybook Last updated: May 2026
Source Evidence
Source Evidence Inventory
This design system is built from concrete source evidence in the package:
| Evidence File | Type | Mapped Sections |
|---|---|---|
mpicoyn5-Hex.tokens.json ⭐ |
Figma DTCG primitive color export — 10 scales (neutral 13-steps, primary/info/success/warning/critical/magic/accent-1/2/3 each 11-steps). Canonical source of truth for all hex values. | §2 Color |
mpicpme7-Light-Mode.tokens.json ⭐ |
Figma DTCG semantic light-mode export — 200+ role-based tokens with full aliasData chains back to primitives. Categories: bg, bg-surface, border, bg-fill, text, input, icon, nav, scrollbar-thumb, skeleton. | §2 Color |
mpicpaku-Desktop.tokens.json ⭐ |
Figma DTCG desktop token export — spacing scale (xs–Huge) + corner-radius scale (xs–pill). | §4 Spacing |
context/source-context.md |
Product description, company history, source links | §1 Theme, §8 Voice |
source_examples/design-context-gap-report.md |
Component matrix (71 types), Code Connect strategy, gap analysis, Figma library audit (5 libraries × 254 pages) | §1 Theme, §6 Components, §8 Voice |
source_examples/library-inventory.json |
Figma paint styles (98) + text styles (14) from Amethyst Foundations | §2 Color, §3 Typography |
source_examples/amethyst-primitives.css |
CSS encoding of primitive color scales (derived from same Figma source; cross-reference with ⭐ JSON for canonical values) | §2 Color |
source_examples/amethyst-semantic.css |
Semantic color aliases, 13 gradient tokens (brand/warm/cool/gray), dark theme overrides | §2 Color |
source_examples/sds-color-primitive.css |
Pencil-layer primitive palette — parallel primitive definitions for cross-tool consistency | §2 Color |
source_examples/sds-color-light.css |
Full Pencil semantic light theme — surface, text, fill, border, icon, input token sets | §2 Color |
source_examples/sds-color-figma-light.css |
Figma Amethyst Material 3 semantic tokens — primary/secondary/success/warning/critical containers | §2 Color, §6 Components |
source_examples/sds-typography-amethyst.css |
Amethyst type scale in px: Display (57/45/34), Headline (36/32/28/24), Title (26/22/18/16), Label (26–12), Body (18–12) | §3 Typography |
source_examples/typography-tokens.css |
Amethyst text style utility classes (.amethyst-text-*) mirroring Figma text styles |
§3 Typography |
source_examples/layout-tokens.css |
Amethyst spacing scale (0–64px), radius scale (0–9999px), shadow levels (sm/md/lg/focus), z-index scale (base–toast) | §4 Spacing, §5 Layout |
source_examples/sds-layout.css |
Pencil shorthand spacing tokens (--spacing-*) and radius tokens (--radius-*) |
§4 Spacing |
source_examples/motion-tokens.css |
Duration tokens (120/200/320ms) + easing tokens (standard/emphasized) | §7 Motion |
context/local-code/smartex-ds/ |
23 intake snapshot files — full token cascade, Figma export metadata, package.json, library audit docs | All sections |
⭐ = Figma DTCG canonical source. All color hex values in DESIGN.md §2 and colors_and_type.css are drawn from these three JSON files. The CSS evidence files provide cross-reference and additional context (gradients, text classes, layout tokens) not present in the Figma exports.
Source Evidence by Section
| Section | Primary Evidence Files |
|---|---|
| §1 Product Context & Visual Theme | context/source-context.md (product description, company history), source_examples/design-context-gap-report.md (product scope, Figma library overview), source_examples/library-inventory.json (paint/text style inventory) |
| §2 Color | mpicoyn5-Hex.tokens.json ⭐ (canonical hex values for all 10 primitive scales), mpicpme7-Light-Mode.tokens.json ⭐ (200+ semantic tokens with aliasData), source_examples/amethyst-primitives.css (derived CSS — cross-reference), source_examples/amethyst-semantic.css (semantic aliases + 13 gradients + dark variants), source_examples/sds-color-primitive.css (Pencil primitives), source_examples/sds-color-light.css (full semantic light theme), source_examples/sds-color-figma-light.css (Material 3 containers), context/local-code/.../primitives.css, context/local-code/.../semantic.css, context/local-code/.../theme-dark.css |
| §3 Typography | source_examples/sds-typography-amethyst.css (type scale in px), source_examples/typography-tokens.css (Amethyst text style classes), source_examples/library-inventory.json (14 Figma text styles), context/local-code/.../typography.css, context/local-code/.../sds-typography.css |
| §4 Spacing | mpicpaku-Desktop.tokens.json ⭐ (canonical spacing + radius), source_examples/layout-tokens.css (spacing/radius/shadow/z-index), source_examples/sds-layout.css (shorthand tokens), context/local-code/.../layout.css, context/local-code/.../sds-layout.css |
| §5 Layout & Composition | source_examples/layout-tokens.css (spacing/radius/shadow/z-index), source_examples/sds-layout.css (shorthand tokens), source_examples/design-context-gap-report.md (grid system, navigation patterns, responsive breakpoints) |
| §6 Components | source_examples/design-context-gap-report.md (71-component matrix, Code Connect status, gap analysis), source_examples/library-inventory.json (Figma styles per component), context/local-code/.../figma-audit-files.json (5 libraries × 254 pages), context/local-code/.../figma-audit-tracker.json, preview/components-buttons.html (component CSS class reference — buttons, inputs, badges), source_examples/components/layout.css (spacing, radius, elevation, z-index tokens for components), source_examples/components/semantic.css (semantic color tokens powering component states) |
| §7 Motion & Interaction | source_examples/motion-tokens.css (duration + easing tokens), context/local-code/.../motion.css |
| §8 Voice & Brand | context/source-context.md (product descriptions, company history, key phrases), source_examples/design-context-gap-report.md (Code Connect strategy, naming conventions) |
| §9 Anti-patterns | Derived from source_examples/amethyst-primitives.css (token architecture), source_examples/amethyst-semantic.css (semantic layer rules), source_examples/design-context-gap-report.md (legacy-to-Amethyst migration rules), component inventory analysis |
Smartex.ai is an award-winning deep-tech startup headquartered in Portugal that uses Artificial Intelligence and Computer Vision to eliminate textile waste and optimize manufacturing. Founded in 2018, the company created the world's first AI-driven hardware-software system that detects fabric defects in real-time on circular knitting machines.
The Amethyst Design System powers the Smartex FACT web/mobile dashboard, Smartex LOOP traceability platform, and Smartex CORE machine monitoring interfaces. It spans 5 Figma libraries, 254 pages, and 71 audited component types.
Key products:
- Smartex CORE — Real-time fabric defect detection via industrial cameras + multispectral lighting + ML. Automatically stops machines to prevent waste.
- Smartex FACT — Web + tablet dashboard for factory management: monitor operations, analyze production, manage articles.
- Smartex LOOP — Digital traceability platform with durable tagging (digital product passport), defect mapping, grading, and supply chain history.
1. Product Context & Visual Theme
Source evidence:
source_examples/design-context-gap-report.md(product scope, Figma libraries),source_examples/library-inventory.json(Figma paint/text styles),context/source-context.md(company/product description)
Mood: Deep-tech industrial precision with human warmth. The system feels engineered but never cold — violet/purple primaries signal AI innovation, neutral gray surfaces provide factory-floor clarity, and orange/rose accents add operational urgency. The dark Figma canvas (#222223) anchors the industrial identity.
Product context: Factory dashboards, machine monitoring, defect inspection UIs, traceability timelines, and operator-facing tablet interfaces. Every surface must prioritize information density without sacrificing scannability. The tablet (APP) component library is equally important as the web library — Smartex operators use tablets on the factory floor.
Core principles:
- Data-first: tables, charts, and status indicators dominate; decoration is minimal
- Operator-safe: high contrast, clear status colors, generous touch targets on tablet
- AI-visible: violet gradients signal ML-powered features; "magic" tokens for smart/automated actions
- Industrial but refined: dark canvas heritage, neutral precision, accent colors used sparingly
2. Color
Source evidence:
mpicoyn5-Hex.tokens.json⭐ (canonical hex values),mpicpme7-Light-Mode.tokens.json⭐ (semantic aliasData chains),source_examples/amethyst-primitives.css,source_examples/sds-color-primitive.css,source_examples/amethyst-semantic.css,source_examples/sds-color-light.css,context/local-code/smartex-ds/files/tokens/css/primitives.css
Primitive Palette (Amethyst Foundations — Figma Canonical)
The design system uses a two-layer color architecture: primitives (raw color scales) → semantic tokens (role-based aliases). Primitives come from the Amethyst Foundations Figma file and are canonically encoded in mpicoyn5-Hex.tokens.json (DTCG format with Figma variable IDs). The CSS files provide derived encodings for cross-reference.
Important: The Amethyst system has two distinct violet/purple scales — primary (softer, product actions) and magic (intense, AI/ML features). Earlier documentation incorrectly conflated these. The Figma DTCG exports are authoritative.
Primary — Soft Violet (product actions, buttons, links)
| Token | Hex | Swatch |
|---|---|---|
--primitive-primary-25 |
#FBF9FF |
██ |
--primitive-primary-50 |
#F7F2FF |
██ |
--primitive-primary-100 |
#F0E5FF |
██ |
--primitive-primary-200 |
#E2CCFF |
██ |
--primitive-primary-300 |
#CAABFC |
██ |
--primitive-primary-400 |
#A37CF7 |
██ |
--primitive-primary-500 |
#885FEC |
██ |
--primitive-primary-600 |
#683FD3 |
██ |
--primitive-primary-700 |
#522CBD |
██ |
--primitive-primary-800 |
#3F278F |
██ |
--primitive-primary-900 |
#31226B |
██ |
Magic — Intense Violet (AI/ML features, "smart" surfaces)
| Token | Hex | Swatch |
|---|---|---|
--primitive-magic-25 |
#F6F2FF |
██ |
--primitive-magic-50 |
#EDE4FF |
██ |
--primitive-magic-100 |
#DFCFFF |
██ |
--primitive-magic-200 |
#BF9EFF |
██ |
--primitive-magic-300 |
#8E56FF |
██ |
--primitive-magic-400 |
#6E25FF |
██ |
--primitive-magic-500 |
#5E0DFF |
██ |
--primitive-magic-600 |
#5100F1 |
██ |
--primitive-magic-700 |
#3F00BC |
██ |
--primitive-magic-800 |
#24006B |
██ |
--primitive-magic-900 |
#120036 |
██ |
Neutral — Gray (13 steps incl. black & white)
| Token | Hex |
|---|---|
--primitive-neutral-black |
#000000 |
--primitive-neutral-25 |
#FCFCFC |
--primitive-neutral-50 |
#FAFAFA |
--primitive-neutral-100 |
#F4F4F5 |
--primitive-neutral-200 |
#E4E4E7 |
--primitive-neutral-300 |
#D1D1D6 |
--primitive-neutral-400 |
#A0A0AB |
--primitive-neutral-500 |
#70707B |
--primitive-neutral-600 |
#51525C |
--primitive-neutral-700 |
#3F3F46 |
--primitive-neutral-800 |
#26272B |
--primitive-neutral-900 |
#18181B |
--primitive-neutral-white |
#FFFFFF |
Semantic Roles — Info / Success / Warning / Critical (11-step scales each)
| Role | 500 | 600 | 700 | 800 |
|---|---|---|---|---|
| Info (Blue) | #2970FF |
#155EEF |
#004EEB |
#0040C1 |
| Success (Green) | #2AB775 |
#039855 |
#027A48 |
#05603A |
| Warning (Amber) | #F79009 |
#DC6803 |
#B54708 |
#93370D |
| Critical (Red) | #F04438 |
#D92D20 |
#B42318 |
#912018 |
Accent Ramps (11-step scales each)
| Accent | Color | 500 | 600 | 700 |
|---|---|---|---|---|
| Accent-1 | Teal | #15B79E |
#0E9384 |
#107569 |
| Accent-2 | Cyan | #06AED4 |
#088AB2 |
#0E7090 |
| Accent-3 | Orange | #EF6820 |
#E04F16 |
#B93815 |
Semantic Layer (Light Theme)
| Category | Token | Maps To |
|---|---|---|
| Background | --bg-default |
--primitive-neutral-50 |
| Surface | --surface-neutral |
--primitive-neutral-white |
| Fill Primary | --fill-primary |
--primitive-primary-600 |
| Text Primary | --text-neutral |
--primitive-neutral-900 |
| Text Secondary | --text-neutral-variant |
--primitive-neutral-600 |
| Border | --border-neutral |
--primitive-neutral-200 |
| Border Focus | --border-neutral-focus |
--primitive-magic-300 |
Gradients (Amethyst UI Kit)
| Gradient Name | Stops |
|---|---|
--amethyst-gradient-brand |
primary-800 → primary-500 → indigo-500 (135deg) |
--amethyst-gradient-primary-600-500-90deg |
primary-600 → primary-500 (90deg) |
--amethyst-gradient-gray-900-600-45deg |
neutral-900 → neutral-600 (45deg) |
--amethyst-gradient-warm |
orange-500 → secondary-500 (135deg) |
--amethyst-gradient-cool |
cyan-500 → blue-500 (135deg) |
Dark Theme
Apply .amethyst-theme-dark on <html> or <body>. Inverts surfaces, softens text, lightens status colors, and deepens shadows for the dark factory-floor canvas (--amethyst-color-bg-canvas: #222223).
3. Typography
Source evidence:
source_examples/sds-typography-amethyst.css,source_examples/typography-tokens.css,context/local-code/smartex-ds/files/tokens/css/typography.css
Font Families
| Role | Stack |
|---|---|
| Sans (primary) | Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| Mono (code/data) | ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |
Type Scale (px)
| Scale | Size / Line Height | Weight |
|---|---|---|
| Display LG | 57/64 | Semibold (600) |
| Display MD | 45/52 | Semibold (600) |
| Display SM | 34/44 | Semibold (600) |
| Headline XL | 36/46 | Semibold (600) |
| Headline LG | 32/40 | Semibold (600) |
| Headline MD | 28/36 | Semibold (600) |
| Headline SM | 24/32 | Semibold (600) |
| Title XL | 26/34 | Semibold (600) |
| Title LG | 22/28 | Semibold (600) |
| Title MD | 18/24 | Medium (500) |
| Title SM | 16/20 | Medium (500) |
| Label 2XL | 26/32 | Medium (500) |
| Label XL | 22/26 | Medium (500) |
| Label LG | 16/20 | Medium (500) |
| Label MD | 14/20 | Medium (500) |
| Label SM | 12/16 | Medium (500) |
| Body XL | 18/28 | Regular (400) |
| Body LG | 16/24 | Regular (400) |
| Body MD | 14/20 | Regular (400) |
| Body SM | 12/16 | Regular (400) |
Text Style Classes (Amethyst)
Figma-mirrored utility classes: .amethyst-text-xs-bold, .amethyst-text-sm-medium, .amethyst-text-md-regular, .amethyst-text-lg-bold, .amethyst-text-xl-bold, etc. Also .amethyst-text-body and .amethyst-text-heading for quick application.
Weights
| Weight | Value |
|---|---|
| Regular | 400 |
| Medium | 500 |
| Semibold | 600 |
| Bold | 700 |
Typography Rules
- Headings use tight letter-spacing:
-0.02em - Mono numerics with
font-variant-numeric: tabular-numsfor data tables - Body text never bold — use Medium (500) for emphasis
- Display sizes reserved for hero/landing; dashboard caps at Headline XL
4. Spacing
Source evidence:
mpicpaku-Desktop.tokens.json⭐ (canonical Figma DTCG spacing + radius),source_examples/layout-tokens.css,source_examples/sds-layout.css,context/local-code/smartex-ds/files/tokens/css/layout.css
Spacing Scale
| Token | Value | Use |
|---|---|---|
--amethyst-space-0 |
0 | No gap |
--amethyst-space-1 |
4px | Icon padding, tight inline |
--amethyst-space-2 |
8px | Component inner gap |
--amethyst-space-3 |
12px | Card padding (compact) |
--amethyst-space-4 |
16px | Standard card/section padding |
--amethyst-space-5 |
20px | — |
--amethyst-space-6 |
24px | Section gap |
--amethyst-space-8 |
32px | Layout section spacing |
--amethyst-space-10 |
40px | Page section divider |
--amethyst-space-12 |
48px | Major layout breaks |
--amethyst-space-16 |
64px | Hero/marketing sections |
Also available as shorthand: --spacing-xs (4px), --spacing-sm (8px), --spacing-md (12px), --spacing-lg (16px), --spacing-xl (24px), --spacing-2xl (32px), --spacing-3xl (40px), --spacing-4xl (56px).
Radius Scale
| Token | Value |
|---|---|
--amethyst-radius-none |
0 |
--amethyst-radius-sm |
4px |
--amethyst-radius-md |
6px |
--amethyst-radius-lg |
8px |
--amethyst-radius-xl |
12px |
--amethyst-radius-2xl |
16px |
--amethyst-radius-full |
9999px |
Shorthand: --radius-xs (4px), --radius-sm (6px), --radius-md (8px), --radius-lg (12px), --radius-pill (200px).
Shadows & Elevations
Source evidence: Figma Amethyst Tokens (
ciiT1fw1Y1Lhb8onqCaeP4) — EFFECT styles (Elevation 1-5, Focus Ring, Floating, Bg Blur)
| Level | CSS Value | Figma Source |
|---|---|---|
--amethyst-elevation-1 |
-1px 1px 2px rgb(0 0 0 / 0.05), 1px 0px 2px rgb(0 0 0 / 0.10) |
Elevation/1 |
--amethyst-elevation-2 |
-1px 1px 4px rgb(0 0 0 / 0.15) |
Elevation/2 |
--amethyst-elevation-3 |
0px 1px 6px rgb(0 0 0 / 0.15) |
Elevation/3 |
--amethyst-elevation-4 |
1px 2px 6px rgb(0 0 0 / 0.15) |
Elevation/4 |
--amethyst-elevation-5 |
3px 3px 10px rgb(0 0 0 / 0.15) |
Elevation/5 |
--amethyst-shadow-focus |
0 0 0 2px var(--primitive-magic-300) |
Focus Ring (spread: 2px, magic-300 color) |
--amethyst-shadow-floating |
0px 0px 10px rgb(0 0 0 / 0.25) |
Floating |
--amethyst-bg-blur |
blur(50px) |
Bg Blur (radius: 50px) |
Legacy aliases: --amethyst-shadow-sm → --amethyst-elevation-1, --amethyst-shadow-md → --amethyst-elevation-3, --amethyst-shadow-lg → --amethyst-elevation-5.
Dark theme variants available under .amethyst-theme-dark.
Z-Index Scale
| Token | Value | Use |
|---|---|---|
--amethyst-z-base |
0 | Default content |
--amethyst-z-dropdown |
1000 | Dropdowns, popovers |
--amethyst-z-sticky |
1100 | Sticky headers, nav |
--amethyst-z-modal |
1300 | Modals, dialogs |
--amethyst-z-toast |
1400 | Toasts, notifications |
5. Layout & Composition
Source evidence:
source_examples/layout-tokens.css(spacing/radius/shadow/z-index),source_examples/sds-layout.css(shorthand tokens),source_examples/design-context-gap-report.md(component layout references)
Grid System
- Web dashboard: 12-column grid, 24px gutters, max-width 1440px with fluid side padding (24–64px)
- Tablet (APP): Full-width single-column with 16px side margins, bottom nav bar
- Machine monitoring: Data-dense 2-column layout — 70% main / 30% side panel
Page Structure
┌──────────────────────────────────────┐
│ Top Navigation / App Bar │
├─────────┬────────────────────────────┤
│ Side │ Content Area │
│ Nav │ │
│ (240px) │ ┌──────────┬──────────┐ │
│ │ │ Card │ Card │ │
│ │ └──────────┴──────────┘ │
│ │ ┌──────────────────────┐ │
│ │ │ Data Table / Chart │ │
│ │ └──────────────────────┘ │
├─────────┴────────────────────────────┤
│ Status Bar / Footer │
└──────────────────────────────────────┘
Information Density
- High-density (factory floor): compact spacing, table views, inline status pills
- Standard (management dashboard): card grid, summary stats, trend charts
- Low-density (marketing/landing): generous whitespace, hero sections, feature cards
Responsive Behavior
- ≥1440px: Full desktop with side nav
- 1024–1439px: Collapsed side nav (icon-only)
- 768–1023px: Tablet layout, bottom nav
- <768px: Single-column, hamburger menu
Navigation Patterns
- Web: Top nav + collapsible side navigation
- Tablet APP: Bottom tab bar + top app bar
- Both platforms: Breadcrumbs, tabs, command menu (⌘K)
6. Components
Source evidence: Figma Amethyst — APP+WEB — Components (
KSqggXFzkurlwgTPgvo282) — 2,387 components across 10 pages. 355 icons in Amethyst Icon — Illustration (PsuH4b7BuKqq0ArYeLCRvP). Component extraction date: May 2026.
Figma Library Structure
The Amethyst component library is organized into 10 pages. Each page groups related component sets with their variant properties.
| Page | Component Sets | Key Components |
|---|---|---|
| 🎺 COMMUNICATION | 35 | Alert (19+12 variants), Avatar Image/Icon/Initials (16-24 each), Badge/BasicBadge/LabelBadge/DoubleBadge/StatusBadge (10-21 each), Featured Icon (180+156), Timer Counter, Progress Bar, Spinner, Snackbar, Tooltip |
| 🕹️ ACTIONS | 20 | General Button (129 variants), Button Icon (123+77), Button (132), Floating Button (75+90), Floating Icon Button (60), Segmented Button (8+12), Link (42+56), Button Group, Icon Button Group, Hybrid Button Group |
| 🎛️ SELECTION | 38 | Autocomplete, Checkbox, Radio Button, Toggle, Chips Suggestion/Filter Toggle/Filter Dropdown, Option List, Action List Item/Destructive, Resource List, List Items, Date Picker (Single/Double/Range), Index Filters, Popover |
| ☑️ FORMS | 8 | Text Field (12+31 variants), Multiline Text Field, Number Field, Increment Controls |
| 📦 CONTAINERS | 23 | Card/Content Card/Media Card, Callout Card, Dialog, Modal (2-3 columns), Sheet, Floating Card, Headline Header, Card Subcomponents (Header, Footer) |
| ⛵️ NAVIGATION | 24 | Stepper (Vertical/Horizontal), Navigation Menu, Side Navigation, Page Header, Tabs (Default/Disclosure/Icon Only), Scrollbar, Top Navigation, Branding, Page Navigation, Footer |
| 📊 DATA | 10 | Table (with Column, Cell, Header, Results subcomponents), Counter (Card/List/Group), Counter Card Rail, Counter Horizontal |
| 🏭 DOMAIN | 34 | Smartex-specific: Defect Icons (86+25 variants), Trend/Stop/Status/Grade/Defect Badges, Roll Batch (28 variants), Camera Bar, Map Thumbnail, Image Thumbnail - Fabric (42 variants), Image Templates, Pin Input, Toolbar, Loop Label, Reference Sample Bar |
| 📋 Templates | 4 | Dialog Error Causes (7), Template/Dialog with Overlay, Dialog General Messages, Snackbar Templates (14) |
| 🧰 Utility | 2 | Content Placeholder, Skeleton Blocks, Keyboard Tablet |
Icon Library
355 icons in the Amethyst Icon — Illustration file (PsuH4b7BuKqq0ArYeLCRvP), plus Smartex Branding assets (66), Illustrations (9), and Sample Users & Companies.
Typography Styles (Figma)
40 text styles in the Tokens file. All use Inter at weights 400, 500, 600:
| Style | Size/Line | Weight |
|---|---|---|
| Display LG | 57/64 | Semibold (600) |
| Display MD | 45/52 | Semibold (600) |
| Display SM | 34/44 | Semibold (600) |
| Headline XL | 36/46 | Semibold (600) |
| Headline LG | 32/40 | Semibold (600) |
| Headline MD | 28/36 | Semibold (600) |
| Headline SM | 24/32 | Semibold (600) |
| Title XL | 26/34 | Semibold (600) |
| Title LG | 22/28 | Semibold (600) |
| Title MD | 18/24 | Medium (500) |
| Title SM | 16/20 | Medium (500) |
| Label 2XL | 26/32 | Medium (500) |
| Label XL | 22/26 | Medium (500) |
| Label LG | 16/20 | Medium (500) |
| Label MD | 14/20 | Medium (500) |
| Label SM | 12/16 | Medium (500) |
| Body XL | 18/28 | Regular (400) |
| Body LG | 16/24 | Regular (400) |
| Body MD | 14/20 | Regular (400) |
| Body SM | 12/16 | Regular (400) |
Each text style has Strong, Italic, Underline, and Strong+Italic/Underline variants.
Key Component Specifications
CSS class reference: All component sets from all 10 Figma pages are implemented. Communication/Actions/Selection in
source_examples/components/semantic.css; Forms insource_examples/components/forms.css; Containers insource_examples/components/containers.css; Navigation+Data insource_examples/components/navigation-data.css; Domain insource_examples/components/domain.css. Layout tokens insource_examples/components/layout.css. Preview cards:preview/components-communication.html,preview/components-actions.html,preview/components-selection.html,preview/components-forms.html,preview/components-containers.html,preview/components-navigation-data.html,preview/components-domain.html.
1. Buttons — 🕹️ ACTIONS Page (20 component sets)
General Button — 129 variants
| Property | Values | CSS |
|---|---|---|
| State | Resting, Hover, Active, Disabled, Focus | .amethyst-btn, :hover, :active, :disabled, :focus-visible |
| Variant | Default (filled), Tertiary (transparent), Plain (text-only), NoStroke (ghost) | .amethyst-btn--default, .amethyst-btn--tertiary, .amethyst-btn--plain, .amethyst-btn--nostroke |
| Tone | Default (neutral gray), Primary (violet), Critical (red), Magic (intense violet — AI/ML features) | .amethyst-btn--primary, .amethyst-btn--critical, .amethyst-btn--magic |
| Size | xs (28px h), sm (32px h), md (40px h, default), lg (48px h) | .amethyst-btn--xs, .amethyst-btn--sm, .amethyst-btn--md, .amethyst-btn--lg |
| Extras | Skeleton (loading placeholder), Icon (Lead/Right), Disclosure (chevron), Label | .amethyst-btn--skeleton, .amethyst-btn__icon, .amethyst-btn__disclosure |
Related button component sets: Button Icon (123+77 variants — icon-only buttons), Floating Button (75+90 variants — FAB), Floating Icon Button (60 variants), Segmented Button (8+12 variants — toggle group), Link (42+56 variants — inline text CTA), Button Group, Icon Button Group, Hybrid Button Group.
2. Inputs — ☑️ FORMS Page (8 component sets)
Text Field — 12+31 variants
| Property | Values | CSS |
|---|---|---|
| State | Resting, Hover, Active, Disabled, Focus, Filled, Critical | .amethyst-input, :hover, :focus, :disabled, .amethyst-input--filled, .amethyst-input--error |
| Size | md (40px h, default), sm (32px h) | .amethyst-input--md, .amethyst-input--sm |
| Icons | Leading icon, Action icon (clear/copy), Placeholder text | .amethyst-input__icon--lead, .amethyst-input__icon--action |
| Support text | Helper/error text below input, Character count | .amethyst-input__helper, .amethyst-input__helper--error, .amethyst-input__counter |
| Chip support | Tags/chips inside input field | .amethyst-input--with-chips |
Multiline Text Field — 9+13 variants
Same properties as Text Field plus: Resize control (none/vertical/auto), minimum 3 rows default, auto-expand or fixed height. CSS: .amethyst-input--multiline.
Number Field — 9+13 variants
Increment/Decrement stepper controls. Properties: State, Size, Min/Max validation, Step value. CSS: .amethyst-input--number with .amethyst-input__stepper child (up/down buttons).
Related form components: Autocomplete, Date Picker (Single/Double/Range) — in the 🎛️ SELECTION page.
3. Cards — 📦 CONTAINERS Page (23 component sets)
Content Card
| Property | Values | CSS |
|---|---|---|
| Padding | Compact (12px, --amethyst-space-3), Standard (16px, --amethyst-space-4) |
.amethyst-card--compact, .amethyst-card |
| Elevation | Flat (no shadow), Elevated (--amethyst-elevation-1 or --amethyst-elevation-2) |
.amethyst-card--flat, .amethyst-card--elevated |
| States | Resting, Hover (shadow elevates + subtle border color shift) | .amethyst-card, .amethyst-card:hover |
Media Card
Content Card + media/image area. Properties: Badge on Media (overlay badge on image), Hover state, Selected state (active/checked border + checkmark indicator). CSS: .amethyst-card--media, .amethyst-card--selected.
Card Header subcomponents:
| Subcomponent | Description | CSS |
|---|---|---|
| Featured Icon | Circular filled icon + brand color background | .amethyst-card__featured-icon |
| Badge | Status/category pill overlaying header or media | .amethyst-card__badge |
| Title | Primary heading text | .amethyst-card__title |
| Support Text | Secondary description line below title | .amethyst-card__support-text |
| Right Action | Button, Toggle, Radio Button, or Disclosure chevron | .amethyst-card__action |
Card Footer subcomponents:
| Variant | Description | CSS |
|---|---|---|
| Message | Text summary line (e.g., "3 machines active") | .amethyst-card__footer--message |
| Action | Primary button + secondary button pair | .amethyst-card__footer--action |
Related containers: Callout Card, Floating Card (--amethyst-elevation-5, --amethyst-shadow-floating), Headline Header.
4. Modals & Dialogs — 📦 CONTAINERS Page (23 component sets)
Dialog
| Property | Values | CSS |
|---|---|---|
| Breakpoint | Wide (max-width: 640px), Narrow (max-width: 400px) | .amethyst-dialog, .amethyst-dialog--wide, .amethyst-dialog--narrow |
| Content | Title, Description, Icon, Checkbox support | .amethyst-dialog__title, .amethyst-dialog__description |
| Actions | Primary + Secondary button pair | .amethyst-dialog__actions |
| Overlay | --amethyst-bg-blur backdrop + semi-transparent dark scrim |
.amethyst-overlay |
Modal
| Property | Values | CSS |
|---|---|---|
| Layout | 1 column, 2 columns, 3 columns | .amethyst-modal--1col, .amethyst-modal--2col, .amethyst-modal--3col |
| Header | Left Aligned, Centered, Top Actions | .amethyst-modal__header--left, .amethyst-modal__header--center, .amethyst-modal__header--top-actions |
| Content | Title, Description, Actions (buttons), Checkbox | .amethyst-modal__title, .amethyst-modal__actions |
Sheet (Slide-out Drawer)
| Property | Values | CSS |
|---|---|---|
| Breakpoint | Desktop (side panel, 380–480px width), Mobile (bottom sheet, full-width) | .amethyst-sheet--desktop, .amethyst-sheet--mobile |
| Slots | Header, Body, Footer actions | .amethyst-sheet__header, .amethyst-sheet__body, .amethyst-sheet__footer |
| Dismiss | Close button, Swipe gesture (mobile), Backdrop overlay | .amethyst-sheet__close |
Z-index: All overlay components use --amethyst-z-modal (1300).
5. Navigation — ⛵️ NAVIGATION Page (24 component sets)
Tabs
| Property | Values | CSS |
|---|---|---|
| Type | Default (text labels), Disclosure (dropdown trigger), Icon Only (compact spaces) | .amethyst-tabs, .amethyst-tabs--disclosure, .amethyst-tabs--icon-only |
| Active indicator | 2px bottom border in primary/magic tone, animated transition | .amethyst-tabs__item--active |
| Overflow | Scrollable horizontal on narrow viewports | .amethyst-tabs--scrollable |
Side Navigation
| Property | Values | CSS |
|---|---|---|
| Width | 240px expanded, 64px collapsed (icon-only) | .amethyst-nav-side, .amethyst-nav-side--collapsed |
| States | Active (highlighted item), Nested items (expandable sections), Section dividers | .amethyst-nav-side__item--active, .amethyst-nav-side__section |
Top Navigation
| Property | Values | CSS |
|---|---|---|
| Height | 56px (desktop), 48px (tablet) | .amethyst-nav-top |
| Slots | Brand logo, Nav links, Right actions (user avatar, notifications, settings) | .amethyst-nav-top__brand, .amethyst-nav-top__actions |
Stepper
| Property | Values | CSS |
|---|---|---|
| Orientation | Horizontal (wizard/progress bar), Vertical (timeline) | .amethyst-stepper--horizontal, .amethyst-stepper--vertical |
| States | Completed (checkmark + filled), Active (current, highlighted), Upcoming (grayed out), Error (red indicator) | .amethyst-stepper__step--completed, .amethyst-stepper__step--active, .amethyst-stepper__step--upcoming, .amethyst-stepper__step--error |
Breadcrumbs
| Property | Values | CSS |
|---|---|---|
| Separator | Chevron (default) or Slash | .amethyst-breadcrumbs |
| Truncation | Collapsed middle items with "…" indicator | .amethyst-breadcrumbs--truncated |
| Last item | Non-interactive, Medium (500) weight | .amethyst-breadcrumbs__item:last-child |
Related: Page Header, Navigation Menu, Scrollbar, Page Navigation, Footer.
6. Data — 📊 DATA Page (10 component sets)
Table
| Subcomponent | Properties | CSS |
|---|---|---|
| Column Header | Sortable (asc/desc indicator), Sticky positioning, Resizable | .amethyst-table__header, .amethyst-table__header--sortable |
| Cell | Text, Numeric (monospace, right-aligned), Status (with badge), Custom content | .amethyst-table__cell, .amethyst-table__cell--numeric, .amethyst-table__cell--status |
| Row | Hover highlight, Selected state (checkbox), Striped (alternating) | .amethyst-table__row, .amethyst-table__row--selected |
| Results | Pagination summary ("1–20 of 156 results"), Page controls | .amethyst-table__results |
Numeric alignment: All numeric cells use font-variant-numeric: tabular-nums with monospace font for consistent column scanning.
Counter
| Layout | Description | CSS |
|---|---|---|
| Card Counter | Standalone metric card (value + label + trend indicator) | .amethyst-counter--card |
| List Counter | Inline row with metric | .amethyst-counter--list |
| Group Counter | Horizontally grouped metrics (side by side) | .amethyst-counter--group |
| Counter Card Rail | Side-by-side metric comparison bar | .amethyst-counter-rail |
| Counter Horizontal | Landscape-oriented counter layout | .amethyst-counter--horizontal |
Related: Charts (deferred), Pagination.
7. Communication — 🎺 COMMUNICATION Page (35 component sets)
Alert — 19+12 variants (Banner + Inline)
| Property | Values | CSS |
|---|---|---|
| Tone | Info (blue), Success (green), Warning (amber), Critical (red) | .amethyst-alert--info, .amethyst-alert--success, .amethyst-alert--warning, .amethyst-alert--critical |
| Type | Banner (full-width, dismissible), Inline (compact, contextual) | .amethyst-alert--banner, .amethyst-alert--inline |
| Content | Title, Description, Dismiss icon (×), Action button | .amethyst-alert__title, .amethyst-alert__description, .amethyst-alert__action |
Avatar — 16–24 variants per type
| Property | Values | CSS |
|---|---|---|
| Type | Image (photo), Icon (placeholder glyph), Initials (text fallback, 2 chars max) | .amethyst-avatar--image, .amethyst-avatar--icon, .amethyst-avatar--initials |
| Size | xs (24px), sm (32px), md (40px), lg (48px), xl (64px), 2xl (80px) | .amethyst-avatar--xs, .amethyst-avatar--sm, .amethyst-avatar--md, .amethyst-avatar--lg, .amethyst-avatar--xl, .amethyst-avatar--2xl |
Badge — 10–21 variants per type, 9 tones
| Property | Values | CSS |
|---|---|---|
| Type | Basic (small pill), Label (text + color background), Double (two-part badge), Status (dot indicator + text) | .amethyst-badge, .amethyst-badge--label, .amethyst-badge--double, .amethyst-badge--status |
| Tone | Default (neutral), Primary, Magic, Info, Success, Warning, Critical, Accent-1 (teal), Accent-2 (cyan), Accent-3 (orange) | .amethyst-badge--primary, .amethyst-badge--success, .amethyst-badge--critical, .amethyst-badge--magic, etc. |
Featured Icon — 180+156 variants
Circular filled container (rounded pill) with centered icon. Sizes: sm (32px), md (40px), lg (48px). CSS: .amethyst-featured-icon, .amethyst-featured-icon--sm, .amethyst-featured-icon--md, .amethyst-featured-icon--lg.
Progress Bar
| Property | Values | CSS |
|---|---|---|
| Height | 4px (standard), 8px (large) | .amethyst-progress-bar, .amethyst-progress-bar--lg |
| Mode | Determinate (percentage fill using --fill-primary), Indeterminate (animated shimmer/stripe) |
.amethyst-progress-bar--indeterminate |
Spinner
| Property | Values | CSS |
|---|---|---|
| Size | sm (24px, 2.5px stroke), md (32px, 3px stroke), lg (48px, 3px stroke) | .amethyst-spinner--sm, .amethyst-spinner--md, .amethyst-spinner--lg |
| Note | Coded in Storybook — no Figma symbol yet (backfill needed) |
Snackbar (Toast)
| Property | Values | CSS |
|---|---|---|
| Position | Bottom-center (desktop), Bottom-stretched (mobile) | .amethyst-snackbar |
| Content | Message text, Action button, Dismiss icon (×), Auto-dismiss (5s default) | .amethyst-snackbar__message, .amethyst-snackbar__action |
| Templates | 14 variants in Templates page |
Tooltip
| Property | Values | CSS |
|---|---|---|
| Position | Top, Bottom, Left, Right (with arrow indicator pointing to target) | .amethyst-tooltip--top, .amethyst-tooltip--bottom, .amethyst-tooltip--left, .amethyst-tooltip--right |
| Behavior | 300ms hover delay before showing; max-width: 280px | .amethyst-tooltip |
Related: Timer Counter, Expand Alert Group (Storybook-coded, no Figma symbol).
8. Domain — 🏭 DOMAIN Page (34 component sets, Smartex-Specific)
Defect Icons — 86+25 variants
| Property | Values | CSS |
|---|---|---|
| Defect Type | Hole, Slub, Contamination, Barre, Needle Line, Drop Stitch, Yarn Variation, and 20+ more | .amethyst-defect-icon |
| Tone | Severity-based coloring (critical = red, warning = amber, info = blue) | .amethyst-defect-icon--critical, .amethyst-defect-icon--warning |
| State | Ignored (strikethrough + grayed out), Active (full color), Sized (sm/md/lg) | .amethyst-defect-icon--ignored |
Purpose: Fabric defect classification markers on machine inspection screens (CORE product).
Badges (Domain-Specific)
| Type | Description | CSS |
|---|---|---|
| Trend Badge | Up (green ▲), Down (red ▼), Flat (gray —) | .amethyst-trend-badge--up, .amethyst-trend-badge--down, .amethyst-trend-badge--flat |
| Stop Badge | Machine stop reason indicator (Critical/Warning/Info tones) | .amethyst-stop-badge |
| Status Badge | Machine status: Running, Stopped, Maintenance, Idle | .amethyst-status-badge--running, .amethyst-status-badge--stopped |
| Grade Badge | Fabric grade: A (success), B (info), C (warning), Reject (critical) | .amethyst-grade-badge--a, .amethyst-grade-badge--b, .amethyst-grade-badge--c, .amethyst-grade-badge--reject |
| Defect Badge | Defect classification pill with count | .amethyst-defect-badge |
Roll Batch — 28 variants
Factory roll inspection batch interface. Properties: Roll ID (alphanumeric), Status (active/completed/flagged), Machine assignment, Defect count (numeric), Timestamp (relative or absolute). CSS: .amethyst-roll-batch.
Camera Bar — 3 grid configurations
| Grid | Use Case | CSS |
|---|---|---|
| 4×4 | Small machine, 16 inspection cameras | .amethyst-camera-bar--4x4 |
| 5×5 | Medium machine, 25 cameras | .amethyst-camera-bar--5x5 |
| 6×6 | Large machine, 36 cameras | .amethyst-camera-bar--6x6 |
Properties per camera cell: Active/Inactive state, Alert (defect detected), Offline (disconnected). CSS: .amethyst-camera-bar__cell--active, .amethyst-camera-bar__cell--alert, .amethyst-camera-bar__cell--offline.
Image Thumbnail — Fabric — 42 variants
| Property | Values | CSS |
|---|---|---|
| Position | Offset control for defect location within the frame | .amethyst-thumbnail--fabric |
| Size | Zoom level (1×, 2×, 4× magnification) | .amethyst-thumbnail--1x, .amethyst-thumbnail--2x, .amethyst-thumbnail--4x |
| Light | Illumination condition (bright/dim/UV) | .amethyst-thumbnail--bright, .amethyst-thumbnail--dim, .amethyst-thumbnail--uv |
| Defect | Overlay marking (circle, highlight, arrow) | .amethyst-thumbnail__defect-overlay |
Purpose: Fabric sample thumbnails for defect review and classification.
Pin Input
| State | Description | CSS |
|---|---|---|
| Default | Empty character boxes, 4–6 digits | .amethyst-pin-input |
| Filled | Digits entered, obscured (● dots) | .amethyst-pin-input--filled |
| Critical | Invalid entry, red border shake animation | .amethyst-pin-input--error |
Purpose: Operator authentication on the factory floor (tablet + web). Touch targets: minimum 44×44px per digit box on tablet.
Related domain components: Toolbar, Loop Label, Reference Sample Bar, Map Thumbnail, Image Templates.
Responsive Component Behavior
The Amethyst design system adapts components across three breakpoint ranges. All interactive elements maintain minimum 44×44px touch targets on tablet and mobile.
| Component Category | Desktop (≥1440px) | Tablet (768–1023px) | Mobile (<768px) |
|---|---|---|---|
| Buttons | Full size range; lg (48px) for primary CTAs, md (40px) default, sm (32px) inline | md (40px) preferred; lg for primary page actions; xs (28px) for table actions | sm (32px) default; md only for primary CTAs; full-width in forms |
| Inputs | md default (40px); labels above; full-width fields | md and sm sizes; fields stack vertically | Full-width sm inputs; labels above; number stepper buttons ≥44×44px |
| Cards | 3–4 per row (12-col grid); standard padding (--amethyst-space-4) |
2 per row max; compact padding (--amethyst-space-3); never >3 cards/row |
Single column; full-width; compact padding; media cards scale to viewport |
| Modals & Dialogs | Wide dialog (640px); 2–3 col modals; Sheets as side drawers (480px) | Narrow dialog (400px); 1-col modals; Sheets as bottom sheet | Full-screen or bottom sheet; dialogs at 100% width with 16px margins; never nest modals |
| Navigation | Full side nav (240px) + top nav; horizontal stepper; full-text tabs | Collapsed side nav (64px icon-only) or removed; bottom tab bar; horizontal stepper only | No side nav; hamburger menu; bottom tab bar (3–4 items); vertical stepper; breadcrumbs truncated to last item |
| Data (Tables) | Full table, all columns visible; 4-column counter grid | Columns collapse — hide lower priority; counters in 2 columns | Tables → card/list view or horizontal scroll; counters as list rows; pagination simplified |
| Data (Counters) | Card layout in 4-column grid | Stack in 2 columns | List rows, single column |
| Communication | Full-width alert banners; tooltip positions freely; snackbar bottom-center | Compact inline alerts; tooltips avoid edge overflow; snackbar bottom-stretched | Alerts stack vertically; tooltips positioned above targets; snackbar full-width bottom |
| Domain (Camera Bar) | Native grid density (4×4/5×5/6×6 at full cell size) | Scales to fit available width | Reduced cell size or horizontal scroll |
| Domain (Roll Batch) | Full detail cards with all fields | Simplified card with key fields | List rows; only Roll ID + Status shown |
General responsive rules:
- Side navigation is disabled below 1024px — use bottom tab bar or hamburger menu instead
- Tables below 768px either collapse to card/list views or enable horizontal scroll
- Modal/dialog overlays always cover the full viewport regardless of breakpoint
- Typography scales down one step on mobile (e.g., Title LG → Title MD for page headings)
- Spacing reduces by ~25% on mobile: section padding uses
--amethyst-space-4(16px) instead of--amethyst-space-6(24px) - Never nest modals or dialogs at any breakpoint
- Dark theme (
--amethyst-color-bg-canvas: #222223) is especially important for factory-floor UIs used in low light
7. Motion & Interaction
Source evidence:
source_examples/motion-tokens.css,context/local-code/smartex-ds/files/tokens/css/motion.css
Duration Tokens
| Token | Value | Use |
|---|---|---|
--amethyst-duration-fast |
120ms | Micro-interactions: hover, focus, checkbox toggle |
--amethyst-duration-base |
200ms | Standard transitions: opacity, color changes |
--amethyst-duration-slow |
320ms | Enter/exit: modals, drawers, dropdowns |
Easing
| Token | Value | Use |
|---|---|---|
--amethyst-ease-standard |
cubic-bezier(0.2, 0, 0, 1) |
Most transitions |
--amethyst-ease-emphasized |
cubic-bezier(0.2, 0, 0, 1) |
Entrance animations |
Interaction States
Hover (120ms):
- Buttons: background shifts one step darker
- Links: underline appears
- Cards: shadow elevates + subtle border color shift
- Table rows: background tint
- Icons: color shifts to
--icon-neutral-hover
Focus:
- 2px magic-300 ring (
--amethyst-shadow-focus) — spread shadow from Figma Focus Ring style - Visible on keyboard navigation only (
:focus-visible) - No outline on mouse click
Active/Pressed:
- Scale: 0.98× on buttons (120ms)
- Background: two steps darker
Loading:
- Skeleton screens with
--utility-skeleton-fillshimmer - Spinner: 24px (SM), 32px (MD), 48px (LG)
- Progress bar: 4px height,
--fill-primaryfill
Reduced Motion:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
8. Voice & Brand
Source evidence:
context/source-context.md(product descriptions, company history),source_examples/design-context-gap-report.md(Code Connect strategy, naming conventions)
Copy Style
- Tone: Professional, precise, and confident. Factory-floor directness with technical credibility.
- Capitalization: Sentence case for UI labels, buttons, and menu items. Title case for page headings.
- Terminology: Use "machine" not "device", "defect" not "error" (factory context), "roll" not "batch".
- Numbers: Use monospace for all numerics. Abbreviate large numbers: 1.2K, 3.4M, 5.6B.
Product Voice
- CORE: Machine-status language — "Running", "Stopped", "Defect Detected", "Roll #A1247"
- FACT: Management language — "Production Overview", "Efficiency Rate", "Active Machines"
- LOOP: Traceability language — "Supply Chain", "Digital Passport", "Origin Verified"
Key Phrases
- "Real-time defect detection" — not "instant monitoring"
- "Circular knitting machines" — not "textile equipment"
- "AI-driven" — not "AI-powered" (company preference)
- "Amethyst" — the internal design system name; use in documentation only
9. Anti-patterns
Source evidence: Derived from Amethyst Foundations token architecture (
source_examples/amethyst-primitives.css,source_examples/amethyst-semantic.css), component inventory (source_examples/design-context-gap-report.md), and the legacy-to-Amethyst migration rules documented in the Gap Report.
Color
- ❌ Do not use violet gradients as full-page backgrounds — the brand is precision, not a rave
- ❌ Do not tint the page bg with primary-25 or primary-50 — use neutral surfaces
- ❌ Do not combine more than one accent color per component
- ❌ Do not use warm beige/peach/pink page backgrounds — Smartex is industrial, not cozy
- ❌ Do not use legacy Amethyst primitives directly — always go through semantic tokens
Typography
- ❌ Do not use Inter at weights below 400 (no light/thin variants)
- ❌ Do not set body copy below 12px (Body SM)
- ❌ Do not center-align text blocks longer than 3 lines
- ❌ Do not use display sizes (34px+) in dashboard components
Layout
- ❌ Do not create full-width cards without internal padding
- ❌ Do not stack more than 3 cards in a single row on tablet
- ❌ Do not use side navigation on viewports below 1024px
Components
- ❌ Do not use filled buttons for secondary actions — use outlined
- ❌ Do not create custom status indicators — use the built-in Success/Warning/Critical palette
- ❌ Do not nest modals or dialogs
- ❌ Do not use emoji as icons — use the Amethyst Icon library
- ❌ Do not build data visualizations without tabular-nums on numerics
General
- ❌ Do not add decorative illustrations where a data table belongs
- ❌ Do not use generic AI slop: purple gradients everywhere, emoji feature icons, invented metrics
- ❌ Do not mix web and tablet component patterns on the same page
- ❌ Do not forget the dark theme — factory-floor UIs are often used in low light