# Sami's design system

Canonical site: https://design.samijaber.com

A practical instrument, not a decorative dashboard. The shared system pairs warm concrete and charcoal with system typography, flat ruled sections, square measurement slabs and a deliberate product accent. It originated in Iradeh, a nutrition, weight and workouts app.

## Start here when generating a visual

1. Fetch https://design.samijaber.com/api/design-system.json for the complete machine-readable index, tokens, recipes and asset metadata.
2. Fetch https://design.samijaber.com/tokens.json for exact semantic values. Choose light or dark deliberately. Use semantic names in implementation.
3. Fetch https://design.samijaber.com/api/assets.json to select original assets. Download actual SVG or PNG bytes from each asset's absolute URL. Do not recreate the Iradeh mark from a verbal description or replace it with a letter, emoji or generic fitness icon.
4. For DOM UI import https://design.samijaber.com/tokens.css followed by https://design.samijaber.com/components.css, or copy their contents into the project. These are framework-independent web foundations, not a complete native component library.
5. Read the rules and recipes below. Prefer one main action, readable labels, real empty/error states and mobile-first layouts.

All documented endpoints and assets are public, read-only and fetchable without authentication or JavaScript. There are no production user records, API keys, remote fonts or analytics. Examples use fictional data. Public availability does not grant an unrestricted trademark license.

### Fetching from an agent

Use an ordinary descriptive User-Agent, for example `design-system-agent/1.0`. Cloudflare's existing Browser Integrity Check can reject Python's default `Python-urllib` signature with HTTP 403 / error 1010. This is not authentication and does not require pretending to be a browser. Curl and standard agent fetch tools work directly; for custom HTTP clients identify your application explicitly. Do not send any Hub, Flow, repository or Cloudflare credentials.

```sh
curl -fsSL -A 'design-system-agent/1.0' https://design.samijaber.com/llms-full.txt
```

```python
import json
from urllib.request import Request, urlopen

def fetch(url):
    return urlopen(Request(url, headers={"User-Agent": "design-system-agent/1.0"}))

with fetch("https://design.samijaber.com/api/assets.json") as response:
    manifest = json.load(response)

# Download original image bytes using the same headers, not a redrawn approximation.
icon = next(asset for asset in manifest["assets"] if asset["id"] == "iradeh/icon.svg")
with fetch(icon["url"]) as response:
    svg = response.read()
```

## Layout and surfaces

- Light background: concrete #cbcbc0. Dark background: charcoal #22221f.
- Ordinary sections share the page surface, separated with a 1px border. Do not introduce white floating cards, shadows, gradients, glass or ornamental rounding.
- Measurement surface: #181b16 light, #151613 dark. Use the paired measurement-foreground and measurement-muted tokens inside it.
- Section radius 0; controls 2px. Platform icon masks are a separate exception, supplied by the OS, not baked into launcher files.
- Spacing: 4, 8, 12, 16, 24, 32, 48px. Native sections mainly use 16px. Wider web gutters may use 24–32px.
- Single readable column on phones, supporting columns on desktop. Let labels wrap. Preserve pinch zoom and browser text sizing; use rem type and tabular numbers for measurements.

## Typography

System sans only: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif. Monospace is for code, token names and technical metadata, not the primary visual voice.

| Role | Size / line height | Weight |
| --- | --- | --- |
| Metric | 48 / 56px | 800, tabular |
| Page title | 36 / 40px | 800 |
| Section heading | 24 / 32px | 800 |
| Secondary heading | 24 / 32px | 600 |
| Small heading | 20 / 28px | 600 |
| Body | 16 / 24px | 400 |
| Supporting | 14 / 20px | 500 |
| Button | 16 / 24px | 600 |

Use tight tracking for large headings and normal tracking for body text. Avoid essential tiny, widely tracked uppercase text.

## Product accents and status

- Coral / vermilion #f05a43: Iradeh, the backwards-compatible default.
- Harbour #66b6db: Halifax.
- Sage #97bd9e and iris #b5a0df: available presets, not assigned to existing products.
- Every preset pairs with primary-foreground #101110. Accent fills are not small text on the neutral page.
- Use data-ir-accent="harbour" on the root or a specimen to select a preset.
- Brand does not mean status. Warning uses #e4b45f with #101110. Destructive uses its dedicated text/surface tokens.
- Iradeh coral identifies the primary action, never nutrition quality, progress or a good/bad health judgment.

## Iradeh identity

Approved mark: a split-foot i / alif. An off-white cut-nib stem, a vermilion dot and a separated foot suggesting the hamzeh. The geometry is authoritative; use the supplied source SVG.

- https://design.samijaber.com/assets/iradeh/mark.svg: transparent source, 280 × 280 viewBox, 1024 × 1024 intrinsic dimensions. Off-white paths require an ink/dark placement for readable contrast. Do not recolour it for light backgrounds; use the opaque icon.
- https://design.samijaber.com/assets/iradeh/icon.svg: original opaque square #171a15 background, same geometry and viewBox.
- https://design.samijaber.com/assets/iradeh/icon.png: 1024px opaque launcher export.
- https://design.samijaber.com/assets/iradeh/apple-touch-icon.png: 180px browser icon.
- https://design.samijaber.com/assets/iradeh/share.png: 1200 × 630 original share card.
- Android foreground, monochrome and background PNGs are indexed in the manifest. Keep their adaptive padding.

Do not stretch, crop, rotate, merge the separated foot, move the dot, add shadows or change path coordinates. Preserve the square canvas and existing negative space. Native OS masks supply rounded corners; any rounded gallery preview is illustrative only. Keep launcher identity separate from navigation and food cues. These are Iradeh brand assets for Iradeh-related work, not a blanket logo for unrelated products. No additional legal minimum-clearance rule has been invented here.

## Action and food icons

The gallery serves the exact 24 action/navigation and 46 food aliases used by Iradeh's app-owned icon maps. These use @hugeicons/core-free-icons 4.3.5, Free Stroke Rounded, MIT licensed. Some aliases share the same geometry intentionally (apple/fruit and nutrition/food).

- Discover each SVG: https://design.samijaber.com/api/assets.json
- Download the full set with license: https://design.samijaber.com/assets/design-kit.zip
- Individual path pattern: /assets/icons/actions/{name}.svg and /assets/icons/food/{name}.svg
- SVG viewBox 0 0 24 24; normal rendered size 20px; stroke width 1.8; colour currentColor. Preserve outline character, round caps and joins. Files opened as images render currentColor as black; inline the SVG to inherit foreground or measurement-foreground in a dark UI.
- Icons beside a visible label are decorative: aria-hidden="true", focusable="false". Icon-only controls need an accessible action label and a 44px target.
- Food cues are hints, not labels or nutrition judgments. Food names remain the source of meaning. Use the generic food icon when a match is uncertain.
- Keep the MIT notice with redistributed icon artwork: https://design.samijaber.com/licenses/hugeicons.txt

## Component recipes

### Flat section and measurement slab

```html
<section class="ir-section">
  <h2 class="ir-heading">Today's overview</h2>
  <p class="ir-muted">A short explanation with a visible source.</p>
</section>
<section class="ir-measurement" aria-label="Example weight">
  <p class="ir-muted">Weight · example data</p>
  <p class="ir-metric">74.8 <span>kg</span></p>
</section>
```

### Actions and fields

```html
<button class="ir-button">Add meal</button>
<button class="ir-button ir-button-outline">Cancel</button>
<label for="name">Meal name</label>
<textarea id="name" class="ir-input" rows="1"></textarea>
```

Primary controls are 48px tall, compact targets at least 44 × 44px. Use one clear primary action rather than walls of full-width buttons. Keep outline/secondary commands secondary. Disabled controls cannot activate; loading announces busy state. Keyboard focus is a visible 3px ring. Grow free-text fields with content; numeric fields stay single-line. Editing does not imply saving.

### Food ledger and macro dots

Calories appear above labelled protein, carbs and fat grams. Beside each macro show four small neutral dots. One filled dot per 10g protein, 15g carbs or 5g fat, rounded up and capped at four. Calculate from the displayed rounded grams after scaling a portion. Zero means four unfilled dots. Unavailable or invalid means “Unknown” and no dots. Dots are decorative amount cues, never quality ratings or personal-goal progress. Labels and values remain spoken; wrap macro groups on narrow or enlarged text layouts.

### Portion comparison

Show Amount eaten above aligned Reference / Your portion columns. Keep Reference fixed and place the live portion on the dark measurement slab. Preserve typed fractions. Comparing or typing never saves a meal. This site's interactive example uses simple fictional data and whole-gram display rounding, not the full native nutrition calculation policy.

### Weight chart

Use raw reading dots, a solid trend and dashed goal. Do not rely on hue. Provide an accessible text summary and labelled date ranges. This gallery draws illustrative synthetic series only; it does not implement or replace Iradeh's evidence-gated projection or native trend algorithm.

### Feedback, dialogs and empty states

Unknown is not zero. Empty states explain what is missing and offer a useful next step. Errors explain how to recover. Warning and destructive states include text, not just colour. Native implementation should reuse established focus/dismissal and confirmation primitives. DOM dialogs may use the browser's modal dialog element with explicit Cancel/Close; never copy screenshot-only interaction machinery into product code.

## Accessibility and motion

Respect system light/dark, reduced motion, Dynamic Type/browser text scaling and increased contrast. Preserve readable paired tokens, labelled fields, keyboard access and 44px targets. Do not make essential actions hover-only. Motion budget is 150–250ms for direct feedback, opacity/transform preferred. Exact numbers update immediately. No entrance animation that delays content. No decorative animation is required.

## Implementation boundary and provenance

The web gallery renders real shared CSS primitives and adapted, clearly labelled product patterns. It is not a claim that React Native controls are mounted in the browser. The native app uses app-owned React Native Reusables/RN Primitives components with Uniwind; this site needs none of those runtimes.

Shared token snapshot: d4b44b41daad86f947b890f5fcddfc4e7c1ffbd7, package 0.2.0. Identity, icon maps and updated product guidance: Iradeh main 6ed3c4019f841d1ccf0a0aef8997860bdd23384d, read on 2026-11-01. Source paths, content hashes, sizes and licenses are in the manifests. Site build does not read from or mutate the Iradeh checkout. Updating the gallery does not change the native app. This is a pinned source snapshot, not a promise of automatic synchronization.

The original brand is reserved for Iradeh-related use. Third-party Hugeicons artwork is MIT licensed separately. Source repositories are private; fetching this public reference does not require repository credentials.