# Executive Leadership UI Standard v1.0

This standard is the default design reference for all pages intended for the CEO, executive leadership, senior management, and daily leadership meetings.

## 1. Core objective

An executive user should understand the most important state of the page within 3-5 seconds:

- What is the current status?
- What materially changed?
- What needs a decision?
- Who owns it?
- When is it due?
- What is overdue or escalated?

The executive interface is not an analyst workstation. It must prioritize decisions, exceptions, accountability, and next actions.

## 2. Desktop typography

| Element | Recommended | Minimum |
|---|---:|---:|
| Main page title | 38-44px | 34px |
| Executive hero title | 34-42px | 32px |
| Section title | 24-28px | 22px |
| Card/action title | 19-22px | 17px |
| Primary body text | 16-18px | 16px |
| Secondary/explanatory text | 14-16px | 14px |
| Table row text | 15-16px | 14px |
| Status badges | 12-14px | 12px |
| Buttons | 15-17px | 15px |
| Primary KPI value | 36-52px | 32px |
| Secondary KPI value | 24-32px | 22px |
| Metadata | 14-15px | 13px |

## 3. Arabic readability

Arabic core text should normally be 1px larger than the English equivalent when the selected font needs additional visual breathing room.

Recommended baseline:

- English body: 16px
- Arabic body: 17px
- English decision text: 16px
- Arabic decision text: 17px
- Arabic line-height: 1.6-1.7 for explanatory text

## 4. Information density

Default limits for executive pages:

- 5-7 primary messages per screen
- 3-5 major decision items
- 3-5 major exceptions or risks
- 3-5 major commitments

Detailed operational data belongs in drill-down pages.

## 5. Three-level comprehension model

### Level 1 - 3 to 5 second glance

Show status, major change, decisions needed, critical risk, overdue responsibility.

### Level 2 - 30 second review

Show why now, decision required, owner, due date, current status.

### Level 3 - Drill-down

Open the detailed dashboard, action review, governance history, or audit trail.

## 6. Color semantics

- Green: good, on track, resolved
- Amber: watch, due soon, needs review
- Red: critical, overdue, immediate action
- Blue: neutral information
- Purple: executive decision or primary action
- Gray: secondary, historical, inactive

Color must communicate meaning, not decoration.

## 7. Action content model

Every executive action should answer:

1. What?
2. Why now?
3. What decision is required?
4. Who owns it?
5. When is it due?
6. What is the current status?

## 8. Buttons and touch targets

- Primary button font: 15-17px
- Preferred primary target height: 44-50px
- Avoid small low-contrast text buttons for executive actions

## 9. What must not appear on executive pages

Do not expose developer-facing or technical implementation details such as:

- Oracle table names
- JSON fallback paths
- repository names
- SQL terminology
- internal QA actors
- technical IDs
- developer diagnostics
- implementation notes

Keep technical evidence on dedicated QA/admin pages.

## 10. Acceptance checklist

An executive page is not ready unless:

1. The current status is understandable within 3-5 seconds.
2. Primary body text is at least 16px on desktop.
3. Secondary text is at least 14px unless clearly decorative.
4. The most important number or decision is visually dominant.
5. The page does not overload the first screen.
6. Required decisions are explicit.
7. Ownership is explicit.
8. Due dates and overdue states are explicit.
9. Technical implementation text is absent from the executive view.
10. English and Arabic are both comfortably readable without browser zoom.