CTJ: Design system

[fenglugithub]

Overview

As designers, we need a centralized and accessible design system file to serve as the definitive source for all design components, promoting consistency across projects. This issue will involve organizing core elements, incorporating any pending components, and establishing clear guidelines for usage and maintenance. By doing so, we ensure that all team members can easily follow established standards, leading to a more cohesive and efficient design process.

Action Items

• Organize Core Components
• Incorporate Pending Components
• Create Usage Guidelines
• Review for Consistency and Accessibility
• Share the Finalized File

Resources/Instructions

Resources

[nooriaali9]

Hi @fenglugithub please add a milestone to this issue, so I can move it in-progress/ backlog

[nooriaali9]

Moving it to in-progress @rishi222k

[rishi222k]

After discussions with Carmen and Lu, we’ve decided to pivot from our initial approach to migrating the design system file. Due to Figma's free plan limitations, we will now keep and maintain the design system within the existing CTJ Figma file instead of creating a separate file.

[rishi222k]

Design System Updates (December 14, 2024)

Design system file

Re-organizing Design System

• Re-structured design system into 4 sections:
  1. Foundations
  2. Assets
  3. Core Components
  4. Pending Components (in progress)
• Introduced new section within foundations for dev specifications
  • Added spacing units and breakpoint specifications

Brand Alignment

• Updated visual styling to align with CTJ brand style
• Added expanded variations to vector CTJ logos

Reference Guide

• Added reference guide for Typography, CoP Cards, Illustrations/photos. Includes:
  1. Usage guidelines
  2. Representation formats
  3. Design specifications (units, styles, etc.)