TabehGPS Tracking

Overview

TabehGPS Tracking is a fleet and asset management platform designed for logistics operators, transportation companies, and enterprise asset managers who require real-time visibility into vehicle and equipment location, status, and performance metrics. The design system embodies a "Data-Centric Clarity" aesthetic: a refined, neutral canvas (light grays and whites at #f5f6f7, #ffffff) punctuated by a vibrant, action-oriented green primary (#39c261) that signals operational health and real-time activity. The interface prioritizes information density and scanability over decorative elements, using a restrained color palette (green for success/active, blue #1687e8 for secondary actions, red #ef526d for alerts) to guide users through complex tracking workflows without cognitive overload.

The brand voice is professional, precise, and reassuring—never alarmist, always factual. Sentences are direct and metric-driven: "Vehicle 47 is 3.2 km from destination, ETA 14:32." The typography system pairs Josefin Sans for headlines (conveying modern efficiency) with system fonts for body copy (ensuring legibility at all scales). The design philosophy rejects skeuomorphism and excessive ornamentation; every visual element serves a functional purpose, whether highlighting a KPI, indicating state change, or enabling interaction.

Colors

The color system is built on a neutral foundation with strategic accent deployment. **Surface Stack**: The background and container hierarchy uses cool, light neutrals—surface (#f5f6f7) as the primary canvas, surface-container-lowest (#f9f9f9) for elevated cards, and surface-container-highest (#dfe5ea) for interactive hover states. This creates visual separation without harsh contrast, supporting extended viewing of data-dense dashboards. **Primary Role**: Green (#39c261) is the signature accent, applied exclusively to CTAs ("Go to login" button at 10px 20px, border-radius 8px), active states, success badges, and progress indicators. It conveys operational readiness and positive status. **Secondary & Tertiary**: Blue (#1687e8) supports secondary actions and informational elements (e.g., me

Typography

The typography system balances modern efficiency with legibility across tracking dashboards and mobile devices. **Display (96px, 700 weight, Josefin Sans)** is reserved for error pages and major page titles (e.g., the "404" on the not-found page). **Headline-lg (40px, 600 weight)** anchors section headers and modal titles. **Headline-md (28px, 600 weight)** organizes subsections. **Title-lg (20px, 600 weight, Quicksand)** is used for card headers and metric labels, introducing a secondary typeface that adds visual rhythm without sacrificing clarity. **Body-lg (18px, 400 weight)** is deployed for descriptive copy and longer-form content. **Body-md (16px, 400 weight)** is the workhorse for standard UI copy, form labels, and table content. **Label-md (14px, 600 weight, Quicksand)** is applied

Layout

The layout system uses a 12-column grid with a max-width of 1280px, supporting both desktop dashboards and responsive mobile views. The gutter spacing is 24px, creating breathing room between columns while maintaining information density. **Spacing Scale**: xs (4px) for micro-adjustments within components, sm (12px) for internal padding on buttons and small cards, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for page-level spacing. The container max-width of 1280px accommodates multi-panel tracking interfaces (e.g., map + sidebar + metrics) without excessive horizontal scrolling. **White-space Philosophy**: The design avoids cramped layouts; cards are separated by at least md spacing (24px), and sections by lg spacing (40px). This cre

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness on data-dense screens. **Level 1 (Base)**: No shadow; surface elements sit flush on the background (#f5f6f7). **Level 2 (Standard Cards)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, modals, and dropdowns. This creates subtle separation without drawing attention away from content. **Level 3 (Elevated/Hover)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) applied on card hover and modal focus states, signaling interactivity. **Metric Cards**: A 1px solid border at {colors.outline-variant} (#c4c4c4)

Shapes

The shape system follows a "Functional Minimalism" philosophy: rounded corners are applied purposefully to signal interactivity and reduce visual harshness, but sharp edges are retained where appropriate to maintain clarity and data hierarchy. **Buttons**: border-radius: 8px (1rem) creates approachable, clickable targets without excessive rounding. The "Go to login" button exemplifies this—8px radius at 10px 20px padding. **Cards & Containers**: border-radius: 12px (1.5rem) for metric cards and data panels, providing visual softness while maintaining a structured appearance. **Input Fields**:

Components

Action Elements **Button-Primary** (#39c261, 10px 20px padding, 8px border-radius, 40px height, 600 font-weight) is the primary CTA for login, form submission, and critical actions. On hover, the background shifts to #32bd68 with a soft green shadow (0 3px 8px rgba(57, 194, 97, 0.2)) to signal interactivity. On active/pressed, the background darkens to #2a9d4a, providing tactile feedback. **Button-Secondary** uses a transparent background with a 1px outline border (#c3ccd9) and blue text (#1687e8), supporting secondary workflows like "Cancel" or "Learn More." On hover, the background fills with secondary-container (#e2f2ff) and the border becomes blue (#1687e8), creating a clear state transition. All buttons use label-md typography (14px, 600 weight) and transition: background-color 20

Do's and Don'ts

**Do**

• Do use primary green (#39c261) exclusively for CTAs, success states, and active indicators—it is the brand's signature and must remain distinctive.
• Do maintain at least 24px (md spacing) between major sections and 12px (sm spacing) within component groups to prevent visual cramping on data-dense dashboards.
• Do apply the shadow system consistently: 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards, 0 8px 24px rgba(0, 0, 0, 0.12) for elevated states—never invent custom shadows.
• Do use Josefin Sans for headlines (h1, h2, h3) and Quicksand for title-lg labels to create visual rhythm; reserve system fonts for body copy to ensure legibility.
• Do apply focus states with a 3px glow (box-shadow: 0 0 0 3px rgba(57, 194, 97, 0.1)) on all interactive elements for accessibility and clarity.
• Do use the outline (#c3ccd9) for subtle borders on cards and inputs; avoid pure black (#000000) or pure white (#ffffff) borders.

**Don't**

• Don't use green (#39c261) for backgrounds or large surface areas—it must remain an accent to maintain visual hierarchy and prevent fatigue on extended viewing.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12) or use colored shadows (e.g., green glows on buttons)—the system relies on subtle, neutral depth.
• Don't mix rounded corners arbitrarily; buttons use 8px, cards use 12px, inputs use 4px, and badges use full—consistency is critical for visual coherence.
• Don't reduce spacing below sm (12px) between interactive elements or below md (24px) between sections—the layout depends on breathing room to remain scannable.
• Don't use secondary colors (blue #1687e8, red #ef526d) for primary CTAs or dominant UI elements—they are supporting accents only.
• Don't apply text-shadow or text-stroke to body copy; reserve text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) only for small labels (label-sm) over busy backgrounds.