tezvyn:

Delivering one color token to three platforms

AI-drafted, machine-checkedSource: interviewbeginner
WHAT IT TESTS

platform-specific token output.

OUTLINE

one JSON source, generated CSS variable for web, color resource XML for Android, and Swift/asset for iOS.

RED FLAG

pasting the same hex by hand into each platform.

WHAT THIS TESTS This checks whether you know the concrete output formats per platform and the principle of a single source of truth. It is the simplest version of the cross-platform token problem.

A GOOD ANSWER COVERS Start from one canonical definition: color.primary = #0A74FF in a JSON token file. From there, generate platform-appropriate formats. For web, a CSS custom property such as --color-primary: #0A74FF (or a JS export). For Android, a color resource in res/values/colors.xml, remembering Android uses ARGB ordering so an opaque color is written as #FF0A74FF. For iOS, either a SwiftUI Color or UIColor constant defined from RGB components, or an entry in an asset catalog so it adapts to light and dark appearance. A token build tool emits all of these from the one source so the value never diverges.

COMMON WRONG ANSWERS Manually typing the hex into each platform, which drifts as soon as one is edited. Forgetting Android's ARGB alpha-first ordering and shipping the wrong color. Assuming a raw web hex string drops straight into iOS, which needs RGB component initialization or an asset.

LIKELY FOLLOW-UPS How do you handle alpha and opacity across platforms? How do iOS asset catalogs help with dark mode? How do you keep the three outputs versioned together?

ONE CONCRETE EXAMPLE From color.primary = #0A74FF the pipeline emits, for web, --color-primary: #0A74FF; for Android, a colors.xml entry name=color_primary value #FF0A74FF; and for iOS, a Color initialized from red 10/255, green 116/255, blue 255/255, or an asset named ColorPrimary. All three trace to the same JSON line, so updating the brand color in one place reships everywhere.

Read the original → w3.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.