Naser Mansour
457 lines
30 KiB
Markdown
457 lines
30 KiB
Markdown
# UX Design Spec: Libra for Rights — Public-Site Redesign
|
||
**Version:** 2.0
|
||
**Date:** 2026-10-31
|
||
**Status:** Approved (client approved mockup v3 on 2026-10-31)
|
||
**Visual mockup:** `docs/ux-mockup.html` (open in a browser to view; v3, commit `caec396`)
|
||
|
||
This file has two parts:
|
||
|
||
- **Part A — Public site (redesign, approved 2026-10-31).** Governs every page rendered through
|
||
`resources/views/components/layouts/public.blade.php` and the auth layouts' type and controls.
|
||
- **Part B — Dashboards, emails and the Nablus form (unchanged).** The retrospective record of the
|
||
design system as built before the redesign. It still governs the admin and client dashboards,
|
||
the emails and `/forms/nablus-workshop`, none of which the redesign touches.
|
||
|
||
Where Part A and Part B disagree about a public page, Part A wins.
|
||
|
||
---
|
||
|
||
# Part A — Public site
|
||
|
||
## Design Direction
|
||
|
||
Arabic-first, editorial and quiet: the firm reads like a well-bound legal document, not a tech
|
||
product. The brand palette (forest, gold, cream, olive) is kept and used with more confidence —
|
||
large forest bands, gold as thread and rule, cream as linen. Headlines are set in an editorial
|
||
naskh serif (Markazi Text); body in IBM Plex Sans Arabic. Sections are numbered like articles of
|
||
a statute ("المادة ٠١ — المؤسِّسة"). The signature is an engraved-gold balance over olive-tree
|
||
photography that settles into level on load and is weighed by the visitor's pointer. Tatreez
|
||
appears only inside real photography — Naser ruled out drawn cross-stitch ("drawing using xxx and
|
||
other symbols is more of a tech stuff not lawyers", 2026-10-31). Every claim on the page is backed
|
||
by the code (code-fit check, 2026-10-31): no availability promises, no response-time promises, no
|
||
article images.
|
||
|
||
**Layout default:** desktop-first; every layout works at 768px and 390px with no horizontal scroll.
|
||
|
||
**Scope:** public pages only — home `/`, about `/about`, posts `/posts` and `/posts/{post}`,
|
||
booking `/booking` and `/booking/success`, legal `/page/{slug}` (terms, privacy), and the auth
|
||
pages (type and controls only, see *Auth pages*). Out of scope: admin and client dashboards,
|
||
emails, PDFs, `/forms/nablus-workshop`.
|
||
|
||
## Layout & Navigation
|
||
|
||
- **Containment.** The public layout no longer wraps pages in one padded 1200px container; each
|
||
page section is full-bleed and places its own content in a `.wrap` container:
|
||
`max-width: 1200px; margin-inline: auto; padding-inline: 28px` (18px at ≤760px).
|
||
- **Section rhythm.** Standard section padding 120px top and bottom (80px at ≤760px). Section
|
||
header (`.sec-head`): flex row, items aligned to the end, space-between, gap 32px, wrap,
|
||
margin-bottom 54px; left side holds the article label and h2, right side a muted lede
|
||
(max-width 30em).
|
||
- **Article label** (`.art-no`): display font, 1.15rem, weight 600, `--gold-ink`. Format
|
||
`المادة ٠N — <name>` / `Article 0N — <Name>` (Arabic-Indic digits in Arabic).
|
||
- **Eyebrow** (`.eyebrow`): 0.82rem, weight 600, `--gold-ink`, preceded by a 22×2px rule in
|
||
currentColor with 10px gap; in English 0.74rem, uppercase, letter-spacing .16em. Arabic text
|
||
never gets letter-spacing (it breaks joining).
|
||
- **Navigation** (sticky, top 0, z 50, height 72px): background `rgba(244,241,234,.82)` with
|
||
`backdrop-filter: blur(14px) saturate(1.2)`; bottom border transparent until the page has
|
||
scrolled more than 8px, then `1px solid var(--line)` plus shadow `0 8px 24px -18px
|
||
rgba(30,34,25,.5)`. Order (start → end): brand (seal + wordmark), links, then tools (language
|
||
toggle, client login, gold "Book a consultation" button). Links: Home, About, Services (→
|
||
`/#services`), Articles (→ `/posts`), Booking (→ `/booking`). Link style: 10px 14px padding,
|
||
weight 500, .95rem; hover colour `--olive`; a 2px dashed gold underline (4px dash, 3px gap)
|
||
scales in from the inline-start edge on hover and stays on the current page's link
|
||
(`aria-current="page"`). Logged-in visitors see "Dashboard" (to their role's dashboard) and
|
||
"Log out" in place of "Client login", as today.
|
||
- **Brand mark:** a 46×46px "seal" — `public/images/logo.png` as a cover background on white,
|
||
2px solid `#1A1A1A` border, shadow `3px 3px 5px rgba(26,26,26,.35)` — followed by the wordmark:
|
||
«ليبرا» (display font, 1.35rem) over «للحقوق» (.72rem, muted). English: "Libra" over
|
||
"FOR RIGHTS" (letter-spacing .12em).
|
||
- **Mobile (≤1100px):** links hide; a 44×44px menu button (1.5px `--line` border, radius 10px,
|
||
white) opens the existing Alpine mobile menu, restyled as a cream sheet below the nav with
|
||
full-width 48px rows. At ≤760px the nav's gold button and the client-login link also hide (both
|
||
remain inside the sheet).
|
||
- **Reading progress rule:** a fixed 2px bar at the very top of the viewport (z 60), gradient
|
||
`#8A7555 → #E2CDA4 → #A68966`, `transform: scaleX(p)` where p = scrollY / (scrollHeight −
|
||
innerHeight); origin is the inline-start edge (right in RTL, left in LTR). Decorative
|
||
(`aria-hidden`).
|
||
- **Footer:** background `--forest-2` (#232A1C), text `--gold-lt`, margin-top 120px, padding 72px 0
|
||
28px, .92rem. A 1px top hairline: horizontal gradient transparent → `rgba(196,168,130,.7)` →
|
||
transparent. Four columns (1.4fr 1fr 1fr 1fr, gap 40px; 2 columns ≤1100px; 1 column ≤760px):
|
||
(1) brand mark with cream wordmark and the tagline «ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون
|
||
للدفاع»; (2) "Explore": About, Services, Articles, Booking; (3) "Clients": Client login, Terms of
|
||
use, Privacy policy; (4) "Contact": phone (LTR), email, address. Column headings: display font,
|
||
1.15rem, cream. Links: 10px vertical padding, hover → cream and a 3px nudge toward the
|
||
inline-start. Bottom row: copyright, top border `rgba(244,241,234,.1)`, .8rem. No photography
|
||
credit line.
|
||
|
||
## Visual Style
|
||
|
||
### Color Palette
|
||
|
||
| Token | Hex | Use |
|
||
|---|---|---|
|
||
| `--forest` | `#2D3624` | hero frame ground, pillar band, booking card, hover fill of service rows |
|
||
| `--forest-2` | `#232A1C` | footer only (depth) |
|
||
| `--gold` | `#A68966` | gold buttons, rules, row numbers, focus ring |
|
||
| `--gold-ink` | `#7A6648` | gold text on cream (labels, dates) — darkened from the brand gold-hover `#8A7555` on 2026-10-31 so small text meets WCAG AA (4.9:1 on cream, 5.5:1 on white) |
|
||
| `--gold-lt` | `#C4A882` | small gold text on forest |
|
||
| `--cream` | `#F4F1EA` | page ground |
|
||
| `--olive` | `#4A5D23` | link hover, emphasis word in the hero, active accents |
|
||
| `--ink` | `#1E2219` | body and heading text |
|
||
| `--muted` | `#5B6152` | secondary text |
|
||
| `--line` | `rgba(45,54,36,.14)` | hairlines and borders |
|
||
| fabric ground | `#ECE7DC` | background of the Vision section |
|
||
|
||
The palette is the brand's own (`docs/brand.md`); `--ink`, `--muted`, `--forest-2` and the fabric
|
||
ground are darker/lighter steps of it, added for contrast and depth. Status colours (success,
|
||
danger, warning) are unchanged from Part B.
|
||
|
||
**Page ground:** `--cream` with a linen weave —
|
||
`repeating-linear-gradient(0deg, rgba(45,54,36,.025) 0 1px, transparent 1px 3px),
|
||
repeating-linear-gradient(90deg, rgba(45,54,36,.022) 0 1px, transparent 1px 4px)`.
|
||
|
||
**Shadows:** `--shadow-1: 0 1px 2px rgba(30,34,25,.06), 0 4px 14px rgba(30,34,25,.06)`;
|
||
`--shadow-2: 0 2px 4px rgba(30,34,25,.08), 0 18px 40px -12px rgba(30,34,25,.28)`.
|
||
**Easing:** `--ease: cubic-bezier(.2,.7,.2,1)`. **Radius:** cards 16px, buttons and chips 999px,
|
||
inputs 12px.
|
||
|
||
### Typography
|
||
|
||
- **Display** (h1–h3, article labels, blockquotes, numbers): **Markazi Text**, weights 400–700,
|
||
fallback `"Times New Roman", serif`. Headings weight 700, line-height 1.25.
|
||
- **Body and UI:** **IBM Plex Sans Arabic**, weights 300–600, fallback `system-ui, sans-serif`.
|
||
17px, line-height 1.75 (16px at ≤760px). Both families carry Latin glyphs, so English uses the
|
||
same two families.
|
||
- Loaded from Google Fonts with `display=swap`, on the public and auth layouts only. The dashboards
|
||
keep Cairo/Montserrat.
|
||
- Sizes: hero h1 `clamp(2.6rem, 4.6vw, 4.1rem)`, line-height 1.12, word-spacing .08em (English:
|
||
letter-spacing −.02em); section h2 `clamp(2rem, 3.4vw, 3rem)`; row h3 1.65rem; card h3 1.4rem;
|
||
post h3 1.35rem; lede 1.15rem.
|
||
|
||
### Tone & Style
|
||
|
||
Editorial, warm, unhurried. Real photography only (olive tree, embroidery on a hoop, olives,
|
||
hills, the founder's portrait). No drawn cross-stitch, no gradient blobs, no carousels. Depth comes
|
||
from layered shadows, gold hairlines and the engraved balance.
|
||
|
||
### Buttons
|
||
|
||
- **Gold** (`.btn-gold`): pill (radius 999px), min-height 48px, padding 12px 26px, weight 600,
|
||
background `--gold`, text `--ink`, shadow `0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px
|
||
rgba(166,137,102,.8)`. Hover: lift 2px, deeper glow plus a 6px `rgba(166,137,102,.14)` halo, and
|
||
a white shimmer (105° gradient, 30–70%) sweeps across in .7s.
|
||
- **Ghost** (`.btn-ghost`): transparent, 1.5px inset `--forest` ring, text `--ink`. Hover: fills
|
||
`--forest`, text cream, lift 2px. On dark grounds: cream text and a `rgba(244,241,234,.6)` ring;
|
||
hover fills cream with forest text.
|
||
- An arrow icon inside a button nudges 4px toward the reading direction on hover; it is mirrored
|
||
in LTR.
|
||
- Focus (all controls): `outline: 2px solid var(--gold); outline-offset: 3px`.
|
||
|
||
## Key Screens / Flows
|
||
|
||
### Home `/`
|
||
|
||
Top to bottom (content is real; copy keys are listed in the tasks):
|
||
|
||
1. **Hero** — two columns (1fr : 1.08fr, gap 56px; one column ≤1100px). Start column: eyebrow
|
||
«ليبرا للحقوق · فلسطين»; h1 «العدالة *ممارسةٌ يومية*، لا مبدأٌ نظري.» with the emphasised phrase
|
||
in `--olive` and a dashed gold underline; lede (the existing `home.intro`); gold "Book a
|
||
consultation" (→ `#book`) and ghost "Our services" (→ `#services`); a trust strip of three
|
||
items separated from the CTAs by a hairline: «أفراد وشركات / استشارات وتمثيل», «المرأة والأسرة /
|
||
دعم قانوني متخصص», «عربي · English / خدمة بلغتين». End column: the **balance frame** (see
|
||
Signature Moment): an arched frame (aspect 4:4.6, radius 999px 999px 18px 18px) holding the
|
||
olive-tree photo under a forest gradient veil, a soft gold glow, the gold balance, and the
|
||
italic caption «لكلّ حقٍّ وزنُه». A cream tag with a pulsing olive dot overlaps the frame edge:
|
||
«استشارات حضورية أو عن بُعد».
|
||
2. **Pillars band** — full-bleed forest band, three columns divided by cream hairlines: Justice,
|
||
Dignity, Advocacy, each with a gold gem (12px rotated square) and a one-line gloss in
|
||
`--gold-lt`. Hover lightens the column background.
|
||
3. **Founder** (Article 01) — portrait (aspect 4:5, radius 18px, greyscale, an inset dashed gold
|
||
frame, a cream name card «هدى عرموش / المؤسِّسة · محامية»), h2 «تعرّف على المؤسِّسة», a pull
|
||
quote «العدالة ممارسة يومية، وليست مجرد مبدأ نظري.» (display font, gold inline-start rule), the
|
||
two bio paragraphs, and a ghost "Read our story" → `/about`. Hover on the portrait restores some
|
||
colour and scales it 3%.
|
||
4. **Services docket** (Article 02) — four rows, each a link to `#book`: big gold number, title,
|
||
chips of the service's items, a round arrow button. Hover: the row fills forest, text turns
|
||
cream, chips go gold-light, the arrow fills gold, a dashed gold inner border appears, lift 2px.
|
||
5. **Vision** (Article 03, fabric ground `#ECE7DC`) — text column (h2 «منسوجةٌ من نسيج المجتمع»
|
||
and a display-font paragraph) beside the embroidery-hoop photo (circular, two gold ring
|
||
shadows). Below it, three cards: "For our institution" (forest panel with a static balance),
|
||
"For society" (olives photo), "For Palestinians in the diaspora" (hills photo); each with an
|
||
italic label on the image, a title and one line.
|
||
6. **Values** (Article 04) — six cards in a row (3 ≤1100px, 2 ≤760px): a gold-ringed medallion
|
||
with a fine-line icon, and the value name. Hover: card lifts and tilts −0.6°, the medallion
|
||
rotates −8°, gains a gold glow, the icon turns olive.
|
||
7. **Latest articles** (Article 05) — the three most recent published posts as text-only cards
|
||
(date, title, excerpt, "Read more"), gold top border turning olive on hover, a large faint
|
||
quotation mark in the corner; "View all articles" ghost button → `/posts`. No post → the
|
||
existing "Articles coming soon" line in place of the grid.
|
||
8. **Booking card** (Article 06, `id="book"`) — one rounded (28px) forest card in two columns:
|
||
start panel with h2 "Book a consultation", the lede «اختر يوماً ووقتاً متاحَين، وأخبرنا باختصار
|
||
عن قضيتك. نراجع كل طلب ونؤكّد الموعد بالبريد الإلكتروني — دون الحاجة إلى حساب.», phone, email,
|
||
address, and the finale balance (190px); end panel is a cream inset form (see *Booking flow*).
|
||
|
||
### Booking flow (home card and `/booking`)
|
||
|
||
Both surfaces run the existing guest-booking component and its rules unchanged: name, email,
|
||
phone (all required), a case summary (required, minimum 20 characters), the math captcha, one
|
||
booking per email per day, slots from `AvailabilityService`, the existing confirm step, and the
|
||
redirect to `/booking/success`. Logged-in visitors see the existing "you are logged in" message,
|
||
restyled, in place of the form.
|
||
|
||
- **Home card (compact):** fields in this order — name and phone side by side, email, a **day
|
||
strip**, a **slot row**, the case summary, the captcha, the gold submit "Request this
|
||
appointment" (full width), and the note «ملاحظة: يمكنك حجز استشارة واحدة كحدّ أقصى في اليوم.».
|
||
The day strip shows the next 14 calendar days that have at least one available slot, as
|
||
66×72px buttons (weekday name over the day number), horizontally scrollable; the first is
|
||
pre-selected. Selected day: forest fill, cream number. The slot row shows that day's available
|
||
slots as pill buttons (min-height 44px); selected slot: gold fill. Both use `aria-pressed`.
|
||
Submit opens the existing confirm step inside the same card (summary of date, time and contact,
|
||
with Confirm and Back).
|
||
- **`/booking` page:** the same two-panel forest card, full page; the end panel keeps the month
|
||
calendar (the existing component, restyled: cream ground, 44px day cells, selected day forest,
|
||
available days with a gold dot, unavailable days muted), then the fields and confirm step.
|
||
- **Inputs:** min-height 48px, padding 12px 16px, radius 12px, 1.5px border `rgba(45,54,36,.18)`,
|
||
white; focus: border `--gold` plus a 4px `rgba(166,137,102,.2)` ring. Labels .85rem, weight 600.
|
||
Errors: the existing message under the field, in the danger colour.
|
||
- **`/booking/success`:** a centred cream card on the linen ground with a small level balance, the
|
||
existing success copy and a ghost button home.
|
||
|
||
### About `/about`
|
||
|
||
The same system, existing content only (no new copy beyond section labels): hero (eyebrow, h1
|
||
from `about.title`, the tagline, the identity statement), Vision and Mission (the fabric section
|
||
pattern; the three mission cards with the olives, hills and static-balance panels), Values (the
|
||
medallion row), Goals (a numbered docket list: gold display numbers, no chips, no links), Legal
|
||
services (the docket rows, linking to `/booking`), closing gold CTA to `/booking`.
|
||
|
||
### Articles `/posts` and `/posts/{post}`
|
||
|
||
- **Index:** page head (article label, h2 "Articles"), the existing search field restyled as a
|
||
pill input, the text-only post cards in a three-column grid (2 ≤1100px, 1 ≤760px), the existing
|
||
pagination restyled (pill buttons, current page forest).
|
||
- **Show:** a reading column max-width 720px; date in `--gold-ink`; title in the display font
|
||
`clamp(2rem, 3.4vw, 3rem)`; body in the existing prose styles with headings in the display font
|
||
and links in `--olive`; a "Back to articles" ghost button.
|
||
|
||
### Legal pages `/page/{slug}`
|
||
|
||
Reading column max-width 720px, display-font title, existing prose body.
|
||
|
||
### Auth pages (login, forgot/reset password, confirm password, verify email)
|
||
|
||
Type and controls only: the auth layouts load the two new families and apply the input, focus and
|
||
gold-button styles above. The split composition (forest panel with the logo, cream form panel) and
|
||
the existing auth pattern stay as they are.
|
||
|
||
## Signature Moment
|
||
|
||
**Element:** an engraved-gold balance (scales of justice) drawn as layered SVG — gradient-filled
|
||
beam, pillar, olive-leaf finial, base and two pans with a drop shadow — standing over the
|
||
olive-tree photograph in the hero frame. A second instance (the "finale", 190px) sits in the
|
||
booking card; a static instance fills the "For our institution" card.
|
||
**Built from:** the firm's own name — Libra, the balance — and the olive tree of the region; the
|
||
photograph is real.
|
||
**Trigger:** page load; pointer movement over the hero frame (fine pointers only); scroll position
|
||
for the finale.
|
||
**Mapping:**
|
||
- Load: the hero beam starts tilted 14° and, after 450ms, a damped spring settles it to 0°
|
||
(per frame: `v += (target − a) × 0.028; v ×= 0.935; a += v`; stop when |v| < 0.002 and
|
||
|target − a| < 0.01).
|
||
- Pointer: x = (clientX − frame.left) / frame.width; target = clamp((x − 0.5) × 2.4, −1, 1) × 9°.
|
||
The gold glow follows the pointer; the photo pans opposite the pointer by
|
||
`(pointer − centre) / −40` px at scale 1.08. Pointer leave → target 0°, photo resets.
|
||
- Pans hang from the beam ends: for beam angle θ, pan centres are at (200 ∓ 142·cos θ,
|
||
110 ∓ 142·sin θ) in the 400×400 viewBox, so they stay vertical while the beam tips.
|
||
- Finale: with p the page progress, q = clamp((p − 0.7) / 0.25, 0, 1); target = −12° × (1 − q), so
|
||
the balance comes level as the reader reaches the booking card.
|
||
**Tech suggestion:** an inline SVG Blade component and a small vanilla JS module
|
||
(`requestAnimationFrame`); no library.
|
||
**Reduced-motion fallback:** all balances render level (0°), no spring, no pointer response, no
|
||
glow movement; the photo stays still.
|
||
|
||
## Interaction Patterns (secondary)
|
||
|
||
- **Entrance choreography:** elements marked `data-reveal` start at opacity 0 and translateY 28px
|
||
and transition (.9s, `--ease`) to rest when 8% inside the viewport (IntersectionObserver,
|
||
`rootMargin: 0px 0px -8% 0px`, observe once). Delays by `data-d` 1–5: .08s steps. Content stays
|
||
visible if JavaScript fails (the hidden state applies only once the script adds a `js` class).
|
||
- **Hover depth:** cards lift 6px with `--shadow-2` and a gold border `rgba(166,137,102,.55)`;
|
||
card images scale 1.05–1.06 over .8s.
|
||
- **Language toggle:** the existing `/language/{locale}` route; a 48×44px pill showing "EN" in
|
||
Arabic and "ع" in English.
|
||
- **Reduced motion:** `@media (prefers-reduced-motion: reduce)` disables every animation and
|
||
transition on the public pages and shows all `data-reveal` content at rest.
|
||
- **Touch targets:** every interactive element at least 44×44px.
|
||
- **RTL/LTR:** logical properties throughout; arrows and the progress rule's origin mirror.
|
||
|
||
## Design Decisions & Rationale
|
||
|
||
- **Markazi Text + IBM Plex Sans Arabic** — Amiri's calligraphic ligatures broke in large
|
||
headlines; Markazi is an editorial naskh with a matching Latin serif (brand.md asks for a serif
|
||
headline); Plex Arabic is highly legible at body size. Two families total.
|
||
- **Balance over olive photography, no drawn tatreez** — Naser rejected the cross-stitch drawings
|
||
as "tech stuff"; the balance is the firm's name and reads as law at a glance.
|
||
- **Article numbering** — frames the firm's content in the language of a statute; costs nothing.
|
||
- **Text-only article cards** — posts have no image field (code-fit check); no images are promised.
|
||
- **Copy limited to what the code backs** — no availability or response-time claims; booking copy
|
||
is drawn from the existing lang strings.
|
||
- **Public-only scope** — the dashboards share global tokens and `.btn` classes; the redesign is
|
||
scoped to the public layout so no dashboard screen changes.
|
||
- **Compact booking on the home page** — the client approved a one-screen form; it reuses the same
|
||
component and rules, so the backend does not change.
|
||
|
||
## Open Questions
|
||
|
||
None blocking. Rulings taken for the build (ledger, 2026-10-31):
|
||
|
||
1. **Photography** — the mockup's four Unsplash photos (olive tree, embroidery hoop, olives, hills)
|
||
ship as the production images; the Unsplash licence allows commercial use without attribution.
|
||
The client may replace them later with their own.
|
||
2. **Home day strip** — the next 14 calendar days with an available slot; `/booking` keeps the
|
||
month calendar.
|
||
3. **Pages the mockup does not show** (about, articles, booking page, success, legal) — composed
|
||
from the homepage's components with their existing content; no new sections.
|
||
4. **Auth pages** — type and controls only; composition unchanged.
|
||
|
||
---
|
||
|
||
# Part B — Dashboards, emails and the Nablus form (pre-redesign record)
|
||
|
||
|
||
Retrospective documentation of the design system as it is currently **built and live**. This
|
||
is not a proposal — it describes what shipped, so a dev/QA agent picking up a new task can match
|
||
existing patterns rather than invent new ones. Synthesized from `docs/brand.md`, epics 9/10/12/13/14/16,
|
||
and the root `CLAUDE.md`.
|
||
|
||
## Brand colors (current — source of truth: `docs/brand.md`)
|
||
|
||
The palette has changed twice since the original PRD. **Use the values below**, from `docs/brand.md`,
|
||
for any new work — they are the most recent and match what Epic 12 shipped.
|
||
|
||
| Token | Hex | Usage |
|
||
|---|---|---|
|
||
| Primary — Dark Forest Green | `#2D3624` | Header/footer backgrounds |
|
||
| CTA — Warm Gold | `#A68966` | Buttons, links, accents |
|
||
| Background — Warm Cream | `#F4F1EA` | Main page background |
|
||
| Text — Forest Green | `#2D322A` | Headings, body text |
|
||
| Card — Pure White | `#FFFFFF` | Card backgrounds |
|
||
| Active — Olive Green | `#4A5D23` | Active states, language toggle |
|
||
| Primary Light | `#3D4634` | Primary hover state |
|
||
| CTA Hover | `#8A7555` | Button hover state |
|
||
| CTA Light | `#C4A882` | Light accents |
|
||
| Active Hover | `#5A7030` | Active-state hover |
|
||
| Deep Black | `#1A1A1A` | Logo artwork, headline emphasis |
|
||
|
||
**History (do not use these for new work, they are superseded):**
|
||
- Epic 1 / PRD / Epic 9 originally specified **Navy Blue `#0A1F44` + Gold `#D4AF37`**.
|
||
- Epic 10 ("Brand Color Refresh") replaced that with **Charcoal `#4A4A42` + Warm Gray `#C9C4BA`**.
|
||
- Epic 12 ("Branding Refresh") replaced *that* with the **Dark Forest Green + Warm Gold** palette
|
||
above, which is what `docs/brand.md` documents and what is currently live. Epic 9's own stories
|
||
(button/form/card specs) still reference the original Navy+Gold hex values — treat those as
|
||
structural/pattern guidance only (border-radius, padding, states) and substitute the current
|
||
hex values from the table above.
|
||
|
||
## Typography
|
||
|
||
- **Arabic:** Cairo or Tajawal (Google Fonts), weights Light 300 / Regular 400 / SemiBold 600 / Bold 700.
|
||
- **English:** Montserrat or Lato, same weight set.
|
||
- `docs/brand.md` additionally suggests a serif (Playfair Display / Libre Baskerville) for the
|
||
organization name/headline treatment and an italic serif for taglines, with a sans body
|
||
(Source Sans Pro / Open Sans / Inter) — this is brand-identity guidance; the app itself
|
||
implements the Cairo/Tajawal + Montserrat/Lato pairing from Epic 9.2.
|
||
- **Hierarchy:** H1 Bold 2.5rem/40px · H2 SemiBold 2rem/32px · H3 SemiBold 1.5rem/24px ·
|
||
Body Regular 1rem/16px · Small Regular 0.875rem/14px.
|
||
- Line height: 1.6 body, 1.3 headings.
|
||
- `font-display: swap`, critical fonts preloaded, loaded via Google Fonts + Tailwind `font-family`
|
||
config with `@font-face` fallbacks.
|
||
|
||
## Layout system
|
||
|
||
- Container max-width: **1200px**.
|
||
- Card padding: 24px; card border-radius: 8px; card shadow `0 2px 8px rgba(0,0,0,0.1)`, with a
|
||
subtle lift + shadow increase on hover.
|
||
- Button padding 12px 24px, border-radius 6px; input/textarea padding 12px 16px, border-radius 6px,
|
||
textarea min-height 120px.
|
||
- **Breakpoints:** Mobile `<576px` · Tablet `576–991px` · Desktop `992–1199px` · Large Desktop `>=1200px`.
|
||
Mobile-first: single-column + collapsible sections on mobile, two-column/collapsible sidebar on
|
||
tablet, full multi-column grid + sidebars on desktop. Touch targets >= 44px. Tables scroll
|
||
horizontally on small screens; calendar and forms must remain usable on mobile.
|
||
- Transitions are short and subtle: button hover 150ms ease, card hover 200ms ease, modal
|
||
open/close 200ms, all under 300ms — and must respect `prefers-reduced-motion` (no auto-playing
|
||
animations).
|
||
|
||
## Component patterns (Epic 9 stories 9.4–9.7)
|
||
|
||
- **Buttons:** primary = CTA-gold background / dark text, hover to CTA-hover; secondary =
|
||
transparent with gold border + gold text, hover fills gold with dark text; disabled = flat gray
|
||
background/text, no hover, `cursor: not-allowed`; danger = solid red (`#E74C3C`) with white text.
|
||
Loading state shows a spinner; all buttons have a visible focus state. Built by extending Flux UI's
|
||
button component with Tailwind component classes.
|
||
- **Forms:** inputs/textareas/selects share consistent border + radius, gold border on focus;
|
||
selects and checkboxes/radios are custom-styled (not native) with gold accents on
|
||
checked/selected state; labels are SemiBold with a `*` required indicator; errors show a red
|
||
border plus a message rendered directly below the field. Built on Flux UI form components with
|
||
explicit RTL alignment handling.
|
||
- **Cards/containers:** off-white/cream background, optional gold top/left accent border for
|
||
featured or important cards; dashboard stat cards add a gold-accented icon, a large number, and
|
||
a trend indicator; list cards use consistent item spacing and clear click targets. Implemented as
|
||
a reusable Blade card component with variant props.
|
||
- **Navigation/footer:** fixed-top nav, brand-primary background, logo left on desktop / centered
|
||
on mobile, gold link text with an active-link indicator, styled language toggle, and a full-width
|
||
slide/dropdown mobile menu (Alpine.js) with 44px+ touch targets. Footer shares the brand-primary
|
||
background and carries logo + firm info, contact details, Terms/Privacy links, and copyright; it
|
||
stays pinned to the bottom of short pages (sticky footer).
|
||
|
||
## Bilingual / RTL–LTR rules
|
||
|
||
- Arabic is primary and renders RTL; English is secondary, LTR. `dir="rtl"` is set on `<html>` for
|
||
Arabic; layout uses Tailwind's RTL support and logical properties (`start`/`end` rather than
|
||
`left`/`right`) so components flip automatically rather than needing per-direction overrides.
|
||
- In RTL: text aligns right, navigation mirrors (logo moves to the right), form labels sit on the
|
||
right, directional icons/arrows flip, and margins/paddings swap sides.
|
||
- Switching language must not break layout — calendars and tables must render correctly in both
|
||
directions, and every component is expected to be tested in both.
|
||
- All user-facing strings live in language files (`ar`/`en`); there is no hardcoded UI copy.
|
||
|
||
## Key page layouts
|
||
|
||
- **Home** (Epic 14): Navigation → Hero (tagline + intro + CTA buttons, Warm Cream background) →
|
||
About (Huda Armouche's photo + bio) → Services (4 cards: Consultations, Representation,
|
||
Litigation, Contracts) → Values (6 icon cards) → Latest Posts (3 most recent published posts,
|
||
pulled live via `Post::where('status','published')->latest()->take(3)->get()`, with a "View All"
|
||
link) → Footer (phone + address + links). Sections alternate between Warm Cream and White
|
||
backgrounds; CTAs use Warm Gold.
|
||
- **About Us** (Epic 16, new page at `/about`): Navigation → Hero (title + identity statement) →
|
||
Vision & Mission (three-fold: For Itself / For Society / For Diaspora, card layout) → Values
|
||
(6 core values: Integrity, Justice, Knowledge, Women's Empowerment, Professionalism, Social
|
||
Innovation) → Goals (7 goals, numbered/scannable) → Legal Services (grouped by category:
|
||
consultations, litigation, family law, business services) → Footer. (A Scholarship Aspiration
|
||
section was built under this epic but removed from `/about` entirely on 2026-01-11 at Naser's
|
||
request — do not re-add without confirming; see `docs/tasks/16-6.md`.)
|
||
- **Auth pages** (Epic 13 — login, forgot/reset password, confirm-password, email verify): the
|
||
2FA challenge page exists in code but is currently dormant — 2FA has been disabled in production
|
||
since 2026-01-17 (see root `CLAUDE.md` Authentication section). Split-screen layout. Left panel: Dark Forest Green (`#2D3624`) background with the
|
||
LIBRA logo centered. Right panel: Warm Cream background with a subtle SVG botanical/geometric
|
||
background pattern (low-opacity brand colors) behind the form. On mobile, only the form side
|
||
shows, with the logo displayed above it. The language toggle's `light` variant was darkened
|
||
(`text-primary` instead of `text-body/70`) specifically for visibility on this light panel,
|
||
without changing its appearance on the dark public-nav background.
|
||
- **Dashboards** (Epics 6 admin / 7 client): standard authenticated-app shell — nav/sidebar +
|
||
content area using the same card, button, and table components as the rest of the app. Admin
|
||
dashboard emphasizes stat cards, Chart.js analytics, and data tables with export actions; client
|
||
dashboard is read-mostly (consultations, timelines, profile) with a single primary action
|
||
(submit new booking) and a booking-limit indicator.
|
||
|
||
## Accessibility (WCAG AA — Epic 9.10)
|
||
|
||
- Color contrast: body text >= 4.5:1, large text (18px+ bold or 24px+ regular) >= 3:1, UI elements
|
||
(buttons, borders, icons) >= 3:1. The gold-on-dark-forest-green and text-on-cream combinations
|
||
must be verified against these ratios whenever a color changes.
|
||
- Focus indicators must be visible (a gold outline), never conveyed by color change alone.
|
||
- Full keyboard navigation: every interactive element reachable, logical tab order, a skip-to-main-content
|
||
link.
|
||
- Screen readers: correct heading hierarchy (h1 > h2 > h3), alt text on all images, ARIA labels
|
||
where needed, form labels programmatically associated with their fields.
|
||
- Motion: respect `prefers-reduced-motion`; no auto-playing animations.
|