Electric Volt

A futuristic, minimal design system inspired by automotive luxury and sustainable technology. Electric Volt pairs a signature red accent with expansive dark surfaces and clean white typography to evoke the cockpit of a high-performance vehicle. The aesthetic is stark, confident, and forward-looking — vast negative space, razor-thin lines, and monolithic layouts communicate engineering precision and understated power.

Primary#CC0000
Secondary#393C41
Neutral#5C5E62
Background#000000
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

HeroInter · 80px/88px · Extra Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

DisplayInter · 56px/64px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Page TitleInter · 36px/44px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section TitleInter · 24px/32px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubtitleInter · 18px/26px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeInter · 16px/26px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 14px/22px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

LabelInter · 12px/16px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spec ValueInter · 16px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 14px/22px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A futuristic, minimal design system inspired by automotive luxury and sustainable technology. Electric Volt pairs a signature red accent with expansive dark surfaces and clean white typography to evoke the cockpit of a high-performance vehicle. The aesthetic is stark, confident, and forward-looking — vast negative space, razor-thin lines, and monolithic layouts communicate engineering precision and understated power.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

StandardSelectedConfiguration Option

List Item

Standard

Checkbox

Standard

Toggle Switch

Tooltip

Standard

Elevation & Depth

Level 0
Level 1
Level 2
Level 3
Spotlight Shadow

Do's & Don'ts

Do

Use extreme whitespace — sections separated by 120px+ create a luxury, unhurried experience
Use Inter weight 200 for hero text to achieve a futuristic, lightweight aesthetic
Use pure black (#000000) as the primary background for OLED screen optimization
Display spec values in large, light-weight typography
Use uppercase tracking (0.1em) for labels and navigation for an engineered quality

Don't

Use the red for anything beyond primary CTAs and critical states — restraint is the brand
Use colored backgrounds or gradients — the palette is monochromatic plus one accent
Use rounded corners beyond 12px — this is a precision system, not a playful one
Add visual embellishments — if an element isn't functional, remove it
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.1 KB
Downloads 45
Copies 6
dark futuristic luxury minimal

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/electric-volt and implement it in my code

Don't have the MCP? Install it here