What font does Lucid Motors use?

Lucid Motors’s website uses four typefaces: Lucid Sans VF (headings and body text), self-hosted; GTAmerica, self-hosted; Lucid Serif Italic VF, self-hosted; Lucid Serif VF, self-hosted.

What are Lucid Motors’s brand colours?

The main colours on lucidmotors.com are Tan (#D7BE96), Light Steel Blue (#99B1D4), Dark Slate Blue (#00358E), Midnight Blue (#041E42), Red (#FF202B) and Spring Green (#00E270).

What colour is Lucid Motors’s text and background?

Body text is #0F0F0F on a #0F0F0F background.

Where is Lucid Motors’s logo from?

The logo shown in this guide was found on lucidmotors.com’s homepage. For official logo files and usage rules, check Lucid Motors’s own brand or press page.

Is this Lucid Motors’s official style guide?

No. SiteStyleGuide made it from lucidmotors.com’s public web pages on 27 October 2026, and isn’t affiliated with Lucid Motors. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from lucidmotors.com’s public web pages. Not affiliated with or endorsed by Lucid Motors. The real site is lucidmotors.com ↗

Unofficial style guide

Lucid Motorsstyle guide

Lucid Motors’s website (lucidmotors.com) uses Lucid Sans VF for its headings and body text. Its palette is led by Tan (#D7BE96), Light Steel Blue (#99B1D4) and Dark Slate Blue (#00358E), with #0F0F0F text on #0F0F0F. Captured from the live site on 27 October 2026.

Website: lucidmotors.com
Typefaces: Lucid Sans VF, GTAmerica, Lucid Serif Italic VF
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the lucidmotors.com homepage on a desktop screen — Screenshot of lucidmotors.com on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the lucidmotors.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Home | Lucid Motors; ● 19 / 60 characters
Meta description: Lucid is the future of sustainable mobility, designing electric cars that further reimagines the driving experience.; ● 116 / 160 characters
Site name: Home | Lucid Motors
og:title: Home | Lucid Motors
og:description: Lucid is the future of sustainable mobility, designing electric cars that further reimagines the driving experience.
Language: en-us
Theme colour: #000000

In search results

Home | Lucid Motorshttps://lucidmotors.com/

Home | Lucid Motors

Lucid is the future of sustainable mobility, designing electric cars that further reimagines the driving experience.

When shared

The image Lucid Motors shares with links

lucidmotors.com

Home | Lucid Motors

Lucid is the future of sustainable mobility, designing electric cars that further reimagines the driving expe…

Logo & favicons

Found as: schema.org logo. ICO, 48 × 48.

Logo

On white

On black

On Tan

Favicons

5 found

192 px · PNG icon
180 px · PNG apple-touch-icon
48 px · ICO icon
32 px · PNG icon
16 px · PNG icon

Home | Lucid Motors

Light browser tab

Home | Lucid Motors

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#0F0F0F) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Deep Black 21.9%
White 11%
Tan 8.5%
Light Black 7.9%
Off White 6.9%
Light Steel Blue 6.3%
Dark Slate Blue 6%
Midnight Blue 6%
Red 3.4%
Spring Green 3.2%
Dark Orange 3.2%
Medium Sea Green 3.2%
Peru 3.2%
Fire Brick 3.2%
Deep Sky Blue 3.1%
Steel Blue 3.1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

Deep Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 94

On text
—

On white
19.17:1 AAA

Text, background, graphic · body, .DatePicker_datePicker__T8RxY .DatePicker_calendarCell__3JypW.DatePicker_day__mq
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
19.17:1 AAA

On white
—

Text, background, graphic · .SearchResults_SearchResults__0_F2J .SearchResults_container__RuWkf .SearchResul, .DatePicker_datePicker__T8RxY .DatePicker_calendarCell__3JypW.DatePicker_day__mq
Light Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 89

On text
1.12:1 Fail

On white
17.04:1 AAA

Text, background, border · .Message_Message__iU2Nu.Message_popUp__fet2h .Message_content__WWmLC .Message_te, .Table_dark__nOsCz .Table_columnTitle__82rMw .Table_tableCol__k7r5a
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 11

On text
14.80:1 AAA

On white
1.30:1 Fail

Text, background, border · .Table_light__zdH_M .Table_columnTitle__82rMw .Table_tableCol__k7r5a, .Button_light_brand_primary__WXKe_.Button_disabled__yWsoO

Colours

Brand colours and accents, most used first

Tan

HEX

RGB

HSL

OKLCH

CMYK
0 12 30 16

On text
10.68:1 AAA

On white
1.80:1 Fail

Text, background, graphic · .SearchResults_SearchResults__0_F2J .SearchResults_container__RuWkf .SearchResul, .Button_dark_brand_primary__nvHo2
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
28 17 0 17

On text
8.76:1 AAA

On white
2.19:1 Fail

Text, background, graphic · .Button_dark-product-sapphire-4__C7LFv, .Button_light-product-sapphire-4__IkYKv
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 63 0 44

On text
1.73:1 Fail

On white
11.05:1 AAA

Text · .Button_dark-product-sapphire-2__Ua5if, .ButtonGroup_dark-product-sapphire-2__L7MfF
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
94 55 0 74

On text
1.16:1 Fail

On white
16.54:1 AAA

Text · .Button_dark-product-sapphire-1__9zuE0, .Button_light-product-sapphire-2__NDu1P
Red

HEX

RGB

HSL

OKLCH

CMYK
0 87 83 0

On text
5.01:1 AA

On white
3.82:1 AA large

Text, border, graphic · .Button_dark-error-1__m1D1S, .ButtonGroup_dark-error-1__8xCrB
Spring Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 50 11

On text
11.06:1 AAA

On white
1.73:1 Fail

Text, border, graphic · .Button_dark-success-1__EmE7p, .ButtonGroup_dark-success-1__vD6uL
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 41 100 0

On text
8.78:1 AAA

On white
2.18:1 Fail

Text, border, graphic · .Button_dark-warning-1__hOrBM, .ButtonGroup_dark-warning-1__pWMDN
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 50 32

On text
6.49:1 AA

On white
2.95:1 Fail

Text, border, graphic · .Button_light-success-1__GpChc, .ButtonGroup_light-success-1__KmBVL
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 41 100 14

On text
6.56:1 AA

On white
2.92:1 Fail

Text, border, graphic · .Button_light-warning-1__t9hWS, .ButtonGroup_light-warning-1__ri2VC
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 94 89 19

On text
3.37:1 AA large

On white
5.68:1 AA

Text, border, graphic · .Button_light-error-1__vgLSS, .ButtonGroup_light-error-1__RlMLm
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 30 0 5

On text
7.18:1 AAA

On white
2.67:1 Fail

Text, graphic, background · .Button_dark-information-1__NBDbY, .ButtonGroup_dark-information-1__qmamh
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
98 30 0 18

On text
5.57:1 AA

On white
3.44:1 AA large

Text, graphic, background · .Button_light-information-1__uZ982, .ButtonGroup_light-information-1__jkWTL

Gradients

linear-gradient(#d7be96,#d7be96)
linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 90%)
linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 50%,rgba(255,255,255,.08))

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Lucid Sans VF

Aa 400 Aa 700

Lucid Sans VF

Self-hosted · weights 400, 500, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 100 Aa 500

GTAmerica

Self-hosted · weights 100, 200, 300, 400, 500 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400

Lucid Serif Italic VF

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 400

Lucid Serif VF

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 32px / 40px weight 400 · Lucid Serif VF

Lucid Motors

Heading 2 12px / 18px weight 400 · capitalize · Lucid Sans VF

Home | Lucid Motors

Heading 3 14px / 22px weight 500 · GTAmerica

Home | Lucid Motors

Heading 4 20px / 28px weight 400 · uppercase · Lucid Sans VF

Home | Lucid Motors

Heading 5 18px / 28px weight 500 · Lucid Sans VF

Home | Lucid Motors

Heading 6 18px / 28px weight 500 · Lucid Sans VF

Home | Lucid Motors

Paragraph 16px / 24px weight 400 · capitalize · Lucid Sans VF

Lucid is the future of sustainable mobility, designing electric cars that further reimagines the driving experience.

Button — weight 300 · GTAmerica

Get started

Link 12px / 16px weight 500 · uppercase · Lucid Sans VF

Sizes in use

Most common across the site

40pxline 48px · 7 rules
24pxline 32px · 15 rules
20pxline 28px · 6 rules
18pxline 28px · 16 rules
16pxline 24px · 50 rules
14pxline 20px · 43 rules
12pxline 18px · 38 rules
10pxline 14px · 21 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.Button2_buttonTertiary__yMVf_ · #D7BE96 · radius 4px

Corner radius

4px · 94×
50% · 20×
8px · 16×
.125rem · 14×
2px · 6×
16px · 5×

Shadows

0 .125rem .5rem rgba(0,0,0,.4)
0 0 15px rgba(0,0,0,.2)
0 0 0 .1875rem rgba(215,190,150,.5)
0 20px 50px rgba(0,0,0,.6)

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

480

767

768

769

1024

1040

1280

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1920 px

1112 px

800 px

684 px

448 px

340 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 19 characters, short enough to show in full in search results.
▲ CheckBody text (#0F0F0F on #0F0F0F) has a contrast of 1.00:1, under the 4.5:1 WCAG asks for.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Lucid Motors use?: Lucid Motors’s website uses four typefaces: Lucid Sans VF (headings and body text), self-hosted; GTAmerica, self-hosted; Lucid Serif Italic VF, self-hosted; Lucid Serif VF, self-hosted.
What are Lucid Motors’s brand colours?: The main colours on lucidmotors.com are Tan (#D7BE96), Light Steel Blue (#99B1D4), Dark Slate Blue (#00358E), Midnight Blue (#041E42), Red (#FF202B) and Spring Green (#00E270).
What colour is Lucid Motors’s text and background?: Body text is #0F0F0F on a #0F0F0F background.
Where is Lucid Motors’s logo from?: The logo shown in this guide was found on lucidmotors.com’s homepage. For official logo files and usage rules, check Lucid Motors’s own brand or press page.
Is this Lucid Motors’s official style guide?: No. SiteStyleGuide made it from lucidmotors.com’s public web pages on 27 October 2026, and isn’t affiliated with Lucid Motors. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

lucidmotors-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* lucidmotors.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/lucidmotors.com) */
:root {
  /* Colours */
  --text: #0F0F0F;
  --background: #0F0F0F;
  --colour-deep-black: #0F0F0F;
  --colour-white: #FFFFFF;
  --colour-light-black: #1C1C1C;
  --colour-off-white: #E2E2E2;
  --colour-tan: #D7BE96;
  --colour-light-steel-blue: #99B1D4;
  --colour-dark-slate-blue: #00358E;
  --colour-midnight-blue: #041E42;
  --colour-red: #FF202B;
  --colour-spring-green: #00E270;
  --colour-dark-orange: #FF9600;
  --colour-medium-sea-green: #00AD56;
  --colour-peru: #DC8100;
  --colour-fire-brick: #CE0D17;
  --colour-deep-sky-blue: #00A8F1;
  --colour-steel-blue: #0593D1;
  --gradient-1: linear-gradient(#d7be96,#d7be96);
  --gradient-2: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 90%);
  --gradient-3: linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 50%,rgba(255,255,255,.08));

  /* Typefaces */
  --font-headings: 'Lucid Sans VF', 'IBM Plex Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Helvetica';
  --font-buttons: 'Lucid Sans VF', 'IBM Plex Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Helvetica';
  --font-other: 'SchnyderS';

  /* Type scale */
  --text-h1: 32px;
  --leading-h1: 40px;
  --text-h2: 12px;
  --leading-h2: 18px;
  --text-h3: 14px;
  --leading-h3: 22px;
  --text-h4: 20px;
  --leading-h4: 28px;
  --text-h5: 18px;
  --leading-h5: 28px;
  --text-h6: 18px;
  --leading-h6: 28px;
  --text-p: 16px;
  --leading-p: 24px;
  --text-a: 12px;
  --leading-a: 16px;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 50%;
  --radius-3: 8px;
  --radius-4: .125rem;
  --radius-5: 2px;
  --radius-6: 16px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 769px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1040px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1440px;
  --max-width-1: 1920px;
  --max-width-2: 1112px;
  --max-width-3: 800px;
  --max-width-4: 684px;
  --max-width-5: 448px;
  --max-width-6: 340px;
}

{
    "site": "lucidmotors.com",
    "source": "https://sitestyleguide.com/lucidmotors.com",
    "text": "#0F0F0F",
    "background": "#0F0F0F",
    "colours": [
        {
            "name": "Deep Black",
            "hex": "#0F0F0F",
            "rgb": [
                15,
                15,
                15
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Black",
            "hex": "#1C1C1C",
            "rgb": [
                28,
                28,
                28
            ]
        },
        {
            "name": "Off White",
            "hex": "#E2E2E2",
            "rgb": [
                226,
                226,
                226
            ]
        },
        {
            "name": "Tan",
            "hex": "#D7BE96",
            "rgb": [
                215,
                190,
                150
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#99B1D4",
            "rgb": [
                153,
                177,
                212
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#00358E",
            "rgb": [
                0,
                53,
                142
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#041E42",
            "rgb": [
                4,
                30,
                66
            ]
        },
        {
            "name": "Red",
            "hex": "#FF202B",
            "rgb": [
                255,
                32,
                43
            ]
        },
        {
            "name": "Spring Green",
            "hex": "#00E270",
            "rgb": [
                0,
                226,
                112
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF9600",
            "rgb": [
                255,
                150,
                0
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00AD56",
            "rgb": [
                0,
                173,
                86
            ]
        },
        {
            "name": "Peru",
            "hex": "#DC8100",
            "rgb": [
                220,
                129,
                0
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CE0D17",
            "rgb": [
                206,
                13,
                23
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00A8F1",
            "rgb": [
                0,
                168,
                241
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0593D1",
            "rgb": [
                5,
                147,
                209
            ]
        }
    ],
    "fonts": [
        {
            "name": "Lucid Sans VF",
            "stack": "Lucid Sans VF, IBM Plex Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GTAmerica",
            "stack": "GTAmerica, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
            "weights": [
                100,
                200,
                300,
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Lucid Serif Italic VF",
            "stack": "\"Lucid Serif Italic VF\", Georgia, Georgia, Times, \"Times New Roman\", serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Lucid Serif VF",
            "stack": "\"Lucid Serif VF\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SchnyderM",
            "stack": "\"SchnyderM\", Georgia, Times, \"Times New Roman\", serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
            "weights": [
                300,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SchnyderS",
            "stack": "\"SchnyderS\", var(--font-serif-fallback)",
            "weights": [
                300,
                600
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to Lucid Motors’s

Grapa Studio

studiograpa.com · 2 days ago
Save
mixi

mixi.jp · 1 day ago
Save
Tasting Table

tastingtable.com · 5 days ago
Save
mysql.com

mysql.com · 3 days ago
Save

Captured from lucidmotors.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Lucid Motors; this guide describes the public website for reference.

Lucid Motorsstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Deep Black

White

Light Black

Off White

Colours

Tan

Light Steel Blue

Dark Slate Blue

Midnight Blue

Red

Spring Green

Dark Orange

Medium Sea Green

Peru

Fire Brick

Deep Sky Blue

Steel Blue

Gradients

Lucid Sans VF

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run lucidmotors.com?

Similar colours

Grapa Studio

mixi

Tasting Table

mysql.com

Title &
description