Bentley Continental GT
Available2019 · 21,400 km · 1 owner
₹2.85 Cr
Design system · Phase 1
Light on form
Northlight's approved direction, built from the real components, tokens and photography. Every movement on this page has a reduced-motion version and a fallback for browsers without support: use the switches above to see them.
Brand
Two bays of a sawtooth roof
The mark is the roof that gives the business its name: two equal bays with the slit of light between them. Equal heights, so it never reads as a signal icon; whole-pixel edges at 16px. The wordmark is live text.
Northlight
Northlight
Colour
A monochrome stage, one signal
Paint colour comes from the cars. The interface is graphite and concrete; amber marks a state, a choice or keyboard focus, and nothing else.
The stage
- night#0a0b0dThe stage: page background
- night-raised#111317Header, panels and cards on the stage
- graphite#1a1d22Inputs and chips on dark
- line#2a2e35Hairlines on dark (decorative)
- control#646b74Control borders on dark (3:1 and up)
- steel#8f96a0Secondary text on dark
- chalk#f2f3f0Text on dark; light buttons
Dusk chapters (the daylight chapters, darkened)
- daylight#2c2f34Graphite: the dusk chapter surface, a step up from night
- daylight-raised#34383eRaised surfaces in daylight
- day-line#4a4f57Hairlines in daylight (decorative)
- day-control#8f96a0Control borders in daylight (3:1 and up)
- ink#0e1013Label on light buttons (in dusk chapters the ink role becomes dusk-type)
- ink-muted#b3b8bfSecondary text in dusk chapters
- dusk-type#f2f3f0Type in dusk chapters (what text-ink renders there)
Signal
- amber#e9a23bThe only accent: reserved, the active filter, keyboard focus. Under about 2% of a screen; never buttons or areas
Approved pairings (tested)
| Pairing | Sample | Ratio | Needs |
|---|---|---|---|
| Text on the stage | Aa | 17.68:1 | 4.5:1 |
| Text on panels | Aa | 16.69:1 | 4.5:1 |
| Text in inputs and chips | Aa | 15.17:1 | 4.5:1 |
| Secondary text on the stage | Aa | 6.60:1 | 4.5:1 |
| Secondary text on panels | Aa | 6.23:1 | 4.5:1 |
| Secondary text in chips | Aa | 5.66:1 | 4.5:1 |
| Status text (reserved) | Aa | 9.09:1 | 4.5:1 |
| Status text on cards | Aa | 8.59:1 | 4.5:1 |
| Focus ring on chips | 7.80:1 | 3:1 | |
| Control borders on the stage | 3.65:1 | 3:1 | |
| Control borders on panels | 3.45:1 | 3:1 | |
| Control borders on chips | 3.14:1 | 3:1 | |
| Light button label | Aa | 17.11:1 | 4.5:1 |
| Text at dusk | Aa | 12.06:1 | 4.5:1 |
| Text on dusk panels | Aa | 10.58:1 | 4.5:1 |
| Status text at dusk | Aa | 6.20:1 | 4.5:1 |
| Secondary text at dusk | Aa | 6.73:1 | 4.5:1 |
| Secondary text on dusk panels | Aa | 5.91:1 | 4.5:1 |
| Ink button label | Aa | 17.11:1 | 4.5:1 |
| Ink button and chosen-option label at dusk (the roles swap) | Aa | 17.68:1 | 4.5:1 |
| Control borders at dusk | 4.50:1 | 3:1 | |
| Control borders on dusk panels | 3.95:1 | 3:1 | |
| Focus ring at dusk | 12.06:1 | 3:1 |
Type
One family, three widths
Mona Sans: expanded for model names and the brand line, 110 for headings, 100 for text, condensed for data. No serif anywhere.
- Display · width 125
- Porsche 911 Carrera 4
- Display, small · width 125
- Seen in true light.
- Heading · width 110
- Every car, inspected in even light
- Subheading · width 110
- Condition, history, disclosures
- Lede · width 100
- Viewings are by appointment, with the car prepared and lit.
- Navigation · width 125
- Collection · Sell or consign · Visit
- Label · width 85
- Before a car is listed
- Data · width 78, tabular
- 2018 · 24,800 km · MH-02 · 7-speed PDK
- Prices · tabular, Indian grouping
- ₹1,25,00,000Full₹1.25 CrCompact, in cards₹68.5 lakhUnder a crore
Layout
Full bleed, few elements, a strict grid
A 12-column grid with full-bleed breakouts; one car per screen at hero scale; generous space between chapters.
- Page width
- 90rem (1440px)
- Gutter
- 16px on phones to 56px
- Between chapters
- 96px on phones to 200px
Photography
Every car on the same line
One grade across every shoot; each lead photograph cropped so the lowest tyre sits at 84% of the frame at a consistent scale, the floor and the top falling into the stage.
The ground line
The amber line marks 84% on this page only. Presets: 70% of the width for three-quarter views, 50% head-on. Where a photograph doesn't reach the card's edge, it's feathered into the stage.
Composed for the phone
The grade, across shoots
Daylight chapters
The rules every photograph passes
- Right-hand drive: no left-hand-drive interior, ever.
- No readable plate: the Northlight plate cover instead.
- No foreign landmarks, snow or obviously foreign scenery.
- No other dealer's or venue's branding: cropped out or retouched.
- Only the car's own badges: no manufacturer venues or press images.
- Real photographs of unidentifiable cars: no renders, no recognisable real cars or people.
- Dark or neutral settings for listings; daytime locations for daylight chapters.
- Detail and preparation images are hands-only.
Motion
Light, wipe, glide, walkaround
The approved vocabulary, and only that. One large movement at a time; nothing loops; text is never hidden at rest; scrolling is always native.
Lights up
Lower Parel, Mumbai
Seen in true light.
The photograph is painted at once; the darkness is an overlay, so the largest paint is never delayed. Reduced motion: lit from the first frame.
Light sweep and the lineup
Hover, focus or tap a car: a band of light crosses it once. Change a filter: the cards glide to their new places.
5 cars
Porsche 911 Carrera 4
Available2018 · 24,800 km · 1 owner
₹1.25 Cr
Mercedes-AMG G 63
Reserved2023 · 9,800 km · 1 owner
₹2.95 Cr
Rolls-Royce Ghost
Available2014 · 31,500 km · 2 owners
₹2.40 Cr
Maserati MC20
Available2022 · 6,900 km · 1 owner
₹3.10 Cr
Wipe
The full-width light strip.
Photographs and chapter titles are revealed by an edge at the roof's angle as they scroll in. Without scroll-driven animations, or with reduced motion, they're simply there.
Glide: from the card to the car
The photograph and the name carry over. Turn off view transitions above to see the fallback: an instant swap, with focus moved to the car's name.
Walkaround
- Front ¾
- Front
- Rear ¾
- Detail
Front ¾
Four-point daytime lights
The 991.2's headlamps, and the black alloys this car wears.
Front
Head-on, under the strip lights
Every panel is looked at in the bay's even light before a car is listed.
Rear ¾
The full-width light strip
The mark of the all-wheel-drive Carrera 4 models.
Detail
The headlamp, close
Close detail finishes the walkaround.
- Front ¾
- Front
- Rear ¾
- Detail
Night to daylight
Night chapter
The cars, lit by their own light.
Keep scrolling.
Daylight chapter
Hours, the address, the process.
The page brightens over a short distance instead of cutting.
Reduced motion and support
| Movement | Full motion | Reduced motion | No browser support |
|---|---|---|---|
| Lights up | Overlay lifts, one band crosses, the title is wiped in: 1.4 s, once | Lit from the first frame | Same as reduced |
| Light sweep | A band crosses a card on hover, focus or tap; the photo eases in 2% | No band, no zoom | Plain CSS: works |
| Lineup | Cards glide to new places when a filter changes | Instant update | Instant update |
| Wipe | An edge at the roof's angle reveals on scroll | Static, visible | Static, visible |
| Glide | Photo and name carry over, 600 ms | Instant swap; focus on the name | Instant swap; focus on the name |
| Walkaround | Each angle wipes in at its chapter | Angles swap instantly | Plain CSS: works |
| Night to daylight | The background brightens with the scroll | Hard cut | Hard cut |
Components
Every state, on night and in daylight
Hover inverts, so feedback is unmistakable on dark surfaces. Actions are never amber.
Buttons
lightdefaulthoverfocusactive
ghostdefaulthoverfocusactive
inkdefaulthoverfocusactive
ghost-inkdefaulthoverfocusactive
Links, filters, status
Facts strip
- Year
- 2018
- Odometer
- 24,800 km
- Owners
- 1
- Registration
- MH-02
- Gearbox
- 7-speed PDK
- Price
- ₹1.25 Cr
Car cards
Porsche 911 Carrera 4
Available2018 · 24,800 km · 1 owner
₹1.25 Cr
Mercedes-AMG G 63
Reserved2023 · 9,800 km · 1 owner
₹2.95 Cr
Bentley Continental GT
Available2019 · 21,400 km · 1 owner
₹2.85 Cr
Available, reserved (the photograph dims, amber marks the state) and the keyboard-focus ring: amber's three jobs.
A concise car page
The Maserati MC20, with two photographs
A head-on frame in a dark garage and a badge detail: everything the vetted photography holds for this car. Kept as an intentionally concise car page: no padding with weaker images, no walkaround.
Maserati MC20
Available2022 · 6,900 km · 1 owner
₹3.10 Cr
Credits
Photography
- Tima Miroshnichenko · Pexels
- Tejas JR · Pexels
- Jae Park · Pexels
- Jessie Kiermayr · Pexels
- vicky brownb vicky · Pexels
- Julius Weidenauer · Pexels
- Gilberto Olimpio · Pexels
- Mohit Hambiria · Pexels
Northlight is a fictional business. Prices and histories are illustrative.