ECU Tuning Portal — Style Guide

Detay

The definitive visual language reference for the ECU Tuning Portal landing page and admin/customer panels. Every new component must follow these patterns.

1. Color Palette

Brand Colors

Token	Hex	Usage
`brand-black`	`#060a10`	Page background (dark mode)
`brand-dark`	`#0a111a`	Card backgrounds, secondary surfaces
`brand-panel`	`#0e1724`	Panel backgrounds, elevated surfaces
`brand-red`	`#e8192c`	Primary accent — CTAs, borders, highlights
`brand-redDark`	`#c41520`	Hover state for red elements
`brand-redGlow`	`#ff8a94`	Text glow effect (dark mode)
`brand-teal`	`#00c8a0`	Secondary accent — success, positive values, “our” column
`brand-tealGlow`	`#00ffd5`	Teal glow/pulse effects
`brand-amber`	`#f5a623`	Warning, partial/limited indicators, star ratings
`brand-blue`	`#4499ff`	Info, links, tertiary accent

Semantic Usage

Positive / “Us”: brand-teal — checkmarks, our product column, success states
Negative / “Them”: brand-red — competitor prices, crosses, vendor lock-in
Partial / Limited: brand-amber — partial support indicators
Neutral data: gray-400 to gray-600 — descriptions, metadata
Backgrounds: Always brand-black → brand-dark → brand-panel (darkest to lightest)
Borders: rgba(255,255,255,0.04) to rgba(255,255,255,0.1) — never solid white

Dark Mode

The landing page is dark mode by default — <html> always has class dark. Light mode exists but dark is primary. Design for dark first.

/* Dark mode background gradient */
background: linear-gradient(to bottom, rgb(6,10,16), rgb(10,17,26));

2. Typography

Font Stack

Font	CSS Variable	Tailwind Class	Usage
Inter	`--font-inter`	`font-sans`	Body text, paragraphs, descriptions
Chakra Petch	`--font-chakra-petch`	`font-tech`	Headings, titles, labels, buttons
JetBrains Mono	`--font-jetbrains-mono`	`font-mono` / `font-data`	Code, metadata, badges, stats, prices

Weights

Inter: 400 (regular), 500 (medium), 600 (semibold)
Chakra Petch: 400 (regular), 700 (bold) — only these two loaded
JetBrains Mono: 400 (regular), 500 (medium) — only these two loaded

Heading Hierarchy

h1: Chakra Petch · 700 · 36-48px · uppercase · tracking-widest · white
h2: Chakra Petch · 700 · 28-36px · uppercase · tracking-wide · white
h3: Chakra Petch · 600-700 · 18-22px · uppercase · tracking-wide · white
h4: Chakra Petch · 600 · 14-16px · uppercase · tracking-wide · #ccc

All headings: font-family: var(--font-chakra-petch); text-transform: uppercase; letter-spacing: 0.05em;

Data / Metadata Text

Prices, stats, technical info: always JetBrains Mono.

Prices: JetBrains Mono · 700 · 18-36px · brand-teal or brand-red
Stats: JetBrains Mono · 500 · 14px · gray-400
Badges: JetBrains Mono · 700 · 10-11px · uppercase · tracking-wider

Section Headers Pattern

Every section follows this structure:

<!-- 1. Category badge -->
<div class="badge-industrial bg-brand-red/10 text-brand-red">
  // SECTION_NAME
</div>

<!-- 2. Title -->
<h2 class="font-tech text-3xl md:text-4xl font-bold uppercase tracking-widest text-white">
  Section Title
</h2>

<!-- 3. Subtitle -->
<p class="font-mono text-sm text-gray-500">
  Brief description in monospace
</p>

3. Component Patterns

Card — Industrial (primary card style)

- clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%)
- border-top: 2px solid brand-red (or brand-teal, brand-amber, brand-blue)
- background: brand-dark (dark mode), white (light mode)
- border: 1px solid rgba(255,255,255,0.055)
- Chamfer diagonal: 14px bottom-right cut
- Hover: border-red/50, shadow-red/10, -translate-y-1

CSS class: .tech-card or .card-accent / .card-accent-teal

Button — Industrial

- clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 0%)
- font: Chakra Petch · 700 · uppercase · tracking-widest
- Primary: bg-brand-red, text-white
- Hover: bg-brand-redDark, box-shadow brand-red/30
- No border-radius — sharp corners only

CSS class: .btn-industrial

Badge — Industrial

- clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%)
- font: JetBrains Mono · 700 · 10px · uppercase · tracking-wider
- Padding: 4px 14px
- Colors: bg-brand-red text-white (primary), bg-brand-red/10 text-brand-red (ghost)

CSS class: .badge-industrial

Glass Panel

- bg: white/60 (light) or brand-panel/60 (dark)
- backdrop-blur: md (12px)
- border: 1px solid gray-200 (light) or white/10 (dark)
- clip-path: 12px bottom-right chamfer

CSS class: .glass-panel

4. Clip-Path — The Signature

The chamfered/cut corner is the defining visual element of the ECU Tuning Portal design. Every card, button, badge, and panel uses clip-path instead of border-radius.

Standard Cuts

/* Card — 14px bottom-right */
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);

/* Button — 8px top-left + bottom-right */
clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 0%);

/* Badge — 5px parallelogram */
clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);

/* Hexagonal banner */
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);

Rules

NEVER use border-radius on interactive elements — always clip-path
Cards: 14px cut
Buttons: 8px cut
Badges: 5px parallelogram
The only exception: avatar circles (border-radius: 50%)

5. Icons

Library: Lucide React

import { Check, X, Globe, Code, CreditCard } from 'lucide-react';

Style Rules

Size: w-4 h-4 (inline), w-5 h-5 (list items), w-6 h-6 (feature icons), w-8 h-8 (hero/large)
Stroke width: 2 (default), 2.5 (check/cross emphasis)
Color: Inherit from parent or explicit: text-brand-red, text-brand-teal, text-gray-400
NO emoji icons — always use Lucide SVGs for consistency

Check / Cross Pattern

// Positive
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-teal/15">
  <Check className="w-3.5 h-3.5 text-brand-teal" strokeWidth={2.5} />
</span>

// Negative
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/4">
  <X className="w-3.5 h-3.5 text-gray-600" strokeWidth={2.5} />
</span>

// Partial
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-amber/10">
  <Minus className="w-3.5 h-3.5 text-brand-amber" strokeWidth={2.5} />
</span>

6. Spacing & Layout

Section Spacing

- Between sections: py-24 (96px)
- Section max-width: max-w-7xl (1280px)
- Section padding: px-4 sm:px-6 lg:px-8
- Section header margin-bottom: mb-16 (64px)

Grid Patterns

- 2 columns: grid grid-cols-1 md:grid-cols-2 gap-6
- 3 columns: grid grid-cols-1 md:grid-cols-3 gap-6
- 4 columns: grid grid-cols-2 md:grid-cols-4 gap-4
- Feature grid: grid-cols-2 md:grid-cols-4 (with mobile expand)

Card Internal Spacing

- Padding: p-6 (24px) standard, p-8 (32px) large cards
- Title to content: mb-4 (16px)
- Between list items: space-y-3 (12px)

7. Animations

Allowed Animations

Animation	Duration	Usage
`fadeInUp`	0.8s ease-out	Section entrance (scroll-triggered)
`pulse-slow`	4s cubic-bezier	Subtle glow effects
`float`	6s ease-in-out	Decorative floating elements
`marquee`	30s linear	Brand logo carousel

Hover Transitions

transition: all 0.22s ease-out;  /* Cards — fast, snappy */
transition: all 0.3s ease;       /* Buttons, interactive */
transition: colors 0.2s;         /* Color-only changes */

Rules

No bounce/spring animations — industrial = precise, mechanical
No parallax — keep it flat and fast
prefers-reduced-motion: all animations respect this (except marquee which just slows down)
Hero section has its own animation system (glitch, scan, blink) — don’t reuse elsewhere

8. Backgrounds & Textures

Grid Pattern (optional, used sparingly)

background-image:
  linear-gradient(to right, #1a2a3d 1px, transparent 1px),
  linear-gradient(to bottom, #1a2a3d 1px, transparent 1px);
background-size: 40px 40px;

Spotlight Gradient

background-image: radial-gradient(
  circle at 50% -20%,
  rgba(255,255,255,0.05) 0%,
  rgba(255,255,255,0) 50%
);

Glow Effects

/* Red glow (dark mode) */
text-shadow: 0 0 10px rgba(232, 25, 44, 0.5);
box-shadow: 0 0 20px rgba(232, 25, 44, 0.15);

/* Teal glow (dark mode) */
text-shadow: 0 0 20px rgba(0, 200, 160, 0.3);
box-shadow: 0 0 30px rgba(0, 200, 160, 0.1);

9. Tables

Comparison Table Pattern

- No border-radius — use straight edges
- Header: Chakra Petch · uppercase · tracking-wide
- Rows: alternating transparent / white/2 background
- Hover: bg white/2 (subtle)
- Portal column: teal/3 background + teal/8 side borders
- Separator: 1px solid white/4 between rows

Data Table Pattern (admin/lists)

- Header: bg brand-red, text white, uppercase, small font
- Rows: hover bg brand-red/8
- Even rows: bg white/3
- Borders: 1px solid white/10

10. Forms

Input Fields

- Background: brand-dark (dark), white (light)
- Border: 1px solid white/10 (dark), gray-200 (light)
- Focus: border-brand-red, ring-1 ring-brand-red/30
- Font: Inter 400 14px
- Padding: px-4 py-3
- No border-radius — use clip-path if needed, or 0

Star Rating Picker

- 5 stars inline
- Inactive: text-gray-600
- Active: text-brand-amber
- Hover: scale-110 transition

11. Responsive Breakpoints

Following Tailwind defaults:

Breakpoint	Min Width	Usage
`sm`	640px	Small adjustments
`md`	768px	Tablet — grid switches from 1 to 2+ cols
`lg`	1024px	Desktop — full layouts
`xl`	1280px	Large desktop — max-width containers

Mobile-First Rules

Cards: full-width stacked on mobile, grid on desktop
Tables: card-swiper on mobile, full table on desktop
Section padding: px-4 mobile, px-6 tablet, px-8 desktop
Font sizes: scale down 1 step on mobile (e.g., 36px → 28px)

12. Logo Usage

Primary Logo

File: /public/assets/images/logo/ecu.svg
Favicon: /public/assets/images/logo/favicon.svg
Use ecu.svg in headers, comparison tables, and anywhere the brand is referenced visually
Never stretch or distort — maintain aspect ratio
Minimum clear space: 8px on all sides

Country Flags

SVG files in /public/assets/images/flag/{code}.svg
Available: en, de, nl, fr, es, it, pl, ru, tr, ar, pt, ro, cs, hu, el, he, hr, sr, bs, sq, mk, lt, se, sk, il, gr, ba
Usage: language selector, testimonial cards, country indicators
For countries without SVG flag: use emoji flag (e.g., 🇦🇪)

13. Content Rules (from memory)

NO “lisans” (license) — say “purchase” or “product”
NO technology stack mentions (Next.js, TypeScript, Tailwind)
NO “AI-powered development”
NO “dedicated server included” — it’s NOT included
NO “66,000+ Vehicle Database” — it’s API access, not DB delivery
YES “Source Code” — full ownership, modify freely
YES PayPal in every payment mention (Stripe, PayPal, SEPA, Bank Transfer)
YES “24 languages” (not 16)
YES “10+ years experience” (since 2016)

14. File Naming Conventions

Components

PascalCase.tsx          — React components
PascalCase.test.tsx     — Component tests (if any)

Assets

kebab-case.svg          — SVG icons and logos
kebab-case.avif         — Optimized images (preferred)
kebab-case.webp         — Fallback images

i18n Keys

PascalCase namespace    — ComparisonTable, TrustGuarantee
snake_case keys         — pricing_model, source_code
nested objects          — data.our.pricing_model