⚠️ WORK IN PROGRESS

---

Background/Goals

• This task focuses on auditing and updating color usage across iOS and Android apps to align with the Codex design system. The primary goal is to adopt Codex tokens where applicable.
• The sepia colors are unique to the apps, so the goal is to identify if these should also be adopted.
• Define diff colors for iOS and Android
• Nice to have: Define consistent syntax highlighting between iOS and Android.

User stories

• As a designer, I want the colors across iOS and Android apps to align with Codex to maintain consistency and improve design coherence.
• As a developer, I want unified color names and tokens to reduce confusion and facilitate code maintenance.
• As a user, I want an accessible and visually appealing app experience.

Tasks

Audit and alignment

• Audit the iOS and Android colors against the Codex (@scblr)
• Align color names and tokens on iOS and Android with Codex (@scblr)
• List colors with overlapping hex codes between iOS, Android, and Codex (@scblr)
• List colors unique to each platform that do not overlap with Codex (@scblr)
• Suggest updates to colors unique to each platform to match Codex (@scblr)
• List the sepia app colors in the task (@scblr)
• Should sepia colors align with Codex? (discuss!)
• Thoughts on the diff color suggestions? (discuss!)
• Update color definitions for (Android)
• Update color definitions for iOS

Implementation

• Update iOS color tokens to match Codex naming conventions.
• Update Android color tokens to match Codex naming conventions.
• Resolve overlaps by renaming or replacing existing colors with Codex equivalents.
• Update syntax highlighting to align with Codex and maintain platform consistency.

Timeline

• January 27, 2025: Share project brief with teams.
• February 24, 2025: Complete color audits for iOS and Android.
• March 10, 2025: Update color tokens and resolve overlaps.
• March 24, 2025: Finalize implementation and documentation.

Audit

iOS colors (Figma) with overlap in Codex

The following iOS colors overlap with Codex:

iOS colors without overlap in Codex

These colors are unique to iOS and do not overlap with Codex:

Android colors (Figma) with overlap in Codex

The following Android colors overlap with Codex:

Android colors without overlap in Codex

These colors are unique to Android and do not overlap with Codex:

App sepia colors

Diff color suggestions

Use yellow and blue for removals and additions (example from Desktop Wikipedia). Desktop uses:

• #A3D3FF (blue) for additions
• #FFE49C (yellow) for removals

Codex suggestions for apps:

References

• Codex style guide - colors
• iOS colors on Figma
• Android colors on Figma