Jinst Mandal Driving School

Overview

Jinst Mandal is a Mongolian driving school brand that combines professional automotive education with a modern, accessible digital presence. The design system embraces 'Dark-Mode Professionalism'—a contemporary aesthetic that pairs a deep navy-charcoal foundation (rgb(26, 31, 46)) with vibrant, high-saturation accent colors (primary blue #006fee, success green #10b981, warning amber #f59e0b) to convey trust, expertise, and forward momentum. The interface uses glassmorphic surfaces (backdrop-filter: blur(20px), rgba(255, 255, 255, 0.08)) layered over the dark background, creating depth and visual separation without harsh shadows. This aesthetic evokes clarity and precision—qualities essential to driver training—while remaining approachable and modern. The brand personality is authoritative yet warm: instructors are portrayed as mentors, not gatekeepers. The tone is direct, encouraging, and grounded in practical outcomes. Example sentence: "Өдөр бүр бодит замын дадлага—шалгалтанд бэлтгэрээр хослуулсан хөтөлбөр." (Daily real-road practice combined with exam preparation.)

Colors

The color system is built on a dark-mode foundation with strategic accent injection. Surface colors range from near-black (surface-dim: #0f1419) through mid-tone containers (surface-container: #1a1f2e) to lighter accents (surface-bright: #2a3142), creating a legible hierarchy without harsh contrast. On-surface text is set to #e8ecf0 (light gray-blue) for comfortable reading on dark backgrounds; on-surface-variant (#c4c7cb) is used for secondary labels and hints. Primary (#006fee) is the dominant action color—applied to all CTAs, links, and interactive focus states—and is paired with on-primary white (#ffffff) for maximum contrast. Secondary (#10b981, a vibrant emerald) reinforces success states, certifications, and positive outcomes; tertiary (#f59e0b, a warm amber) highlights warnings, im

Typography

The typography system is anchored in Nunito, a geometric sans-serif that conveys modern professionalism while remaining highly legible at all sizes. Display (60px, weight 900, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines and brand statements; headline-lg (40px, weight 700) anchors major section titles; headline-md (28px, weight 700) breaks up content into digestible chunks. Body-lg (18px, weight 400, line-height 28px) is used for introductory paragraphs and descriptive text; body-md (16px, weight 400) is the default paragraph size. Label-md (14px, weight 700, letter-spacing 0.01em) is applied to button text, form labels, and navigation items; label-sm (12px, weight 500, letter-spacing 0.05em) is used for badges, hints, and secondary metadata. All text over busy

Layout

The page layout uses a fluid 12-column grid constrained to a max-width of 1280px, centered with mx-auto. The hero section spans the full width at lg breakpoints and uses a 2-column split (1.1fr / 0.9fr) to balance text content on the left with imagery on the right. Section spacing follows a semantic scale: lg (40px) separates major sections (gap-16 in Tailwind = 4rem = 64px at the component level), md (24px) is the default padding inside cards and containers, and sm (12px) is used for internal element spacing. The gutter (24px) is applied as horizontal padding on mobile (p-4 = 1rem) and increases to p-8 (2rem) on tablet and p-12 (3rem) on desktop. Cards and containers use rounded-xl (1.5rem / 24px) for a modern, approachable feel; buttons use rounded-lg (1rem / 16px) for slightly sharper d

Elevation & Depth

Depth in this system is achieved through glassmorphism and layered transparency rather than traditional drop shadows. Level 1 (Base): The background is a solid dark surface (#1a1f2e) with no shadow. Level 2 (Standard Card): backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.08), border: 1px solid rgba(255, 255, 255, 0.12). This creates a frosted-glass effect that appears to float above the background. Level 3 (Elevated/Modals): backdrop-filter: blur(40px), background: rgba(255, 255, 255, 0.12), border: 1px solid rgba(255, 255, 255, 0.16). The increased blur and opacity make this la

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precision alignment to convey both approachability and professionalism. Buttons use rounded-lg (1rem / 16px), creating a modern, slightly softened rectangle that feels contemporary without being overly playful. Cards and containers use rounded-xl (1.5rem / 24px), a more generous radius that softens the edges and invites interaction. Input fields use rounded-DEFAULT (0.5rem / 8px), a subtle rounding that maintains visual hierarchy and distinguishes inputs from larger containers. Badges and pills use rounded-full (9999px) to

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses backgroundColor: rgb(0, 111, 238), textColor: white, padding: 14px 24px, rounded-lg, and fontWeight: 700. On hover, the background darkens to #0052d4 and the element scales to 0.98 (transform: scale(0.98)) to provide tactile feedback. Secondary buttons (button-secondary) use a transparent background with a 1px border at {colors.outline} and the same text color as primary; on hover, they fill with surface-container-high. All buttons use a transition-transform-colors-opacity with motion-reduce:transition-none to respect user preferences. The CTA "Нэвтрэх" (Login) in the header is a primary button at 14px font-size with 14px 24px padding, creating a compact but prominent call-to-action.

Do's and Don'ts

**Do**

• Do use primary (#006fee) exclusively for interactive elements (buttons, links, focus states) to maintain a clear visual hierarchy and guide user attention to actionable items.
• Do apply glassmorphic surfaces (backdrop-filter: blur(20px), rgba(255, 255, 255, 0.08)) consistently across all cards and containers to create visual cohesion and depth without relying on shadows.
• Do pair dark backgrounds with high-saturation accent colors (green #10b981, amber #f59e0b, rose #f43f5e) to create visual interest and signal different states (success, warning, error) without increasing cognitive load.
• Do use Nunito at weights 400, 700, and 900 only; avoid intermediate weights to maintain typographic clarity and reduce font file size.
• Do apply negative letter-spacing (-0.02em to -0.04em) to headlines to tighten their visual mass and create impact; use neutral letter-spacing (0em) for body text to maintain readability.

**Don't**

• Don't use drop shadows (box-shadow with large blur and spread) on cards or buttons; instead, rely on glassmorphic borders and backdrop-filter to create depth.
• Don't apply primary color (#006fee) to non-interactive elements (backgrounds, text, decorative elements); reserve it exclusively for CTAs and interactive states to avoid confusion.
• Don't mix rounded-full (9999px) with rounded-xl (1.5rem) on the same component; use rounded-full only for badges and pills, and rounded-xl for cards and containers.
• Don't use system fonts (system-ui, -apple-system, sans-serif); always specify Nunito via @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap") to ensure brand consistency across all devices.
• Don't apply text-shadow to body text; use it only on text overlaid on images or busy backgrounds (text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4)) to maintain readability without degrading the design.