Design Systems Theming

Standard Operating Procedure: Design System Implementation

Follow this four-stage mechanical process to standardize and export visual styling.

Stage I: Foundational Setup

• Asset Sourcing: Review the original corporate identity documentation to isolate and pull all raw aesthetic properties—specifically hues, typographic choices, and gap increments.
• Proportional Scaling: Implement a strictly calculated mathematical increment system for all dimensional layouts. Every measurement must align with a consistent multiplier (for instance, locking all measurements to a base grid of four or eight).

Stage II: Variable Architecture

• Tiered Categorization: Construct a three-level naming system for your visual assets:

1. Base Variables: Declare the raw visual properties (the exact shade or size).
2. Functional Variables: Connect the base properties to their intended purpose or meaning (e.g., primary action, danger alert).
3. Element Variables: (If applicable) Route the functional properties down to specific UI modules.

Stage III: Output Generation

• Universal Export: Compile the completed variable architecture into a technology-neutral syntax. The finalized data must be structured in a universal format (such as native stylesheet properties or structured data objects) so it can be seamlessly consumed by any end-product, whether that is a web page, a presentation deck, or written documentation.

Stage IV: Validation & Compliance

• Inclusivity Standards: Verify that all visual combinations satisfy recognized double-A or triple-A web accessibility benchmarks. You must specifically guarantee sufficient luminosity differences between text and its container, alongside utilizing fluid, adaptable font dimensions.
• Strict Reference Enforcement: Scrutinize the finished product to confirm the absolute elimination of raw alphanumeric color codes or arbitrary, unlinked layout digits. Every visual property applied in the final product must strictly reference an established name from the tiered categorization system.

Grounding (do this at runtime)

Do NOT answer precise facts (codes, identifiers, sections, current values) from memory — use the document/data the user provides, and base the answer only on what it returns.