CTJ: Design system

[fenglugithub]

Dependency

Cannot completely close this issue out until we have some user testing with the CTJ MVP prototype. Once the team has analyzed findings and recommendations, the team should update the Design system accordingly.

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

• [x] Organize Core Components
• [x] Incorporate Pending Components
• [x] 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.)

[rishi222k]

Design System Updates (Jan 9, 2025)

Design system file

Updated pending components

• Migrated pending components from previous design system
• Created component sets for Radio icon button and Text area field
• Cleaned up previous design system
• Resolved outdated comments

[rishi222k]

Design System Updates (Jan 11, 2025)

Design system file

Reference and usage guidelines

• Added usage guidelines for all pending components
• Updated guides for core components and foundation section

[rishi222k]

List of components that need to be updated or added to Design system:

• FAQ Accordion
• Rating scale (Skill matrix)
  • Rating number button
• Bottom Nav (MVP flow)
• Availability calendar

[rishi222k]

Following discussions with Lu, Terrence, and the team, adding a note on potential design system updates to discuss:

• Convert pixel units to rem.
• Mark finalized styles and components for development as they become ready.
• Evaluate shadcn/ui for specific components (e.g. calendar) and next steps for alignment.