[2026] Develop and update Design System Microsite with Tokens to match Material for Mkdocs

[zvidmarb]

Dependencies

• TWE Design System: Create Generic Design Components and Mockups #397
• TWE Design System: Design Microsite #446
• Develop Design System Microsite based on Material for MKDocs #455

Overview

We need to develop a microsite to hold the Design System components.
This site should be based on Material for MKDocs and setup to run on the internship repo's Github Pages. Tokens should be implemented in place of raw values for design properties.

Action Items

• Create a consistent naming system for tokens that reduce redundancy, similarly to Material and other systems
• Develop Component microsite pages for the Issues below

Resources/Instructions

• Contributing to the Internship Design System
• Current Live Version
• Getting Started with Material for MkDocs
• Using snippets to include code
• Material for MkDocs Snippets

Styles for the epic (Style: Design Issue | Dev Issue)

• Typography: TWE Design System Components: Typography #406 TWE Design System: Web Typography Standards Research #528 | TWE Design System: Code Typography  #487 TWE: Dev: Design System: Create Typography #742
• Colors: TWE Design System Components: Colors #407 | TWE Design System: Code color component #488 TWE: Dev: Design System: Create Colors #746
• Elevations: TWE Design System Components: Create shadow styles according to M3 #541 | TWE: Dev: Design System: Create Elevation Shadows #829

Components for the epic (Component: Design Issue | Dev Issue)

• Accordion: TWE Design System Components: Accordion Menu #404 | TWE Design System: Code Accordion Component #484 TWE Design System Components: Update Accordion according to M3 #544 TWE Design System Components: Update Accordion according to M3 #544 TWE: Dev: Design System: Update Accordion to match Token standards and fix component behavior #821
• Buttons: TWE Design System Components: Buttons  #400 | TWE: Dev: Design System: Create Button #736 TWE: Dev: Design System: Create (redo) buttons #815
• Checkbox: TWE Design System Components: Check Boxes #411 | TWE Design System Components: Update Checkbox according to M3 #542 TWE: Code Checkbox #741 TWE: Dev: Design System: Create Checkbox with Material  #817
• Input Fields: TWE Design System Components: Input Fields #416 | TWE: Dev: Design System: Create Input Fields #751 TWE Design System Components: Update Input field according to M3 #540 TWE: Dev: Design System: Create (redo) Input Fields #818
• Grid System: TWE Design System Components: Grid System #415 | TWE: Dev: Design System: Create Grid System #743 TWE: Dev: Design System: Create Grid System #750
• Pagination: TWE Design System Components: Paginations #424 | TWE: Dev: Design System: Create Pagination #753 TWE: Dev: Design System: Create (redo) Pagination using Material #816
• Radio Button: TWE Design System Components: Radio Buttons #412 | TWE: Design System - Code Radio Buttons component #457 TWE Design System: Code Radio Button Component #471
• Text Area: TWE Design System Components: Text Area #417 | TWE: Dev: Design System: Update Text Area to match Material (token) Design standards #822
• Toggles: TWE Design System Components: Toggles #410 | TWE: Dev: Design System: Create Toggle Component #558
• Tags/Chips: TWE Design System Components: Tags #413 Create Input Chips in the style of Material Design  #622 | TWE: Dev: Design System: Create Tags #557
• Dropdown*: TWE Design System Components : Drop Down Menus #399 TWE Design System Components: Dropdown with checkbox #538 | TWE Design System: Code Drop Down component #486 TWE Design System Components: Update Dropdown according to M3 #543 TWE: Dev: Design System: Create Dropdowns according to Material #820
• Generic Homepage: TWE Design System Components: Generic Homepage #401 | Dev: Research and Plan Homepage content for the Design System Microsite #562
• Headers: TWE Design System Components: Headers #403 | TWE: Dev: Design System: Create Header Component #489
• Footers: TWE Design System Components: Footers #408 | TWE: Dev: Design System: Create Footer #747
• Layout: TWE Design System Components: Layout #414 | TWE: Dev: Design System: Create Layout #749
• Sliders: TWE Design System Components: Sliders #420 | TWE: Dev: Design System: Create Sliders #825
• Snackbar: TWE Design System Components: Feedback alert #510 TWE Design System Components: Snackbar #464 | TWE: Dev: Design System: Create Snackbar #827
• Badges: TWE Design System Components: Badges #693 | TWE: Dev: Design System: Create Badges #828
• Icon Buttons: TWE Design System Components: Icon Buttons #731 | TWE: Dev: Design System: Create Icon Buttons #752
• Tooltips: TWE Design System Components: Tooltips #425 (Incomplete?) | TWE: Dev: Design System: Create Tooltips #826
• Date Pickers: TWE Design System Components: Date Pickers #419 | Design Incomplete
• Icons: TWE Design System Components: Icons #426 | Design Incomplete
• Banner: TWE Design System Components: Banner #511 | Design Incomplete
• Progress Bars: TWE Design System Components: Progress Bars (Progress Steppers) #421 | Design Incomplete
• Breadcrumbs: TWE Design System Components: Breadcrumbs #422 | Design Incomplete
• Cards*: TWE Design System Components: Cards #402 TWE Design System Components: Generic Card #739 | Design Incomplete
• Dialogs (Modals / Pop-ups): TWE Design System Components: Dialogs (Modals/Pop-ups) #409 | Design Incomplete