WayYourChild Design System

Colour

One confident navy for brand and primary actions, a single gold accent for emphasis and highlights, warm neutrals for surfaces, and four semantic colours for status. Gold is for accents only — never large fills or body text.

Navy — primary ramp

Primary = navy-700 #1B2A4A. Hover/pressed = navy-800. Tints 50–100 for selected rows, soft chips, focus rings.

Gold — accent ramp

Accent = gold-400 #C8A24B. Use sparingly: active indicators, highlights, one accent CTA, document seals.

Neutrals (warm grey)

Semantic

Each semantic colour has a soft background (≈12–15% tint on white) for pills, alerts and table cells, and the solid tone for text/icons. Always pair colour with a label or icon — never colour alone.

Typography

Fraunces (serif) carries headings for an established, classic feel; Inter handles all body, UI and dense tables; a monospace is used for numeric/transactional data (amounts, IDs, dates).

Spacing & layout

A 4-point spacing scale governs all padding, gaps and margins. The app uses a fixed left sidebar (248px) + fluid content, a 12-column content grid, and a max content width of 1240px.

Radius & elevation

Soft, consistent corners and three restrained elevation levels keep the interface calm. Cards and inputs use md radius; pills are fully rounded; overlays get the largest shadow.

Iconography

A single line-icon family — 1.7px stroke, rounded joins, 20px (24px touch) default, 16px inline. Monochrome only; never multicolour. Icons always pair with a label except in universally understood controls.

Motion & z-index

Sidebar navigation

Fixed left rail. The live app lists all 22 modules flat with a peach/orange active state; the system keeps the same modules but re-skins the active item to navy with a gold edge, and groups them for scannability. Active = lighter fill + bold; counts sit on actionable items.

Top bar

Persistent app header: global search, the academic-year / session selector (a defining control in this product), notifications with a count badge, and the profile menu.

Page header

Every list/detail page opens with a breadcrumb, a serif title, optional status, and a right-aligned primary action.

Buttons

One primary action per view. Primary = navy; the gold accent button is reserved for a single emphasis action (e.g. "Send reminder"). Secondary, ghost and danger cover the rest.

Text inputs & fields

Consistent field anatomy: label (with required marker), control, and help/error text. Focus shows a navy ring; errors turn the border red with a message.

Selection controls

Single & multi-select (react-select), checkboxes, radios, toggle switches, tag input and file upload — the controls used across admission, fee and bulk-action forms.

Tables & data grid

The workhorse of the admin app. Tables carry a toolbar (search, filters, density, bulk actions, export), sortable headers, status pills, row hover, selection, and pagination. Large lists use the server-paginated data grid.

Cards & KPIs

Surfaces for grouped content. KPI cards lead dashboards with a label, a serif value and a trend delta.

Badges & status

A fixed vocabulary of status pills keeps meaning consistent across fees, attendance, results and accounts. Always colour + label, never colour alone.

Avatars & chips

Tabs & accordion

Progress & timeline

Tooltip & popover

Toasts

Transient confirmations (react-toastify), top-right, auto-dismiss. Coloured left border + icon. Never use a toast for errors that require a decision — use a dialog.

Dialogs & modals

Modals for focused tasks (forms) and confirm dialogs for destructive/irreversible actions (sweetalert pattern). Backdrop dims the page; primary action on the right; destructive actions use the danger button and name the consequence.

Alerts & banners

Loaders & skeletons

Empty & error states

Breadcrumb

Pagination

Stepper / wizard

Multi-step flows such as new admission and bulk upload.

Menus & filters

Charts & data viz

Built on ApexCharts. Series use the navy ramp with gold reserved for the highlighted/most-recent value. Keep charts simple, labelled and paired with a KPI.

Pattern · Dashboard

A faithful re-skin of the live SubAdmin home screen — subscription banner, "learn" strip + academic-year selector, school-info card with live clock, the five KPI stat-cards, calendar, attendance chart, and the School-Fee / Birthdays / Activity widgets — all in Navy & Gold.

Pattern · List / management page

The template behind nearly every module (Students, Teachers, Fee, Transport…). Breadcrumb + academic-year selector, an action-button row, a filter card of dropdowns + Reset, a table toolbar (page-size · search · Actions), the navy-header table with avatars, and a footer pager. In the live app the action buttons are multicolour (orange / red / green); the system keeps the same roles but uses the unified button hierarchy.

Pattern · Form / tabbed module page

Modelled on the live Fee → Payment screen: breadcrumb + year selector, a secondary action (Report), sub-tabs within the module (Add Payment · Payment List · Cheque Payment · Bulk Payment), then fields organised into grouped cards (labels with required markers, selects, disabled prefilled fields) and a single primary action. Admission and Add-Student forms follow the same anatomy.

Pattern · Student profile header

Pattern · Fee receipt

A printable/emailable document. Navy header with the gold logo seal, monospace amounts, dashed dividers, bold total — must read as official.

Pattern · Marksheet / report card

Pattern · ID card

Pattern · Attendance grid

A month view using the semantic colours. Present / Absent / Leave / Holiday read instantly.

Pattern · Timetable grid

Pattern · Bulk upload

Stepper + template download + dropzone + validation summary — used for student, fee and attendance imports.

Formats & data

Voice & tone

Plain, calm, respectful — written for parents and busy school staff, multilingual-ready. Say what happened in human terms; never expose system jargon.

Accessibility

Design tokens

The system is variable-driven, so it can be dropped into the React panel as CSS custom properties (or exported to JSON / a Tailwind config). Core tokens:

--primary: #1B2A4A;   --primary-700: #142036;   --on-primary: #FFFFFF;
--accent:  #C8A24B;   --accent-600:  #B08C3A;   --on-accent:  #241B07;
--bg: #FBFAF7;  --surface: #FFFFFF;  --surface-2: #F5F2EB;  --border: #E7E3DA;
--text: #1A1F2B;  --muted: #5B6473;
--success: #2E7D5B;  --warning: #B7791F;  --error: #B23A3A;  --info: #2A5B8C;
--radius: 10px;  --radius-lg: 16px;  --radius-pill: 999px;
--font-head: "Fraunces", serif;   --font-body: "Inter", sans-serif;
--shadow-sm: 0 1px 2px rgba(20,25,40,.06);   --space: 8px (4-pt scale);

Download the full token set, ready for the React panel: