We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 04 · Performance automotive marque · Concept

Kestrane

Measured speed.

Kestrane, a fictional performance marque. Cars drawn as single-weight line drawings, specifications read as gauges, and a layered configurator.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Kestrane site on a wide display: Measured speed.
Opening screen, desktop

01 The brief

The brand
Kestrane is a fictional performance-car marque with three models. Its tagline is "Measured speed."
The problem
Enthusiasts want to choose a model, build a configuration and send an enquiry. The site makes the cars legible through numbers and a configurator, with an example price clearly labelled.

02 The idea

Specifications that read as gauges

What you see
Models are compared side by side, and arc and bar gauges fill on a shared scale so the lead model is visible at a glance. The configurator changes colour, wheels, interior and package on a line drawing of the car, then shows a final specification. A toggle switches km/h and mph.
How it works
The cars are original inline SVG drawn in one stroke weight, with the configurator options as separate SVG layers rather than 3D or photographs. Gauges are SVG and CSS, and every gauge value is also printed as text.

03 Design system

  • Ground#0E0F11 groundNear-black page.
  • Ink#E6E8EA inkPrimary text and the linework of the car.
  • Amber#FFB000 accentThe single accent: primary action, focus ring, lit gauges and the one detail on the drawing.
  • Muted#A7ADB4 mutedCaptions, labels, dimension lines and ticks.
  • Panel #15171A. Inputs, configurator summary and the title-block plate.
  • Control #868D95. Borders of interactive controls.
  • Line #2B2E33. Hairline dividers only.
Type
  • Sofia Sans Extra Condensed
    Weight 800 for headings and every instrument figure.
  • Martian Mono
    Running text, labels and controls, with tabular figures.
Edges
Square corners everywhere. Only the colour dots are round. Hairline rules divide sections, rows and tables, and a title block and dimension lines borrow from drawing sheets.
Motion
Gauges and drawing strokes animate in over 900ms, only for visitors who have not asked for reduced motion.

04 Process

  1. Pre-production

    Pre-production set the thesis (cars as drawings, performance as gauges), decided against photography, and fixed the routes and the three fictional models with consistent figures.

  2. Build

    The site was built from a written plan, with the vehicle drawing language and the configurator layers first, then gauges, comparison and the enquiry page.

  3. Finish review

    Impeccable finish-review rounds compared the finished build with the direction and design system.

  4. Fixes

    Material findings were fixed and the pages checked again.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Original SVG vehicle drawings
  • Layered SVG configurator
  • Arc and bar gauges
  • km/h and mph toggle
Access
  • Skip links and labelled sections
  • Colour, unit and model choices are native radio inputs
  • Gauge values are always printed as text as well
  • Form errors use aria-invalid and aria-describedby, with status regions
  • Visible 2px amber focus outline; draw and sweep animations are off under reduced motion
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Kestrane is a fictional marque and a concept project by Artlogic. The cars, figures and prices are invented, the price is an example, and nothing can be ordered.

The enquiry form is a demo; nothing is sent or stored.

There is no photography. Free car photographs nearly always show real brands, badges or recognisable models, which would imply an affiliation that does not exist. Every car and instrument graphic is original SVG drawn for this concept and labelled as an illustration.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.