radex.ma Design

One design system for the radex.ma app and every mini app. It follows the WeChat mini program design guidelines (WeUI conventions), with radex.ma green, Darija first and right-to-left first. Everything here is in the SDK: include /sdk/radex-ui.css and /sdk/radex.js.

Principles

Friendly and politeEvery page has one clear point. Nothing unrelated to the person's goal interrupts a flow: no pop-ups, no ads inside a task.

Clear and explicitPeople always know where they are and how to go back: a back button on every secondary page, the radex.ma capsule fixed top-right, 2–5 tabs (4 or fewer is best), one tab bar per page.

Fast feedbackLoad in place, simply, with one animation per page. Long waits show progress and can be cancelled. Results: an icon toast for light success (1.5 s), a text toast for small notices, a dialog when it must be read, a result page at the end of a flow.

Errors with a way outSay why at the top of the form and mark the wrong fields. Every error state offers what to do next. No dead ends.

ConvenientAsk people to choose, not type: location, history, presets. Touch targets 7–9 mm (48px), never crowded.

Consistent and stableSame controls, same behavior on every page and in every mini app. Use the kit before inventing a control.

Tokens

Single source: brand/design/tokens.json, generated into the SDK CSS and the Android theme. Light and dark switch automatically.

Light

--brand#0B7A4B

--brand-softrgba(11,122,75,.12)

--on-brand#FFFFFF

--bg#EDEDED

--surface#FFFFFF

--surface-2#F7F7F7

--surface-3#EFEFEF

--inkrgba(0,0,0,.9)

--ink-2rgba(0,0,0,.55)

--ink-3rgba(0,0,0,.3)

--linergba(0,0,0,.1)

--line-2rgba(0,0,0,.18)

--link#576B95

--danger#FA5151

--warn#FA9D3B

--warn-bg#FFF4E5

--warn-ink#8A4B00

--star#F2A900

--maskrgba(0,0,0,.6)

Dark

--brand#3FB67C

--brand-softrgba(63,182,124,.16)

--on-brand#FFFFFF

--bg#111111

--surface#191919

--surface-2#202020

--surface-3#2C2C2C

--inkrgba(255,255,255,.85)

--ink-2rgba(255,255,255,.55)

--ink-3rgba(255,255,255,.3)

--linergba(255,255,255,.08)

--line-2rgba(255,255,255,.16)

--link#7D90A9

--danger#FA5151

--warn#FFB341

--warn-bg#33270F

--warn-ink#FFD28A

--star#F2B90D

--maskrgba(0,0,0,.7)

Type (system fonts: 22 · 17 · 15 · 14 · 12)

display 22	22/30 · 600	Page titles
title 17	17/24 · 600	Navigation bar, section titles, buttons, list titles
body 15	15/22 · 400	Body text, list content
caption 14	14/20 · 400	Descriptions, secondary text
small 12	12/16 · 400	Labels, notes, timestamps

Sizes

`--h-touch`	48px
`--h-button-lg`	48px
`--h-button-md`	40px
`--h-button-sm`	32px
`--h-cell`	56px
`--h-navbar`	44px
`--h-tabbar`	56px
`--h-icon`	24px

Radii

`--r-tag`	4px
`--r-button`	8px
`--r-card`	12px
`--r-sheet`	16px
`--r-round`	999px

Components

Buttons

One primary button per screen. Large 48px for main actions, 40px inside cards, 32px for compact rows.

Lists (cells)

Title

Description, 14px

Detail

Another row

Feedback

Loading in place

Tabs, tags, search with history

TagOpen nowFew left

Icons

radex.ma line icons: 24-unit grid, 1.8 stroke, round caps. radex.icon("name", size) returns an inline SVG in the current text color.