HelloCar design system · v0.1 do akceptacji

Trusted, premium, within reach.

The building blocks of hellocar.pl. Everything on this page renders with the same CSS as the live site, so what you approve here is exactly what customers see.

Principles

Light and calm

Light gray page, white surfaces, 1px gray borders. Borders do the structuring; shadows are rare and soft.

Trust like a bank

Navy carries the brand: headings, navigation, footer. Clear figures, tabular numbers, no visual noise around prices.

Premium, not exclusive

Lime is the spark: every action button, selected states in a light lime tint, accents and the logo dot. Car photos sit on a quiet studio stage.

Logo

Use the component <Logo tone="navy|white|lime" /> in code. SVG files for other uses are in /public/brand/.

Navy on white and light gray. Default.

White, lime dot on navy: header, footer, hero.

Lime on navy, for campaigns and social.

Suggested rules (to confirm)

Minimum height 20 px on screen, 6 mm in print.
Clear space on all sides: at least the height of the lowercase "e".
Never lime on white or light gray: it disappears (1.2:1).

Files

Colour

Lime

HEX: #d3fa13
RGB: 211 · 250 · 19
CMYK: 16 · 0 · 92 · 0
Pantone: 381 C
Token: lime-400

Navy

HEX: #17283c
RGB: 23 · 40 · 60
CMYK: 85 · 63 · 35 · 22
Pantone: 289 C
Token: navy-900

Navy

Secondary brand colour. Text, headings, header, hero, footer, selected states.

#f3f7fc

1.1:1

100

#e6eef8

1.2:1

200

#ccdbed

1.4:1

300

#aac0db

1.9:1

400

#7e9bbd

2.9:1

500

#57779d

4.6:1 AA

600

#3d5d82

6.8:1 AA

700

#2a4768

9.5:1 AA

800

#1f3752

12.2:1 AA

900BRAND

#17283c

14.9:1 AA

950

#0c1928

17.7:1 AA

Lime

Primary brand colour. CTA fills, accents and the logo dot. Never as text on light backgrounds.

#f6ffe1

1.0:1

100

#ecfcc0

1.1:1

200

#dff993

1.2:1

300

#d1f259

1.3:1

400BRAND

#d3fa13

1.2:1

500

#bfdb04

1.6:1

600

#99aa04

2.6:1

700

#737c01

4.6:1 AA

800

#585e00

7.0:1 AA

900

#494c00

9.1:1 AA

950

#2a2b00

14.5:1 AA

Gray

Cool neutrals tinted toward navy. Page background, borders, secondary text.

#f4f6f9

1.1:1

100

#ebeef3

1.2:1

200

#d9dee7

1.4:1

300

#c2ccd8

1.6:1

400

#99a3ae

2.6:1

500

#747d88

4.2:1 AA large

600

#5b646f

6.0:1 AA

700

#464e58

8.4:1 AA

800

#2c343d

12.6:1 AA

900

#1a212a

16.2:1 AA

950

#0b121a

18.8:1 AA

Status

Success

Confirmations, "available", lowest price

success-700 / success-50

Warning

Limited stock, things to check

warning-700 / warning-50

Danger

Form errors, failures

danger-700 / danger-50

Info

Neutral notices, tips

navy-700 / navy-50

Semantic names in code

inknavy-900Body text and headings

papergray-50Page background

linegray-200Default 1px border

mutedgray-600Secondary text

gosuccess-700Availability, success

Navy text on lime (12.4:1) for primary buttons and badges.
Lime as text, icons and lines on navy surfaces.
Lime for every action button; light lime (lime-50 / lime-100) for selected and filled states.
White cards with 1px gray-200 borders on the gray-50 page.

Don't

Lime text or thin lime icons on white or gray (1.2:1).
Large lime backgrounds on white pages.
Lime for success messages: use the green status colour.
Gray-500 or lighter for text people need to read.

Typography

Roboto (variable, self-hosted, Polish characters included), 16 px base. Bold for headings, semibold for labels and buttons, regular for reading. Prices use tabular figures so digits line up.

Display XL

60 / 1.08, bold, -0.025em

Home hero only