# Design System — Iraqi Farm Investment Platform

## Reference direction

The UI is based on the three user-supplied design references stored under `docs/design-reference/`.

### Visual language

- Arabic RTL first.
- Institutional agricultural identity rather than casino/crypto styling.
- Deep forest/teal-green navigation surfaces.
- White content surfaces with subtle gray-green borders.
- Soft card radius (14–20px) and restrained shadow.
- Dense dashboards remain readable through clear visual grouping.
- Desktop uses a persistent right-to-left content layout with a dark side navigation for authenticated areas.
- Mobile collapses navigation into a compact header and optional bottom navigation.
- Green is reserved for primary actions, positive/verified states and progress accents.
- Orange/amber is used for review/warning states.
- Red is reserved for rejected/critical states.

## Data integrity rule

The supplied screenshots contain sample visual metrics. Those values are NOT application data and must never be copied into production records.

Until real values are entered, metric UI renders `—` or a clearly marked `DEMO` placeholder.

## Public license/ownership presentation

The platform may contain owner, company and license information entered by an authorized administrator. Public labels such as "مرخص" or "معتمد" are only rendered when the actual evidence record exists and has been manually approved for public display.

## Layout tokens

- Content max width: 1240–1320px.
- Page background: `#f4f8f6`.
- Surface: `#ffffff`.
- Main green: `#087a4f`.
- Dark green: `#063d35`.
- Deep sidebar: `#052f2c`.
- Muted text: `#687b74`.
- Border: `#dfe9e4`.
- Primary radius: `18px`.

## Core shells

1. Public website shell: top navigation + hero + project cards.
2. Investor/user shell: dark sidebar + topbar + cards + updates.
3. Administration shell: dark sidebar + operational overview + compliance status.
4. Mobile shell: compact header + stacked cards + optional fixed bottom navigation.

## Accessibility

- Minimum interactive target height: 42px.
- Visible keyboard focus.
- Text contrast suitable for light surfaces.
- Semantic headings and landmarks.
- Do not communicate state by color alone.