Consumer discovery
Image-first content, category visuals, product rails, occasions, gifting and brands. Real rhythm variation instead of endless identical cards.
Kidzy Brand Commerce System · DS-R2
Kidzy is playful, not chaotic.
Turquoise leads the system while the remaining logo colors act as controlled accents. Arabic is a first-class design source, and clarity takes priority over decorative typography or effects. Consumer discovery can be visually rich; Checkout stays calm; Admin stays practical and dense.
Readable bilingual UI
WCAG 2.2 AA intent
COLOR SYSTEM
Brand colors converted into semantic tokens
The main brand teal has strong visual presence, while the deeper primary tone is better for buttons and white text because of contrast. Orange, green and magenta are accents — not separate themes.
TYPOGRAPHY
A measured hierarchy without oversized headings
Baloo 2 is used as a display accent only. Inter is the primary typeface for UI, forms, Checkout, tables and long-form English content.
Display accent · 40pxWhere play begins
Section heading · 28pxShop by age or occasion
Body · 17px / generous line-heightCore copy is designed to remain comfortable on both phones and desktops without zooming or moving closer to the screen.
COMPONENT GRAMMAR
Core examples
Radii and surfaces can feel friendly, but pills are not the answer for every element and shadows stay controlled.
Available todayLimited capacity
Search toys, brands or gifts…
Product card exampleQAR 79
SURFACE-SPECIFIC RULES
One brand, three different density levels
Checkout
White/light surfaces, step context, selected states, delivery groups, totals and an obvious CTA. No promotional noise that distracts from payment.
Admin
Persistent navigation, stable tables, grouped forms, clear toolbars and restrained use of brand accents.
READABILITY LOCK
Rules that prevent the presentation problems of the first report version
The report itself now demonstrates the standard: readable type sizes, controlled content width, separate pages and a clear information hierarchy.
30
Mobile page H1
Large enough to establish hierarchy without filling half the screen.
16.5
Mobile body
Primary reading text never drops to an uncomfortable size.
1240
Max content width
Prevents extremely long line lengths on large displays.
44+
Touch target
Buttons and filters remain comfortable to tap.
RTL/LTR is not a last-minute flip
Navigation order, drawers, steppers, arrows, forms, tables and mixed-direction content must be intentionally designed and tested in both directions.
AR
Arabic first-class mode
Arabic is not an afterthought. The production design is authored and validated in RTL, not merely mirrored after the English version is finished.
EN
English parity
English uses a true LTR information flow and its own typography behavior while preserving the same feature coverage and design system.