Design components

Logo

The header uses the wordmark without the tagline, which is too small to read at that size. The footer carries the full logo reversed out of black. The green is never recoloured.

Colour

Black, green and grey are sampled from the logo. The logo green is too light for text on white (2.7:1), so it fills buttons with black text, and a darker green does text duty.

• Ink

  #000000 / --ink

  Type, the departures board, the footer. The logo’s black.

  21:1 on white

• Green

  #2AB55C / --green

  Button fills, the line, rings, open status. Black text on it, never white.

  7.9:1 with black text

• Green ink

  #1B7A3F / --green-ink

  Green when it has to be text or an icon on white.

  5.4:1 on white

• Green pale

  #E6F5EB / --green-pale

  Today’s hours, the current model in a comparison.

  Black text 18.6:1

• Grey

  #969696 / --grey

  The logo’s tagline grey. Secondary text on black only.

  7.1:1 on black

• Slate

  #545955 / --slate

  Secondary text on white and glass.

  7.2:1 on white

• Glass

  #EEF1EF / --glass

  The pale surface for product stages and alternate sections.

  Black text 18.5:1

• Rule

  #D5D9D6 / --rule

  Hairlines between rows. Form borders use the darker #8A8F8B.

  Decorative

• Danger

  #B3261E / --danger

  Errors only.

  6.5:1 on white

Type

Alexandria throughout, from Google Fonts. Large sizes are set light, and smaller headings step up in weight as they shrink. No uppercase labels, no letter-spaced eyebrows.

Space and shape

Spacing moves in 4px steps. Corners are square, like the dashes in the logo. Circles are kept for things that roll or mark a point: hotspot rings, stops on the line, status dots and radio buttons.

• --sp-1 4px
• --sp-2 8px
• --sp-3 12px
• --sp-4 16px
• --sp-5 24px
• --sp-6 32px
• --sp-7 48px
• --sp-8 64px
• --sp-9 96px
• --sp-10 128px

Buttons and links

One primary button per group. Labels say exactly what happens: “Book a service”, not “Submit”. Hover turns a button black; focus adds a 3px outline.

Forms

Labels sit above fields. Optional fields say so; required ones don’t need a star. Errors appear above the field, in words that say how to fix them, and in a summary at the top of the form.

The line

The green dashes either side of “Bike Station” become a track. It’s only used for things that really happen in order: building a bike, hiring one, walking here. The last stop is filled. As a full-width platform, it’s the line bikes and headlines stand on.

1. Book a day ahead

   Online, at least the day before.

2. Collect

   Between 10am and 2:30pm.

3. Return

   Any time, to the stands outside.

Hotspots

Rings on a side view of a bike, each marking a part the customer chooses. Select one to open its note; Escape or a second press closes it. On phones the note opens at the bottom of the screen. Without JavaScript the notes are listed under the photo.

• Your colour

  Your colour

  Up to 35 frame colours, powder-coated in Velo de Ville’s own plant.

  Close
• Battery

  Battery

  Fully integrated and removable, so you can charge it indoors. From 540 Wh, up to 1050 Wh with a range extender.

  Close
• Motor

  Motor

  Bosch Smart System drive. We’ll match it to the hills you ride and what you carry.

  Close

Prices and tables

Prices are information, so they’re set in tables and lists with tabular figures, never in marketing cards. “from” is set smaller and grey.

Departures board

A black band of rows under the home page hero, styled like a station departures board. It keeps the everyday services, and whether we’re open, one click from the top.