Mazeed foundations & components

Every value below is read live from @mazeed-org/mazeed-ui's tokens and components — toggling theme/language re-resolves the same CSS custom properties, nothing here is hardcoded per-mode.

Colors

Tier-1 primitives (never used directly in components) and the Tier-2 semantic/status/financial roles components actually read.

Primitives

Brand
--brand-50
--brand-100
--brand-200
--brand-300
--brand-500
--brand-600
--brand-700
--brand-800
--brand-950
--brand-1000
Neutral
--neutral-0
--neutral-25
--neutral-50
--neutral-100
--neutral-300
--neutral-400
--neutral-500
--neutral-600
--neutral-700
--neutral-800
--neutral-900
--neutral-950
Danger
--danger-50
--danger-200
--danger-300
--danger-500
--danger-600
--danger-800
--danger-950
Warning
--warning-50
--warning-200
--warning-300
--warning-400
--warning-500
--warning-600
--warning-800
--warning-950
Accent
--accent-50
--accent-200
--accent-400
--accent-500
--accent-600
--accent-800
--accent-950
Info
--info-50
--info-500
--info-700
--info-800

Semantic

Surface, border & primary
--c-surface
--c-surface-subtle
--c-border
--c-border-strong
--c-primary
--c-primary-hover
--c-primary-press
--c-error

Status tones (bg · ink · line)

success
--s-success-bg / -ink / -line
warning
--s-warning-bg / -ink / -line
error
--s-error-bg / -ink / -line
info
--s-info-bg / -ink / -line
neutral
--s-neutral-bg / -ink / -line

Financial (sign-driven, never page-driven)

+ SAR 12,400.00 · --fin-pos− SAR 3,120.00 · --fin-negSAR 0.00 · --fin-neutral

Typography

Onest (Latin), Almarai (Arabic), Fraunces (display serif). Money always renders in --mono: Onest, tabular, LTR.

Type scale

--t-displayInvoices
--t-titleSales this month
--t-bodyAmounts waiting to be collected.
--t-body2Shown on the invoice PDF.
--t-labelCUSTOMER NAME
--t-monoSAR 48,200.00
--t-badgeNEW

Families

Onest — Aa Bb Cc 0123
--font (Latin)
Almarai — أهلاً، شيماء
--font (Arabic)
Fraunces — Invoices
--display

Spacing, radius & shadows

8pt-derived spacing scale, five canonical radius steps, and the two elevation shadows.

Spacing

--space-xs
4px
--space-sm
8px
--space-md
12px
--space-lg
16px
--space-xl
24px
--space-2xl
32px
--space-3xl
48px

Radius

sm · 3
control · 6
md · 8
lg · 12
card · 15
chip · 20
full

Shadows

--shadow-card
--shadow-pop

Motion

Not yet shipped as CSS custom properties (see foundations/motion.md) — values below are documented, not tokenized. Transforms + opacity only; never animate financial numbers counting up.

Durations & easing

instant100ms
fast160ms
base240ms
slow360ms
sheet420ms
standardcubic-bezier(.2,0,0,1)
entrancecubic-bezier(0,0,0,1)
exitcubic-bezier(.4,0,1,1)
hover me

Icons

Untitled UI Icons PRO — line (default) and solid (active/selected), rendered via CSS mask + currentColor. Licensed — see assets/ASSETS.md.

261 icons

152 of 152
activity
airplay
alarm-clock
alert-circle
alert-triangle
align-center
align-left
anchor
annotation-question
announcement-01
archive
arrow-down
arrow-left
arrow-narrow-right
arrow-right
arrow-up
arrow-up-right
at-sign
award-01
backpack
bank
bank-note-01
bank-note-03
bar-chart-01
bar-chart-square-02
bar-line-chart
battery-full
bell-01
bell-ringing-01
bezier-curve-01
bluetooth-on
bold-01
bookmark
box
briefcase-01
browser
brush-01
building-01
bus
calculator
calendar
calendar-check-01
camera-01
car-01
check
check-circle
check-circle-broken
check-done-01
chevron-down
chevron-left
chevron-right
chevron-selector-vertical
chevron-up
clapperboard
clipboard
clock
clock-check
clock-refresh
clock-stopwatch
cloud-01
cloud-lightning
cloud-moon
cloud-raining-01
cloud-sun-01
code-01
code-browser
coins-01
coins-hand
coins-stacked-01
coins-swap-01
colors
columns-01
command
compass
container
copy-01
corner-up-right
cpu-chip-01
credit-card-01
credit-card-check
credit-card-down
credit-card-up
crop-01
cube-01
currency-dollar-circle
database-01
dataflow-01
diamond-01
dots-horizontal
dots-vertical
download-01
edit-05
eye
file-02
file-06
file-check-02
file-question-02
filter-funnel-01
filter-lines
folder
gift-01
globe-01
graduation-hat-02
grid-01
headphones-01
heart
help-circle
home-02
home-line
image-01
lightbulb-03
line-chart-up-01
link-01
lock-01
log-out-01
mail-01
menu-01
menu-02
message-chat-circle
package
percent-02
phone
pie-chart-03
play
play-circle
plus-circle
receipt
receipt-check
refresh-cw-01
route
search-lg
send-01
settings-01
share-01
shield-01
shopping-bag-03
shopping-cart-01
star-01
tag-01
target-04
trash-01
trend-down-01
trend-up-01
truck-01
upload-cloud-01
user-01
user-plus-01
users-01
wallet-02
x
x-close
zap

Components

Every component with a real React implementation today — all documented variants, sizes, tones and states.

AppTopNav — home / main / internal

AK
Good morning, Aisha
Acme Trading Co.
Invoices
42 this month
Invoice INV-1042
Acme Trading Co.

AppButton — variants

AppButton — sizes

AppButton — states & block

AppTextField — states

Shown on the invoice.
Focus a field to see the ring.
Filled
VAT number must be 15 digits.
IBAN verified.
VAT rate changed recently.
Disabled
INV-1042
Locked — this invoice is posted.

AppTextField — money

SAR
Monospace · LTR · end-aligned.

AppTextArea

Visible on the PDF.0 / 280
Enter a reason before voiding.

AppSelect

Applied to every line.
Choose a VAT rate.

Checkbox / Radio / Switch

AppHelperText

Visible to your customer on the PDF.Amount looks right.VAT rate changed recently.Enter an amount including VAT.

AppAlert — tones

AppToast — tones

Sent — Invoice INV-1042 emailed to Acme Trading Co.
Couldn't reach the server. Try again.
Draft saved automatically.
Some lines have no VAT rate.

AppTooltip — variants

VAT is calculated on the line subtotal.IBAN is validated as you type.

AppAvatar — sizes

AKAKAKATNLM

AppEntityCard — by status

Acme Trading Co.
INV-1042 · due 30 Jun
SAR 48,200.00
Overdue
Najd Logistics
INV-1051 · due 12 Jul
SAR 12,750.00
Pending
Salary run — June
14 employees
SAR 96,500.00
Completed
Office supplies
No status
SAR 1,240.00

AppKpiCard — with & without trend

Net liquidity
SAR 482,900
+12.4% vs last month
Overdue
SAR 38,400
3 invoices
VAT collected
SAR 71,235
Q2 to date
Invoices this month
42

AppListItem — menu

AKAisha Khan
15% — Standard
Settings
Log out

AppStatus — lifecycle states

DraftPendingApprovedPaidCompletedOverdueVoided

AppTag — soft

DraftStandard rateReconciledPartialRejected

AppTag — filled

DraftStandard rateReconciledPartialRejected

AppTag — outlined

DraftStandard rateReconciledPartialRejected

AppChip — filter bar

AppTabs — underline

AppTabs — pill