Principles
The design pillars, philosophy, and standards that guide every decision in the FRAYT Design System.
Design Pillars
These principles guide every decision in the FRAYT Design System — from the smallest token to the largest layout. They are not aspirational; they are operational. Every component, color, and interaction should trace back to one of these pillars.
Fast
Speed is not just a feature — it's the promise. Every interaction should feel snappy. Transitions under 250ms. No unnecessary loading states. In logistics, every second matters — our UI should reflect that urgency.
Precise
Nothing is arbitrary. Typography follows a strict scale. Spacing uses a 4px grid. Colors map to specific semantic meanings. Precision builds trust — our users manage real-world logistics operations.
Adaptive
Every surface supports light and dark mode. Components respond to context — operator vs driver. Layouts flex across breakpoints from mobile to widescreen dashboards. Adaptation is not an afterthought.
Scalable
Design tokens are the foundation. Every value is a CSS custom property consumable by Tailwind. Components compose predictably. The system works for a single button and a full enterprise dashboard.
Design Philosophy
Our design language is modern, tech-forward, futuristic, and precise. We build for professionals who move fast and expect clarity. Every pixel serves a purpose.
- Clean surfaces with generous whitespace — let content breathe
- Sharp, confident typography that communicates hierarchy instantly
- Depth through subtle shadow and glass effects — never gratuitous
- Motion that accelerates understanding, never decorates
- Information density balanced with visual clarity
Inspirations
Tech
| Reference | Why |
|---|---|
| Apple | Spatial clarity and premium surfaces |
| Linear | Density + precision in complex UIs |
| Vercel | Developer experience and documentation |
| Raycast | Speed + keyboard-first interaction |
Freight
| Reference | Why |
|---|---|
| Flexport | Data visualization and logistics dashboards |
| Mothership | Modern logistics aesthetic |
| Warp | Tech-forward freight logistics with clean, data-driven UI |
Brand Voice
FRAYT speaks with authority and clarity. We respect our users' time and intelligence.
| Do | Don't |
|---|---|
| Direct: "FRAYT delivers." | Indirect: "We're excited to help with delivery." |
| Precise: "Same-day delivery" | Vague: "Fast shipping" |
| Confident: "FRAYT delivers." | Hesitant: "FRAYT may be able to help." |
Human tone: Speak to drivers and shippers as professionals. Respect their expertise. Avoid jargon that doesn't serve them. Be helpful without being patronizing.
Dual-Context System
FRAYT serves two distinct audiences through two product surfaces. Each context has its own primary color identity, and these must never be mixed.
- Shipper Orange (#FF9500) — The primary color for all operator-facing and shipper-facing surfaces. Used for CTAs, active states, focus rings, navigation highlights, and key interactive elements.
- Driver Blue (#0066FF) — Reserved exclusively for driver-facing UI surfaces. Used for status indicators, driver app navigation, and driver-specific features.
Never mix contexts. Shipper Orange and Driver Blue define separate product contexts and must never appear together as competing primary colors. If both audiences appear on the same surface (e.g., an admin dashboard), use neutral colors and reserve the context color for clear, role-specific indicators.
Accessibility
Accessibility is not a feature — it is a baseline requirement. Every component in this system must meet the following standards.
| Requirement | Standard |
|---|---|
| Contrast | Minimum 4.5:1 contrast ratio for all text (WCAG AA) |
| Focus | Visible focus rings on all interactive elements via :focus-visible |
| ARIA | Labels required on all icon-only buttons and non-text controls |
| Motion | Respect prefers-reduced-motion — disable or reduce all animations |
| Semantics | Semantic HTML throughout — correct heading hierarchy, landmark regions, lists |