KAS 2.0 — Design System
01 — Color System

The Palette

Matched exactly to the KAS document design system. All values via CSS custom properties — never hardcode hex directly in components.

Backgrounds
Background#1A1A1A--bg
Surface#222222--surface
Surface 2#272727--surface2
Brand
Accent / Crimson#C0392B--accent
Text
Text#C8C4BF--text
Muted#6E6B67--muted
Borders
Borderrgba(255,255,255,0.07)--border
Border Midrgba(255,255,255,0.12)--border-mid
Semantic — App Only
Success#22C55E--success
Warning#F59E0B--warning
Danger#EF4444--danger
Info#4A90D9--info
02 — Typography

Type System

Four typefaces. Bebas Neue for labels and stamps. Playfair Display for section titles. DM Sans for body and UI copy. IBM Plex Mono for IDs, timestamps, and serial numbers.

Labels / Stamps
Bebas Neue
All-caps, 0.4em tracking
Crimson — var(--accent)
SECTION LABEL — 01
SHOOT TRACKER
AED 84,500
KAS 2.0
Section Titles
Playfair Display 700
em → italic crimson
var(--text)
Shoot Tracker
Post Production
Invoice Generator
Body / UI Copy
DM Sans 300–500
Size: 13–15px
var(--text) or var(--muted)
Primary body — used for content, descriptions, and all UI labels.
Secondary body — supporting details, metadata, card copy, field hints.
FORM LABEL — SMALL UPPERCASE
Monospace
IBM Plex Mono 400
Size: 12–13px
IDs, dates, serial nos
SID-2026-021
CID-127 · SUP-013 · FL-004
2026-05-02 · 14:32 GST · S/N 00421
03 — Buttons

Interaction Controls

Four button variants. Icon buttons use SVG icons — white with border outline by default, crimson on hover. No emojis anywhere in the system.

Primary — Single main action per view
Secondary — Common repeated actions
Ghost — Low-emphasis, tertiary
Danger — Destructive, always confirm
Icon Buttons — White icon + border · Hover → Crimson
04 — Form Elements

Inputs & Controls

Crimson focus ring on active inputs. Custom select dropdowns replace native <select> — animated panel, crimson left-rail hover, Option B filled-state border. Checkboxes: grey unchecked, crimson filled. Error and success states use semantic colors.

Will be used as the SID display name
Please provide the full address
ID is available
CUSTOM SELECT — COMPONENT STATES
Placeholder
Filled (has value)
Al Haramain Perfumes
DMG Events
Marriott Al Jaddaf
Open panel
Select type…
Photography
Videography
Social Media Content
05 — Status Badges

States & Labels

Color-coded status system. All badge and role text in uppercase. Pill shape for statuses, flat for roles and tags.

Shoot Status
CONFIRMED PENDING ACTIVE CLOSED VOIDED
Priority
HIGH MEDIUM LOW
Payment / Finance
PAID PENDING OVERDUE
Gear
AVAILABLE CHECKED OUT NEEDS REPAIR TRANSFERRED
Roles
ADMIN BUSINESS MANAGER VIDEOGRAPHER PHOTOGRAPHER VIDEO EDITOR STILL EDITOR SOCIAL MEDIA MANAGER FREELANCER
06 — Data Cards

Stat Cards & List Rows

Stat cards for Dashboard and Finance. SVG icons in tinted containers — no emojis. List rows for Shoots, Clients, Inventory, and Team. Hover reveals action buttons.

+3
21
Shoots this month
+12%
AED 84K
Revenue month-to-date
—
587
Inventory items
2 on leave
9
Team members active
Upcoming Shoots
AH
Al Haramain — Campaign Day 2
Tomorrow · Dubai Studio · Ashton, Maitreya
CONFIRMED SID-021
DM
DMG Events — Jewellery Arabia
Fri 9 May · Abu Dhabi National Exhibition · Full crew
PENDING SID-022
MR
Marriott Al Jaddaf — Annual Gala
Sat 17 May · Al Jaddaf Ballroom · Ashton, Daniel
ACTIVE SID-023
07 — Kanban Board

Post Production Board

Used in Post Production, Tasks, and Field Transfer. All date/status indicators use SVG icons — no emojis. Cards draggable between columns.

PENDING
2
Video SID-019
Al Haramain Campaign — 30s hero cut + social versions
D
Due today
Photos SID-020
DMG Jewellery Arabia — 200 stills selects + retouching
C
May 12
IN PROGRESS
1
Reel SID-018 v2
Marriott Gala — vertical reel for Instagram Reels
A
D
May 8
DELIVERED
1
Video SID-016 Approved
Pure Bhangra — event highlight reel
D
Apr 28
09 — Document Cards

Card Patterns

Inherited from the document design system. Card number in white, smaller — the title is the anchor. Playfair Display at 22px for legibility.

01
Invoice
Dual-Entity VAT Logic
KAF invoices carry 5% UAE VAT automatically. KAS invoices carry none. Template selects based on billing entity.
02
GPS
Mandatory Location Tracking
GPS gates certain app functions during work hours. No opt-out. Admin sees a flag for any member with location disabled.
03
Archive
Post Production Deadline
Archive deadline at 12:00 AM triggers a countdown. Overdue cards escalate to Admin with a red banner alert.
10 — Date Picker

Date Selection

Custom calendar replaces the native browser date input. Click the field to open — navigate months with the arrow buttons, click any date to select. Fully themed to match the design system.

Interactive — Click to open
MAY 2026
SUN
MON
TUE
WED
THU
FRI
SAT
Reference — Always open
MAY 2026
SUN
MON
TUE
WED
THU
FRI
SAT
Crimson dot = today  ·  Crimson fill = selected  ·  Faded = other month