Branding & Design System

The visual identity, logo system, colour palette, typography, Ajrak iconography, component theming, layout, letterhead templates, and Brand & Officials CMS specification for the Sindh IT Portal — Facilitation Desk (SITP).

1. Scope & Definitions

This document is the single source of truth for how the Sindh IT Portal — Facilitation Desk looks, reads, and feels across every surface: the public Next.js portal, the staff/facilitator console, the embedded Metabase dashboards, the Docusaurus docs site, the future PWA / React Native app, generated official letters and certificates, email/SMS/WhatsApp templates, and printed letterhead. Every component shipped in the product MUST be built from the tokens and rules defined here; the NFR on design-system coverage (NFR-USA-… ≥ 95 % from library components) is enforced against this document.

Glossary (short form; see _glossary.md):

All visual decisions below are configurable at runtime through the Brand & Officials CMS (FR-OFC-007), versioned on publish, and propagated atomically (FR-OFC-003). The values stated here are the locked defaults.

2. Brand Identity Overview

The SITP brand is Ajrak-inspired and unmistakably Sindh. It is not a generic government portal skin; it is the digital continuation of a centuries-old craft tradition. Three commitments define the identity:

1. Cultural resonance. The palette (indigo / maroon / black), the geometry (symmetric tessellation, the trefoil and eight-point star), and the iconography (Sindhi cap, reed-pen, river) are drawn from Sindh's visual vocabulary. The brand reads as of this place in the first second of contact.
2. Governmental gravity. The product is operated under the authority of S&ITD, Government of Sindh. The co-primary marks (Govt of Sindh seal, S&ITD logo) and the senior-official records (Minister/SACM, Secretary, DG) carry that authority. Letterhead, certificates, and dashboards never appear without the seal and the current official.
3. Modern service clarity. The brand is calm, legible, and digital-first. Ajrak is an accent, never a noise layer. Body copy is set on plain surfaces; motifs live on edges, headers, and dividers. Accessibility (WCAG 2.1 AA across EN/UR/SD, RTL-native) is a brand commitment, not a checklist.

Tagline (EN). A single window for IT companies to resolve problems with Government of Sindh departments.

Tagline (UR / SD). Approved translations are held in _glossary.md and surfaced through the i18n catalog; never re-translate ad hoc.

Brand promise (internal). Facilitation before bureaucracy. Every screen, letter, and notification should make the company feel helped, not processed.

3. Logo System

3.1 Primary mark

The primary SITP mark is aAjrak-rosette logogram — an eight-point star (the central motif of Ajrak block printing) rendered as a single continuous indigo line, with the maroon trefoil inset. To its right sits the wordmark:

Sindh IT Portal (Inter/Poppins, Semibold) Facilitation Desk (Inter/Poppins, Regular, smaller, maroon)

The lockup exists in three orientations:

3.2 Monochrome

A single-colour version exists for stamps, embossing, single-colour print, and low-ink contexts. The entire lockup collapses to --brand-black (#1a1a1a) on light, or --brand-paper (#ffffff) on dark. The internal maroon trefoil becomes a knockout (negative space), never a second grey.

3.3 Favicon and app icons

3.4 Clear space

The clear-space unit is X = the height of the rosette. No other element (text, image, edge, fold) may enter the margin of 1 X on all four sides of the primary lockup, 1.5 X when paired with a co-primary mark. Clear space is measured from the outermost pixel of the lockup, including the wordmark descenders.

3.5 Minimum size

Below these sizes the rosette loses legibility; switch to the wordmark-only or monochrome variant as the surface allows.

3.6 Do / Don't

Do

• Use the approved lockup files from the brand-asset repository (§18), at the sizes in §3.5, with the clear space in §3.4.
• Pair the mark with the co-primary marks on official surfaces (§4).
• Use the monochrome variant on single-colour or low-contrast backgrounds.
• Let the rosette breathe on a solid --brand-paper or --brand-indigo-700 field.

Don't

• Do not recolour the rosette outside the palette (no rainbow, no greyscale gradient, no drop shadow).
• Do not stretch, skew, rotate, or round the mark.
• Do not place the mark on a busy photograph without a solid panel behind it.
• Do not recreate the mark from scratch; always pull the master SVG.
• Do not add a glow, bevel, or 3-D treatment.
• Do not substitute another typeface for the wordmark.

4. Co-Primary Marks & Lockups

The SITP mark is never the sole authority on official surfaces. Two co-primary marks appear alongside it where the Government of Sindh's authority is being exercised: the Government of Sindh seal and the S&ITD logo.

4.1 Government of Sindh seal

The official provincial seal (crest, wheat sheaf, crescent-and-star, name ribbon). Used as-supplied by the Government of Sindh; never redrawn, never recoloured. Always the left-most mark in an official lockup (or right-most in RTL — see §15).

4.2 S&ITD logo

The departmental logo of the Science & Information Technology Department. Used as-supplied; the departmental colour rules take precedence inside its own bounding box.

4.3 Lockups

Co-primary marks carry their own clear-space rules; when combined, the larger clear-space governs. The vertical centre-line of all marks in a lockup is aligned to ±1 px.

5. Co-Branding Line — "Operated by MAAHIR · Powered by Server4Sale"

The PPP delivery model is reflected in a single, fixed attribution line that must appear wherever the product is publicly presented. The wording is locked in _context.md §1 and must not be paraphrased.

Operated by MAAHIR · Powered by Server4Sale

5.1 Placement rules

5.2 Co-branding wording rules

• The line is one sentence, two clauses, separated by a middle dot (·, U+00B7). Never a slash, hyphen, or comma.
• "Operated by" precedes "Powered by". Order is never swapped.
• Both names use the canonical spelling and casing: MAAHIR (all caps), Server4Sale (camel case).
• Partner logos may appear next to the line on the public footer and on letterhead; they are subordinate in size (≤ 60 % of the SITP mark height) and never displace the co-primary government marks.

6. Colour Palette

The palette is built around the three locked brand colours — Ajrak indigo, Ajrak maroon, and Sindh black — extended into functional scales (50–900), and completed with neutrals and semantic colours. Each token has a light-mode and dark-mode variant. All ratios are computed against the surface they are intended to sit on; the table lists the designed pairing and its contrast ratio. WCAG 2.1 AA requires ≥ 4.5:1 for normal text and ≥ 3:1 for large text and UI components.

6.1 Brand colours

6.2 Neutrals

6.3 Semantic colours

Dark-mode semantic variants raise luminance by ~15 % (e.g. --semantic-success → #3aa06b) to hold ratio on --brand-ink-dark.

6.4 Usage rules

• Text is always drawn from --brand-text / --brand-ink-text. Never set body text in --brand-indigo-700 or --brand-maroon-700 over a coloured surface; reserve those for headings ≤ 24 px and decorative accents.
• The two brand hues never sit directly adjacent as text and background. Indigo and maroon are paired only in motifs and the wordmark.
• Disabled states use --brand-indigo-100 fill + --brand-text-subtle text; never drop opacity below 50 %.
• Focus rings are always --brand-indigo-500 at 2 px with a 2 px --brand-paper offset (visible on every surface).
• The palette is the palette. New colours require a change request through §18 governance; ad hoc hex values in code are a defect.

7. Typography

Typography is trilingual by construction: a Latin family for English, a Nastaliq family for Urdu, and a Naskh family for Sindhi. The three are paired for visual parity in line length, x-height, and weight.

7.1 Families

Fonts are self-hosted (subset per locale, font-display: swap) from MinIO to satisfy data-residency and offline staging; no Google Fonts CDN call crosses the perimeter.

7.2 Type scale (modular 1.250 — major third)

7.3 Weights

Only four weights are loaded per family to keep the payload bounded: 400 (regular), 500 (medium), 600 (semibold), 700 (bold). Italic is loaded for Inter only (used for the doc purpose statement and editorial notes); Nastaliq and Naskh have no italic.

7.4 RTL pairing rules

When the locale is ur or sd:

• The whole document flips (§15). Direction-aware CSS (margin-inline, padding-inline, inset-inline, logical properties) is mandatory; physical left/right are forbidden in component CSS.
• The Latin display family is not swapped for Urdu/Sindhi headings on the same page; the locale's family is used throughout.
• Line-height for Urdu body rises to 2.0 and for Sindhi to 1.7; the type scale sizes stay identical, only leading changes, so layouts don't reflow.
• Numerals (ticket IDs, dates, amounts) render in Western Arabic numerals (0–9) in EN, and in Eastern Arabic-Indic numerals in UR/SD unless the user's locale preference overrides — controlled by the i18n catalog (/specs/en/09-i18n-localization/).
• Latin terms inside an RTL line (e.g. SITP-2026-LBR-000123, S&ITD) are wrapped in <bdi> to prevent bidi-spoofing reordering.

7.5 Numeric and date conventions

Ticket IDs, dates, and currency use tabular-figures (font-variant-numeric: tabular-nums) inside tables and dashboards so columns align. Dual calendar (Gregorian + Hijri) is rendered with the Hijri date in --brand-text-muted, one step smaller than the Gregorian.

8. Ajrak Motifs & Iconography

8.1 Motif library

A small, governed library of Ajrak-derived motifs is maintained in the brand-asset repository (§18). Each motif is an SVG with one or two colours drawn from the palette. The library contains:

Motifs are decorative. They never carry meaning that is not also conveyed in text, so a screen reader announces the same information without them. Motifs at < 3:1 contrast against their background are aria-hidden and excluded from the accessibility tree.

8.2 Where motifs appear

8.3 Iconography style

Functional icons (actions, status, navigation) come from a single icon set — Lucide (1.5 px stroke, 24 × 24 default, rounded line-caps) — recoloured via currentColor. Iconography does not mimic Ajrak geometry; motifs do. The two systems are deliberately separate so that functional clarity is never compromised by decoration.

A small set of cultural pictograms supplements Lucide where a Sindh-specific concept is needed:

Cultural pictograms use a 2 px stroke to match Lucide's visual weight and are stored in the same icon component with an aria-label.

8.4 Icon rules

• Stroke icons only; no filled glyphs except for status badges (semantic circles).
• width/height set via size tokens (--icon-sm 16, --icon-md 20, --icon-lg 24, --icon-xl 32).
• Every icon has a text label or aria-label; no icon-only button without an accessible name.
• Status icons are always paired with their semantic colour AND their text label (never colour alone).

9. Component Theming

All components are shadcn/ui primitives themed by Tailwind tokens bound to the palette above. This section fixes the variant matrix and usage rules. Components not listed here are forbidden; a new component requires a design-system change request (§18).

9.1 Buttons

Sizes: sm (32 px), md (40 px, default), lg (48 px). Min touch target 44 × 44 px on mobile. Radius: 6 px (matches --radius-md). Focus ring per §6.4. No drop shadows on default state; elevation is reserved for hover on primary/secondary (1 px --brand-indigo-900 at 12 % opacity).

9.2 Cards

• Surface: --brand-paper (light) / --brand-ink-card (dark).
• Border: 1 px --brand-line (light) / --brand-ink-line (dark).
• Radius: 12 px (--radius-lg).
• Padding: 24 px (--space-600) default, 16 px (--space-400) compact.
• Top accent: optional 4 px strip in --brand-indigo-700 (or semantic colour for status cards).
• Elevation: one level only — shadow-card (0 1 px 2 px --brand-black at 8 %). On hover in interactive lists, elevation rises one step and the border becomes --brand-indigo-300.

9.3 Navigation

9.4 Tables

• Header row: --brand-paper-2 fill, --fs-overline text, --brand-text-muted.
• Body rows: alternating --brand-paper / --brand-paper-2 (zebra) when ≥ 6 rows; hover lifts to --brand-indigo-50.
• Borders: horizontal only, 1 px --brand-line. No vertical gridlines.
• Sticky first column (status / ticket ID) on wide tables; horizontal scroll with shadow indicators on overflow.
• Density: comfortable (48 px row, default), compact (36 px, dashboards).
• Numeric columns right-aligned in LTR, left-aligned in RTL, tabular-nums.

9.5 Badges & status pills

Pills are 14 px caption text, 4 px × 8 px padding, full-radius. Never rely on colour alone: every pill includes its text label.

9.6 Ticket cards / list rows

• Lead: ticket ID in monospace overline (SITP-2026-LBR-000123).
• Title: --fs-h6, two-line clamp.
• Meta row: department chip, status pill, SLA chip (semantic), last-updated (relative, with absolute tooltip in dual calendar).
• Hover reveals quick actions (open, watch, copy link) as ghost buttons.
• Selected row: --brand-indigo-50 fill + 2 px --brand-indigo-700 inline-start border.

9.7 Modals & dialogs

• Backdrop: --brand-black at 48 % opacity, backdrop-blur(2px).
• Panel: 480 / 600 / 800 px width tiers, max-height 85 vh, scroll body.
• Header: 16 px top inset, --fs-h5, optional corner motif.
• Footer: sticky, right-aligned actions in LTR (left in RTL); destructive action isolated by 16 px gap.
• Close: top-end ghost button with the Lucide X; Esc and backdrop-click dismiss (unless a critical prop locks the modal).

9.8 Forms

• Label above input, --fs-caption, --brand-text.
• Required indicator: maroon asterisk with aria-required.
• Input height 40 px, radius 6 px, 1 px --brand-line border; focus → 2 px --brand-indigo-500 ring + 2 px paper offset.
• Error: 1 px --semantic-danger border + --semantic-danger helper text below + aria-invalid="true" + aria-describedby.
• Helper text: --brand-text-muted, below input.

10. Layout & Grid

10.1 Breakpoints (mobile-first)

10.2 Containers

Gutters: 16 px mobile, 24 px md, 32 px xl. Content never touches the viewport edge below 16 px.

10.3 Grid

A 12-column grid on lg+, 8-column on md, single column below sm. Column gap = gutter. The staff console uses a persistent layout: side nav (256 px) + main (rest); on < md the side nav collapses to a drawer and the main becomes full width.

10.4 Spacing scale

Base unit 4 px. Tokens: --space-0 0, --space-1 4, --space-2 8, --space-3 12, --space-4 16, --space-5 20, --space-6 24, --space-8 32, --space-10 40, --space-12 48, --space-16 64, --space-20 80, --space-24 96. All paddings, margins, and gaps draw from this scale; arbitrary pixel values are a lint error.

10.5 Radii & elevation

Elevation: four steps only — shadow-flat (none), shadow-card (default), shadow-pop (hover, dropdowns), shadow-modal (modals, toasts). Shadows use --brand-black at 8/12/16/20 % opacity; no coloured glows.

11. Imagery & Illustration

11.1 Photography

• Subject: real people of Sindh at work — IT professionals in their offices, government officers at their desks, facilitation desk staff, entrepreneurs in co-working spaces, students in training. Stock imagery only when no Sindh-specific original exists, and only from the approved library (§18).
• Treatment: natural light, authentic wardrobe (Ajrak shawls and Sindhi caps welcome where genuine), no over-staged poses. Avoid clichéd "call-centre headset" and "handshake in front of flag" compositions.
• Colour: photographs are not colour-graded to indigo/maroon; the brand palette lives in the chrome around them, not in the photo. A subtle --brand-indigo-50 vignette is permitted on hero images to seat them in the brand.
• Cropping: portrait subjects framed at eye-level; headroom one-third; never crop the Sindhi cap or hijab at the edge.
• Diversity: imagery must reflect the demographic and geographic diversity of Sindh, including women in tech, persons with disabilities, and rural as well as urban settings.
• Consent: every photograph of a person requires a signed release stored against the media_library record (§14.5).

11.2 Illustration

• Style: flat, geometric, two-tone — drawn from Ajrak geometry (rosettes, trefoils, symmetric tessellation). Line work 2 px, corners rounded.
• Palette: --brand-indigo-700 + --brand-maroon-700 + neutrals only; semantic colours reserved for status.
• Use: empty states (no tickets, no results, first-run), onboarding wizard step art, error pages (404, 500, offline), the help-centre hero.
• Illustrations are SVG, animated only on first paint (≤ 600 ms, prefers-reduced-motion honoured), and aria-hidden.

11.3 Charts (analytics)

Charts use the palette in a fixed series order so that the same metric always reads the same colour: indigo-700 → maroon-700 → indigo-500 → maroon-500 → indigo-300 → neutral. Semantic colours appear only when the metric is itself semantic (SLA breach = danger). Axis labels in --brand-text-muted; gridlines 1 px --brand-line; data labels --fs-caption. Every chart has a text alternative (data table or aria-label) per accessibility NFRs.

12. Tone of Voice

Microcopy rules. Button labels are verbs (File, Approve, Resolve). Empty states explain the state and offer the next action. Dates are dual-calendar with the user's locale leading. Amounts include the currency code (PKR). All numbers localise per §7.4. All strings live in the i18n catalog; no hard-coded English in components.

13. Letterhead & Official Document Templates

Official letters and certificates are produced by the Document Generation module (FR-DOC-*, see 12-docgen-esign/en.md). Every official document carries five mandatory zones, in the order below. Templates are trilingual: one source template per document type, rendered in the recipient's preferred locale, with the same layout grid mirrored for RTL (§15).

13.1 Letterhead zones

13.2 Templates

13.3 QR verification block

Every official document embeds a QR (per qr_verifiable_documents, see /specs/en/05-data-model/ §6). The QR resolves to https://sindhitportal.maahir.io/verify/<token> which displays the document hash, issue date, issuing official, and revocation status. The block sits in the footer, 32 × 32 mm on A4, with a one-line caption in --brand-text-muted: "Scan to verify authenticity".

13.4 Print and PDF

• Page size: A4 (210 × 297 mm) default; Legal permitted for legacy departmental templates.
• Margins: 20 mm sides, 25 mm top (masthead), 20 mm bottom (footer).
• Body: 11 pt --fs-body-lg equivalent, justified-left (right in RTL), 1.6 line-height.
• Colour: CMYK conversions of the brand palette are stored in the repository; spot colour Pantone 540 C (indigo) and Pantone 4975 C (maroon) for offset print.
• Fonts embedded in the PDF; PDF/A-2b for archival.

13.5 Date-aware officials on letters

The letter's effective date (the date the letter is issued for, which may differ from the print/regenerate date) drives the Officials CMS join. A letter dated 2024-06-15 regenerated in 2026 shows the 2024 Secretary, DG, and Minister — never the incumbents. This satisfies FR-OFC-004 and US-OFC-002.

14. Brand & Officials CMS Specification

Module P (OFC) is the system of record for everything in this document that is dynamic: officials, media, theme, motifs. Static brand assets (master SVGs, fonts) live in the repository (§18); dynamic brand state lives in the CMS.

14.1 Officials records

The CMS maintains three senior roles, plus optional extensions:

Each officials record (/specs/en/05-data-model/ §officials) carries: title, full_name_{en,ur,sd}, dept_id, portrait_media_id, message_{en,ur,sd}, is_current. Each official_terms row carries designation, effective_from, effective_to (NULL = incumbent), and metadata_json (notification reference, appointment letter).

14.2 Single source of truth

Officials records are the only source for names, portraits, and messages on any surface. Hard-coding an official's name in a component, email template, letter template, or dashboard is a defect. Every consumer — public site, staff console, document generator, dashboards, notification templates — reads from the OFC API:

• GET /api/v1/officials/current?role=secretary — the incumbent.
• GET /api/v1/officials/as-of?role=secretary&date=YYYY-MM-DD — date-aware (letters).
• GET /api/v1/officials/history?role=dg — archived terms (transparency page).

Responses are locale-negotiated (Accept-Language) so the same call returns EN/UR/SD name and message.

14.3 Date-aware accuracy

The join official_terms WHERE effective_from <= :issue_date AND (effective_to IS NULL OR effective_to >= :issue_date) is the canonical rule (/specs/en/05-data-model/ §10.3). It is applied:

• On every letter/certificate render (the official on the masthead matches the issue date).
• On every dashboard "leadership" tile for a selected reporting period.
• On every historical view of a ticket (the DG/Secretary shown is the one in office when the ticket was worked, not today's).

14.4 Activation and archival

• A new official_terms row with effective_from in the future is scheduled, not current. A daily job (00:05 PKT) flips is_current and sets the previous term's effective_to to effective_from − 1 day when the date arrives (FR-OFC-002).
• Past officials are archived, never deleted. The officials row retains deleted_at (soft delete) only on true data-correction; routine succession sets is_current = 0 and leaves the row visible in history. Photographs, messages, and terms remain queryable forever (Sindh Archives retention, /specs/en/22-governance-legal/).

14.5 Media library

The shared media_library table holds every brand asset consumed by the CMS: official portraits, the SITP mark and its variants, co-primary seals, Ajrak motifs, illustration files, email header images. Each asset carries bucket, object_key, mime_type, size_bytes, checksum_sha256, av_status, is_encrypted, plus brand-specific metadata: asset_type (logo / seal / motif / portrait / illustration / icon), valid_from / valid_to (for date-scoped assets such as a retiring seal), consent_ref (signed release for portraits), and tags for search.

Asset changes propagate to surfaces using them: updating the primary mark's SVG in the library re-renders every header on next page load; no deploy required (FR-OFC-006).

14.6 Photo crop and format standards

Portraits are auto-cropped to the 1:1 master on upload via the media library's crop UI; the letter-sized version is derived. Uncropped originals are retained for re-crop.

14.7 Brand & theme configuration

FR-OFC-007 exposes the palette, logo lockup, and motif set as runtime configuration in system_settings (category branding). On publish, the new theme version is stored, the previous is archived, and the change propagates to the public site and staff console on next render. Theming is atomic: a failed propagation rolls back (no half-applied theme). Brand Editors configure; Super Admins approve (§14.8).

14.8 Approval workflow

Changes to senior-official records and to the theme go through a two-step approval:

1. Draft. A Brand Editor creates/edits; the change is saved as a pending revision, visible only in the CMS.
2. Approval. A Super Admin reviews (diff view with before/after), approves or rejects with reason. On approval the change propagates atomically (FR-OFC-003, FR-OFC-005).

The workflow is itself audit-logged (actor, timestamp, before/after) into audit_logs for every state change.

15. Officials CMS Propagation

This diagram shows how a single approved change in the Officials CMS reaches every consumer surface, atomically and audit-logged, with date-aware reads on the way back out.

Written description. A Brand Editor drafts a change to an officials record (a new DG, a portrait swap, a corrected name transliteration, a theme update). The draft is saved as a pending revision and does not propagate. A Super Admin reviews the diff and either rejects (with reason, returned to draft) or approves. On approval the change is written inside a single atomic transaction that also appends a row to audit_logs with the actor, timestamp, and before/after JSON; if any write fails the whole transaction rolls back, leaving every surface on the previous state. After commit, five consumer surfaces read from the same OFC API: the public site (leadership tiles, letter mastheads), the staff console (facilitator dashboards), the document generator (letterhead and certificates), the notification template engine, and the analytics dashboards. The document generator and the analytics dashboards apply the date-aware join — they pass the document's effective date or the reporting period to the API, which returns the official whose official_terms window contains that date. This guarantees that a letter dated 2024 still shows the 2024 Secretary even when regenerated in 2026, and that a historical dashboard for Q2-2024 lists the officials who held office that quarter. Past officials are never deleted: the join simply resolves to the historical term, and the row remains queryable for archival and transparency.

16. RTL Mirror Rules

Urdu and Sindhi are right-to-left. The mirror is applied at the document level (<html dir="rtl">) and propagated through logical CSS properties. The rules below fix what flips and what does not.

16.1 What flips

16.2 What does NOT flip

• Numerals inside a ticket ID (SITP-2026-LBR-000123) — always LTR; wrapped in <bdi>.
• Latin terms (S&ITD, MAAHIR, Server4Sale, SLA, URLs, emails) — always LTR; wrapped in <bdi>.
• Icons with directional meaning — a "reply" arrow points to the direction of reply in that locale; use locale-specific icons, not mirrored versions of the LTR icon. A non-directional icon (search, settings) is unchanged.
• Progress bars and SLA timers — fill from inline-start (so they fill right-to-left in RTL), but the numeric percentage label stays at the inline-end.
• Brand logos — the SITP mark and co-primary marks are never mirrored; they keep their designed orientation. Only their position in the layout flips.

16.3 Implementation

• Use Tailwind's logical utilities (ms-*, me-*, ps-*, pe-*, start-*, end-*, text-start, text-end) and rtl: / ltr: variants only when a logical equivalent does not exist.
• Icons that must flip use transform: scaleX(-1) applied via dir="rtl" scoping, never via manual left/right.
• Test every new component in both ltr and rtl in CI (visual regression on a mirrored fixture set, per /specs/en/13-test-strategy/).

17. Accessibility & Contrast Rules

Accessibility is a brand commitment, not a post-launch audit. The rules below operationalise WCAG 2.1 AA (/specs/en/03-non-functional-reqs/ §Accessibility) for the brand specifically.

17.1 Contrast

• Body text (≤ 24 px normal, ≤ 18.66 px bold): ≥ 4.5:1 against its surface.
• Large text (> 24 px normal, > 18.66 px bold): ≥ 3:1.
• UI components and graphics (button borders, focus rings, status icons, chart data marks): ≥ 3:1.
• Decorative-only elements (Ajrak motifs at low contrast, watermarks) are exempt but must be aria-hidden.
• The locked palette is pre-verified for the designed pairings in §6. A new pairing requires a contrast check in CI before merge.

17.2 Colour-only meaning

Status is never conveyed by colour alone. Every status pill carries a text label (§9.5); every chart series has a legend with text; every required-field marker has both colour and an asterisk and aria-required.

17.3 Focus

• Every interactive element has a visible focus indicator: 2 px --brand-indigo-500 outline with a 2 px --brand-paper offset (or --brand-ink-dark offset in dark mode).
• Focus order follows the visual reading order (which flips in RTL).
• :focus-visible is used so mouse clicks don't paint the ring; keyboard navigation always does.
• Skip-to-content link at the top of every page, visible on focus.

17.4 Motion

• Animations are ≤ 600 ms and respect prefers-reduced-motion: reduce (which disables non-essential motion).
• No parallax, no auto-playing video with sound, no flashing > 3 Hz (photosensitivity).

17.5 Language and screen readers

• Every page declares lang and dir on <html>.
• Mixed-direction runs are wrapped in <bdi>.
• Icons, motifs, and decorative images are aria-hidden or carry an alt/aria-label as appropriate.
• Officials messages from the CMS preserve their locale tags so a screen reader announces Urdu in Urdu and Sindhi in Sindhi, not as accented English.

17.6 Verification in CI

• Automated contrast check (axe-core) runs on every component story and every page fixture.
• Visual regression runs in both ltr and rtl and in both light and dark themes.
• A periodic manual audit (quarterly) covers the locked palette, the type scale, and the letterhead templates, signed off by the S&ITD accessibility lead.

18. Brand-Asset Repository & Governance

18.1 Repository

The brand-asset repository is a versioned store inside the OFC media library (media_library with asset_type filter) plus a read-only git mirror for design-tool integration (Figma library, source-controlled SVGs). It contains:

18.2 Versioning

• Asset files are content-addressed by checksum_sha256; renaming or replacing a file creates a new version, the old version is retained.
• Theme versions are stored with valid_from / valid_to; the active theme is a pointer, not an overwrite.
• Every change to a master asset or theme is a Conventional Commit (docs(branding): … per _conventions.md §11) and a row in audit_logs.

18.3 Governance

18.4 Change process

1. Propose. Contributor opens a change request (CR) describing the asset/theme delta and rationale.
2. Review. Brand Editor reviews for palette, type, motif, and accessibility compliance; requests revisions or approves into a draft.
3. Approve. Super Admin approves (officials/theme) or the S&ITD Brand Owner approves (logo/motif/palette).
4. Propagate. The atomic propagation transaction (§15) publishes; consumers pick up on next render.
5. Archive. The previous version is retained per §18.2; nothing is destroyed.

18.5 Misuse and enforcement

• Any surface found using an off-brand asset, an ad hoc colour, or a hard-coded official name is a defect, filed against the owning team, and fixed within the current sprint.
• The design-system lint (stylelint + a custom token-usage rule + axe-core) runs in CI and blocks merge on un-tokenised values, missing contrast, or unapproved components.
• Partner and third-party use of the SITP brand is governed by a brand-use licence added to the PPP agreement (/specs/en/23-ppp-vendor-exit/); misuse is escalated to the S&ITD Brand Owner.

19. Traceability