SYM Maroc

Overview

SYM Maroc is a high-octane coming-soon landing page for a motorcycle brand entering the Moroccan market. The design embodies 'Automotive Minimalism'—a stripped-down aesthetic that prioritizes drama and urgency through bold contrast: deep blacks (#0a0a0a) paired with a signature fire-engine red (#e82e1e) that commands attention like a showroom's neon glow. The brand personality is confident, aspirational, and action-oriented, speaking directly to riders who crave performance and style. The UI evokes the precision of a motorcycle showroom—clean lines, dramatic lighting, and a countdown timer that builds anticipation. Voice: direct, energetic, never apologetic. Example sentence: 'Une nouvelle expérience se prépare—un modèle au caractère affirmé, conçu pour repousser les limites du quotidien.'

Colors

The color system is built on a high-contrast dark-light polarity optimized for impact and readability. Primary (#e82e1e) is the brand's signature red—used exclusively on call-to-action buttons (submit, social hovers), the countdown timer accent, and interactive focus states. It appears sparingly but dominates visual hierarchy through saturation and placement. Surface (#0a0a0a) is near-pure black, creating maximum contrast with white text (#ffffff) and ensuring legibility over the photographic background. The surface stack ranges from surface-dim (#050505) for the deepest backgrounds to surface-container-highest (#2d2d2d) for elevated UI elements like dropdown panels. Secondary (#ffffff) serves as the dominant text color and social icon background, while secondary-container (#e9ecef) provid

Typography

The type system pairs Source Sans Pro (headings) with Maven Pro (body), creating a hierarchy that balances geometric precision with approachable warmth. Display (56px, 700 weight, -0.02em tracking) is reserved for hero moments and brand statements. Headline-lg (39px, 700 weight) anchors major sections like 'Prochainement chez SYM Maroc.' Body-md (17px, 400 weight, 26px line-height) is the workhorse for descriptive copy, set at 1.6 line-height for breathing room over the dark background. Label-md (14px, 700 weight, 0.05em tracking, uppercase) is applied to buttons and form labels, creating visual distinction through weight and letter-spacing. All headings use 700 weight to convey confidence and authority. On small labels over busy backgrounds (like counter boxes), apply text-shadow: 0 2px 4

Layout

The layout uses a fixed-width container (768px max-width) centered on the viewport, creating a focused, gallery-like presentation that works across devices. The page employs a single-column flex layout with vertical centering, ensuring the hero content (title, countdown, description) occupies the visual center. Spacing follows a semantic scale: lg (40px) separates major sections (hero from footer), md (24px) creates breathing room between the countdown and descriptive text, and sm (12px) is used for internal component padding. The background image (1024×536px) is set to cover and center, with a 40% opacity overlay (#0a0a0a) ensuring text legibility. The inner-wrap uses min-height: 100vh with flex-grow: 1 to push the footer to the bottom. The counter grid uses calc(25% - 22px) per box with

Elevation & Depth

Depth is achieved through layered opacity and subtle shadows rather than dramatic drop-shadows. The background image sits at z-index -1 with a 40% dark overlay (background-color: #0a0a0a, opacity: 0.4), creating the base layer. Counter boxes and form inputs use rgba(0, 0, 0, 0.5) backgrounds to float above the background image, creating a semi-transparent glass effect without blur. Dropdown panels (custom select) use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to separate from the page. The background-overlay has z-index: 10, sitting above the background image but below all content (z-index: aut

Shapes

The design employs 'Automotive Sharpness'—a philosophy that balances precision with approachability through selective rounding. Buttons and form inputs use border-radius: 5px (0.3125rem), a subtle curve that feels modern without being soft. Counter boxes also use 5px rounding, creating visual consistency across interactive elements. Dropdown panels use 4px rounding for a slightly tighter, more technical feel. The form's email input and submit button use asymmetric rounding (5px on outer corners, 0px on inner edges where they join) to create a unified, pill-like appearance. Social icon circles

Components

Action Elements Buttons use a two-state system: button-primary (background: #e82e1e, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 5px, font-weight: 700, letter-spacing: 0.05em, text-transform: uppercase) and button-primary-hover (background: #ff5a47, transition: background-color 300ms linear). The submit button in the form uses the same styling but with asymmetric border-radius (0 5px 5px 0) and margin-left: -7px to join seamlessly with the email input. Social links are circular (width: 32px, height: 32px, border-radius: 50%, background: #ffffff, color: #0a0a0a) with a hover state that transitions to primary red (#e82e1e) with a 300ms animation.

Containers & Surfaces Counter boxes use background: rgba(0, 0, 0, 0.5), border-radius: 5px, padding: 24px 12px, and m

Do's and Don'ts

**Do**

• Do use primary red (#e82e1e) exclusively on CTAs, hovers, and focus states—never on backgrounds or body text.
• Do maintain the 40% dark overlay on background images to ensure white text legibility (contrast ratio ≥ 4.5:1).
• Do apply 48px minimum height to all interactive elements (buttons, inputs, social links) for touch accessibility.
• Do use 5px border-radius on buttons, inputs, and counter boxes for consistency; avoid mixing radii across component families.
• Do set line-height: 1.6 on body copy and 26px on 17px body-md text for readability over dark backgrounds.
• Do use transition: background-color 300ms linear on all hover states for smooth, predictable interactions.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels over busy backgrounds (e.g., counter labels).

**Don't**

• Don't use primary red on surfaces, backgrounds, or non-interactive elements—it must remain a high-contrast accent.
• Don't apply border-radius > 5px on buttons or form inputs; the automotive aesthetic demands precision, not softness.
• Don't set text color to pure white (#ffffff) on light backgrounds; use on-surface (#ffffff) only over dark surfaces.
• Don't mix font families within a single component (e.g., don't use Source Sans Pro for body text; stick to Maven Pro).
• Don't remove box-shadow: inset 0 0 0 0 !important from inputs—it's required to override browser defaults.
• Don't use opacity < 0.4 on overlay backgrounds; text legibility must be maintained at all times.
• Don't animate counter numbers with transitions; they should update instantly to reflect real-time countdown changes.