Foundations / v0.2.0
00 / The shared languageDesign, without the noise.

One language.
Many useful things.

Solid surfaces. Honest measurements.
A clear next step.

The visual foundations behind Iradeh and beyond. A working collection of identity, tokens, components and the details that make them feel like one system.

Explore the system Build with it
Daily perspective

74.8 kg

One useful number.
Room for the context.Example data
01 — The measurement slabSquare. Quiet. Readable.
01

Useful before beautiful.

The answer first. Evidence and the next action follow.

02

Calm, not empty.

Hierarchy through type, spacing and a simple rule.

03

Native in spirit.

Made for touch, readable at scale, clear in either theme.

01 / Identity

Iradeh, in one mark.

A dot. A cut-nib stem.
A small, separated foot.

Approved Iradeh app icon: off-white split-foot i/alif and vermilion dot on a square ink backgroundThe original square canvas. Platform masks come later.
Iradeh / إرادة

A little i.
A hint of alif.

The split-foot mark connects a Latin initial with an Arabic gesture. The separated foot suggests a hamzeh; the vermilion dot gives it a single, unmistakable accent.

Master canvas280 × 280 viewBox
Ink#171A15
Off-white#F0EEE6
Vermilion#F05A43
Icon SVG Master mark
Transparent Iradeh master mark shown on inkTransparent master
Place on dark ink.
Iradeh icon at 80 pixelsIradeh icon at 48 pixelsIradeh icon at 32 pixels

Same geometry. Every size.

Keep it intact.

Use the original SVG or PNG. Preserve the dot, separated foot, proportions and negative space. No stretching, recolouring or baked-in corner masks.

All 9 brand exports →

02 / Colour

Concrete. Charcoal.
One deliberate accent.

Semantic roles, not arbitrary hex codes.
Tap a swatch to copy its CSS variable.

The everyday surfaceConcrete / Charcoal--ir-background
The useful readoutMeasurement--ir-measurement
The next actionVermilion#F05A43

The complete semantic palette

Accent is identity. Not judgment.

Coral is for Iradeh’s main action—not calorie scores, progress or “good” and “bad” food. Warning and destructive states have separate tokens and explicit labels.

One system, different products

CoralIradeh · #F05A43
HarbourHalifax · #66B6DB
SageAvailable · #97BD9E
IrisAvailable · #B5A0DF

03 / Type & space

Familiar by default.

The system font. Strong headings.
Numbers that stay put.

metric48 / 56 · 800
74.8 kg
h136 / 40 · 800
Useful answers.
h224 / 32 · 800
Made for everyday life.
h324 / 32 · 600
Made for everyday life.
h420 / 28 · 600
Made for everyday life.
body16 / 24 · 400
A clear next step. Nothing more than you need.
small14 / 20 · 500
Last updated just now · example data

Nothing to download.

The platform’s own sans-serif keeps the interface native, fast and readable. Rem-based web sizes respect the reader’s settings. Monospace is reserved for code and tokens.

Space does the organizing.

4
8
12
16
24
32
48

4px rhythm · 0px section radius · 2px controls · 44px minimum target

04 / Components

Small parts.
A consistent whole.

Real shared CSS primitives.
Try the controls. Nothing is saved remotely.

Actions

ir-button

48px default. A single obvious primary action. Real disabled and loading states.

Fields

ir-input

A visible label. An appropriate keyboard. No implicit save.

Selection & feedback

Adapted web states
Everything has a place.

A useful answer, with enough context to trust it.

Estimated, not exact.

A caution includes words—not just a colour.

Measurement & section

ir-measurement

Daily energy · example

1,640 kcal

An exact display of fictional data.

The supporting ledger

No floating card. No drop shadow. Just a rule and a readable surface.

05 / In the product

Where the parts
become useful.

Iradeh-inspired web specimens.
Fictional data, not native app screenshots.

IradehNutritionExample day

Today’s meals

A record, not a score.

Energy logged

1,640 kcal

Protein 92 gCarbs 184 gFat 58 g

Lunch

12:30
Rice bowl

1 bowl · example portion

Protein 24 gCarbs 62 gFat 12 g
452kcal
Apple

1 medium

95kcal
IradehWeightExample readings

The bigger picture

Readings fluctuate. Context matters.

Latest reading

74.8 kg

Synthetic series · not a health assessment

Example weight chart, 1 monthIllustrative readings fluctuate while the trend declines from 76.2 to 74.8 kilograms. Dotted raw readings, a solid trend and dashed goal use the same neutral colour.777573StartToday
● Raw━ Trend┄ Goal

1 month of fictional readings. Not the native trend algorithm.

Evidence before projection.

The native app gates goal projections on data quality. This specimen makes no prediction.

Little dots. Clear amounts.

Four neutral dots beside each macro. A compact amount cue—not a rating, a ring or progress toward a target.

Protein
1 dot / 10 g
Carbs
1 dot / 15 g
Fat
1 dot / 5 g
Zero
4 empty dots
Unavailable
Unknown · no dots

Round displayed grams first, then round the dot count up, capped at four. The spoken value always stays.

Compare before committing.

× reference

Try 1/2 or 1.5. This only changes the example.

Reference

200 kcal

Protein 12 g

Carbs 25 g

Fat 6 g

Your portion

200 kcal

Protein 12 g

Carbs 25 g

Fat 6 g

Synthetic nutrition. Whole-gram demo rounding; not the full native calculation policy.

06 / Icon library

A familiar outline.
Seventy useful names.

The actual Iradeh icon maps.
Hugeicons Free Stroke Rounded.

70 icons · Tap any icon to open its original SVG.

20px icons. 44px targets.

Stroke 1.8, round caps and joins, currentColor. Inline SVGs inherit the correct foreground; don’t tint food cues with brand colour. Some names deliberately share artwork.

Hugeicons 4.3.5 · MIT license →

07 / For agents & builders

Don’t guess.
Fetch the source.

Human-readable. Machine-readable.
Original assets, with provenance.

Everything you need to make the next thing feel like it belongs.

No screenshot archaeology, login, or JavaScript execution needed. Start with the guide or fetch the complete structured bundle. Every asset has a direct URL, dimensions, usage notes, source revision and SHA-256 hash.

Download design kit
/llms.txtStart here. A concise index for agents.
/llms-full.txtRules, recipes, tokens and the complete asset manifest in one fetch.
/api/design-system.jsonThe structured bundle. Tokens, recipes, assets, provenance.
/api/assets.json9 Iradeh brand exports + 70 action and food icon aliases.
/tokens.jsonExact light/dark semantic colours, type, spacing and product accents.
/guide.mdIdentity rules, accessibility and implementation recipes.
Plain HTTP is enough.

No credentials required. For a custom Python client, send a descriptive User-Agent: design-system-agent/1.0; Cloudflare may reject the library’s default signature. The guide includes ready-to-use curl and Python examples.

Use the web foundations
<link rel="stylesheet"
  href="https://design.samijaber.com/tokens.css">
<link rel="stylesheet"
  href="https://design.samijaber.com/components.css">

<section class="ir-measurement">
  <p class="ir-muted">Weight · example</p>
  <p class="ir-metric">74.8 kg</p>
</section>

Know what’s real.

Shared CSS primitives are used directly. Product patterns are DOM adaptations, not mounted native controls. Charts and nutrition records are fictional; no personal data is included.

Know where it came from.

Tokens: shared package v0.2.0, Iradeh snapshot d4b44b4. Identity, icon maps and product guidance: Iradeh main 6ed3c40, 1 November 2026. Source revisions and license terms travel with the assets.

Pinned reference, not an automatic sync. Iradeh identity is reserved for Iradeh-related work; Hugeicons artwork is MIT licensed separately.

Local example

A clear decision.

No real data will be changed.