Netbar

Overview

Netbar is Iran's comprehensive digital freight logistics platform, serving shippers, drivers, and logistics operators through an intelligent marketplace for domestic and international cargo transport. The design system embodies a "Trust-Driven Minimalism" aesthetic—combining the reliability and clarity of institutional design with the warmth and accessibility of modern digital platforms. The visual language prioritizes clarity over decoration, using a vibrant green primary (#238a40) as the signature accent for trust and growth, paired with a clean white canvas and supporting blues and oranges for secondary actions and status indicators. The brand personality is professional yet approachable: precise, efficient, and deeply rooted in solving real logistics challenges. Voice example: "Track your shipment in real-time, from pickup to delivery—complete transparency, zero surprises."

Colors

The color system is built on a foundation of trust and clarity. Primary (#238a40) is the brand's signature green, used exclusively for primary CTAs (buttons, links, active states) and key interactive elements; it conveys growth, reliability, and the forward momentum of logistics. Secondary (#1864ab) is a professional blue reserved for informational elements, secondary actions, and data visualization; it provides a calm, institutional counterpoint. Tertiary (#e28900) is a warm orange used sparingly for warnings, highlights, and tertiary actions—drawing attention without overwhelming. Error (#f21616) is a vivid red for destructive actions and critical alerts. The surface stack (white #ffffff down to #e0e0e0) provides a clean, minimal backdrop; on-surface text is pure black (#000000) for maxi

Typography

Dana is the exclusive typeface across all scales, chosen for its clarity in Persian and Latin scripts and its modern, geometric proportions. The type hierarchy is built on weight contrast rather than size alone: display (60px, 800 weight) commands attention for hero headlines; headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 700 weight) organizes subsections; title-lg (20px, 600 weight) labels cards and components. Body text uses 16px (body-md, 400 weight) for standard content and 18px (body-lg, 400 weight) for emphasis. Labels are set at 14px (label-md, 600 weight) for buttons and form fields, with a tighter 0.01em letter-spacing to enhance legibility at small sizes. All headlines use negative letter-spacing (-0.01em to -0.02em) to tighten the visual mass and conv

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive structure from mobile (single column) to desktop (full 12-column grid). The gutter is consistently 24px, creating breathing room between sections. White-space is treated as a first-class design element: section separation uses lg spacing (40px) vertically, while internal card padding uses md spacing (24px). The container-max-width of 1280px ensures content never stretches uncomfortably on ultra-wide displays. Margins follow a semantic scale: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for card padding and section gutters, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. This rhythm creates a natural visual hierarchy without

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness. The elevation system uses three distinct levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for raised text and minor UI elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and standard containers, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements, dropdowns, and elevated modals. Cards use md elevation by default; on hover, they transition to lg elevation with a 200ms ease-in-out timing function, creating a subtle lift effect. Dropdowns and select panels use md elevation with a 1px solid border at rg

Shapes

The shape philosophy is "Functional Softness"—rounded corners are used consistently but conservatively to balance approachability with professionalism. Buttons and form inputs use 4px (DEFAULT) border-radius, creating a subtle softness without appearing playful. Cards and larger containers use 8px (lg) border-radius, providing a more pronounced but still refined appearance. Badges and pills use full (9999px) border-radius for a fully rounded aesthetic. The select dropdown panel uses 4px border-radius to match input fields, maintaining visual cohesion. No element uses sharp 0px corners (except

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#238a40) background with white text, 44px height, 12px vertical and 22px horizontal padding, and 4px border-radius. On hover, the background shifts to #1f5e2e (a darker shade of primary) with a 200ms ease-in-out transition. Focus states add a 3px rgba(35, 138, 64, 0.1) glow. Secondary buttons use a transparent background with a 1px solid primary border and primary text; on hover, they fill with {colors.primary-container} (#effbf2) while maintaining the border. Tertiary buttons (ghost style) use transparent backgrounds with primary text and no border; on hover, they gain a subtle {colors.surface-container-high} background. All buttons use Dana 600 weight at 14px (label-md).

Containe

Do's and Don'ts

**Do**

• Do use primary green (#238a40) exclusively for primary CTAs and trust-building elements—never dilute it with secondary uses.
• Do maintain 24px gutters and 40px section spacing to create a calm, organized visual rhythm that reflects logistics precision.
• Do apply Dana 600 weight to all interactive labels (buttons, form fields) to ensure they command attention and feel actionable.
• Do use md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) as the default card shadow; reserve lg elevation for hover and modal states.
• Do pair primary green with white backgrounds and black text for maximum contrast and accessibility (WCAG AAA compliant).

**Don't**

• Don't use primary green for decorative elements or backgrounds—reserve it for interactive, trust-critical moments.
• Don't mix border-radius values arbitrarily; stick to the 4px (buttons/inputs) → 8px (cards) → full (badges) progression.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black (#000000) in shadows; this breaks the light, airy aesthetic.
• Don't use secondary blue (#1864ab) or tertiary orange (#e28900) as primary CTAs; they are supporting accents only.
• Don't set body text smaller than 16px or larger than 18px; this range is optimized for Dana's proportions and Persian/Latin legibility.