F1Carbon

COLOR

PRIMITIVES

Note: Most of the color primitives outside of the Carbon Grey are NOT used in our theme, the full spectrum is used/shown more for reference & context.

CARBON
GREY
White
#FFF
50
#F7FAFF
100
#E1E9F5
200
#C6D1E0
300
#AFBBCC
400
#8592A6
500
#5E6C80
600
#353C47
700
#2E333E
800
#1E2229
900
#16191D
1000
#0D0F11
Black
#000

MINT GREEN

50
#F0FDFA
100
#CCFBF1
200
#99F6E4
300
#5EEAD4
400
#2DD4BF
500
#14B8A6
600
#0D9488
700
#0F766E
800
#115E59
900
#134E4A
1000
#042F2E
80%
60%
30%
20%
10%
0%
80%
60%
30%
20%
10%
0%

BLOOD RED

50
#FFF1F2
100
#FFE4E6
200
#FECDD3
300
#FDA4AF
400
#FB7185
500
#F43F5E
600
#E11D48
700
#BE123C
800
#9F1239
900
#881337
1000
#4C0519
80%
60%
30%
20%
10%
0%
80%
60%
30%
20%
10%
0%

INDIGO BRAND

50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
1000
#1E1B4B
80%
60%
30%
20%
10%
0%
80%
60%
30%
20%
10%
0%

YELLOW WARN

50
#FEFCE8
100
#FEF9C3
200
#FEF08A
300
#FDE047
400
#FACC15
500
#EAB308
600
#CA8A04
700
#A16207
800
#854D0E
900
#713F12
1000
#422006
80%
60%
30%
20%
10%
0%
80%
60%
30%
20%
10%
0%

BLUE NEUTRAL

50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#0369A1
800
#075985
900
#0C4A6E
1000
#082F49
80%
60%
30%
20%
10%
0%
80%
60%
30%
20%
10%
0%

COLOR

THEMES

Note: The color theme is the specifc set of colors we've pulled from the primitives and used as source colors for our specific color theme.

510
520
530
560
580
1010
1020
1030
1060
1080

GREY DARK

50
#F7FAFF
300
#AFBBCC
400
#8592A6
500
#5E6C80
600
#353C47
700
#2E333E
800
#1E2229
900
#16191D
1000
#0D0F11

GREY LIGHT

1000
#0B0D0F
600
#353C47
500
#5E6C80
400
#8592A6
300
#AFBBCC
200
#C6D1E0
100
#E1E9F5
50
#F7FAFF
white
#FFF
480
460
430
420
410
280
260
230
220
210
410
420
430
460
480
410
420
430
460
480
410
420
430
460
480
410
420
430
460
480
410
420
430
460
480
410
420
430
460
480

COLOR DARK

400
#2DD4BF
POS
400
#FB7185
NEG
400
#818CF8
BRAND
400
#FACC15
WARN
400
#38BDF8
NEUT
400
#FB923C
DATA

COLOR LIGHT

600
#0D9488
POS
600
#E11D48
NEG
600
#4F46E5
BRAND
600
#CA8A04
WARN
600
#0284C7
NEUT
600
#EA580C
DATA
680
660
630
620
610
680
660
630
620
610
680
660
630
620
610
680
660
630
620
610
680
660
630
620
610
680
660
630
620
610

COLOR

MODES

Note: The color mode is the actual semantic name and usage for the colors from our theme. These are the actual ways you would use these colors.

TEXT FG

PRIM
#F7FAFF
SCND
#AFBBCC
TERT
#8592A6
QUAT
#5E6C80
DISB
#353C47
INVR
#16191D

STROKE BORDER

STRONGFULL
#F7FAFF
STRONG
#8592A6
WEAKALPHA
STRONGALP...
STRONGMID
WEAKMID
#353C47
WEAK
#2E333E

UI BG

STRONG-CONTRAST
#AFBBCC
STRONG-FULL
#8592A6
STRONG-WEAK
#5E6C80
SOFT-FULL
#353C47
BASE-STRONG
BASE-FULL
BASE-WEAKMID
BASE-STRONGMID
BASE-WEAK
SOFT-WEAK

SURFACE BG

HOVER
#353C47
TOOLTIP
MENU
CARD
#1E2229
NAV
#16191D
PAGE
#0D0F11
510
520
530
560
580
1010
1020
1030
1060
1080

GREY DARK

50
#F7FAFF
300
#AFBBCC
400
#8592A6
500
#5E6C80
600
#353C47
700
#2E333E
800
#1E2229
900
#16191D
1000
#0D0F11

GREY LIGHT

1000
#0B0D0F
600
#353C47
500
#5E6C80
400
#8592A6
300
#AFBBCC
200
#C6D1E0
100
#E1E9F5
50
#F7FAFF
white
#FFF
480
460
430
420
410
280
260
230
220
210

SURFACE BG

HOVER
#FFF
TOOLTIP
MENU
CARD
#FFF
NAV
#FFF
PAGE
#F7FAFF

UI BG

STRONG-CONTRAST
#5E6C80
STRONG-FULL
#8592A6
STRONG-WEAK
#AFBBCC
BASE-FULL
SOFT-FULL
BASE-STRONGMID
BASE-STRONG
BASE-WEAKMID
SOFT-WEAK
SPACER
BASE-WEAK

STROKE BORDER

STRONGFULL
#0D0F11
STRONG
#8592A6
WEAKALPHA
STRONGALP...
STRONGMID
WEAKMID
#C6D1E0
WEAK
#E1E9F5

TEXT FG

PRIM
#0D0F11
SCND
#5E6C80
TERT
#8592A6
QUAT
#AFBBCC
DISB
#C6D1E0
INVR
#E1E9F5

ICONOGRAPHY

Note: we use a combination of custom-designed icons & pictograms along with Feather & Lucide open source libraries for our full iconography.

SIZE
size-4
size-5
size-6
size-8
STROKE WIDTH
stroke-1
stroke-1.5
stroke-2
stroke-2.5
COLOR
text-prim
text-pos
text-neg
text-warn
text-brand
BESPOKE ICONS (DESIGNED BY DMCD)
DotSmF1
DraggerF1
Embed2F1
Facebook2F1
Facebook3F1
Dragger2F1
MoreHorizDmF1
Globe2F1
Youtube2F1
ChartBaselineF1
PollF1
ChartFillF1
GaugeDashedF1
Dollar2F1
ChartIconF1
NochangeF1
NumberList2F1
Pause2F1
Pause2FillF1
Play2F1
Play2FillF1
InputOutput2F1
TrendUpIcon
SendArrow2F1
ChartBarCandleF1
SendHorizF1
Quote2F1
Maximize3ChartF1
DotLgF1
LoaderGradF1
CsLogo2F1
Compass2F1
SineWave2F1
Wallet2F1
SendVertF1
CompareIconF1
TextBodyF1
Activity2F1
Leaderboard2F1
AiCopilot
GifF1
ChartCandleF1
Bold2F1
AtSign2F1
Instagram2F1
CustomPlusIcon
RadioLeftF1
TradeConnectF1
Filter2F1
TradeIconF1
Google3F1
PostF1
HamburgerF1
Drag2F1
MoveV2F1
ChartLineF1
CsLogoF1
ChartF1
VertSliderF1
GaugeSolidF1
Snapchat2F1
Trash2F1
BetaF1
GradCapF1
Tiktok2F1
Google2F1
LaptopF1
GoogleCircle2F1
HighlightRightF1
VolumeLF1
NewChatF1
Broker2F1
Apple2F1
FilterSliderF1
Question2F1
AlphaF1
DotMdF1
MailF1
HighlightLeftF1
Tiktok3F1
List2F1
WidgetF1
SendDiagF1
Twitter2F1
Linkedin2F1
Underline2F1
MoreVertDmF1
CreditCard2F1
ListRelaxedF1
ListRelaxedcleanF1
KanbanF1
PriorityFill1F1
PriorityFill2F1
PriorityFill3F1
PriorityStrk1F1
PriorityStrk2F1
PriorityStrk3F1
ChevmaxLF1
ChevmaxRF1
ChevslimLF1
ChevslimRF1
PICTOGRAM SIZE
line split fillline split fillline split fill
Small
line split fillline split fillline split fill
Medium
line split fillline split fillline split fill
Large
PICTOGRAM STATE
line split fillline split fillline split fill
Default
line split fillline split fillline split fill
Hover
line split fillline split fillline split fill
Active
BESPOKE PICTOGRAMICONS (DESIGNED BY DMCD)

Data

line simpleline simple
Line Simple
line fillline fill
Line Fill
line split fillline split fill
Line Split Fill
line relativeline relative
Line Relative
line simple maxline simple max
Line Simple Max
candlecandle
Candle
volume color btmvolume color btm
Volume Color Btm
volume color horiz lvolume color horiz l
Volume Color Horiz L
volume color horiz rvolume color horiz r
Volume Color Horiz R
volume btmvolume btm
Volume Btm
volume horiz leftvolume horiz left
Volume Horiz Left
volume horiz rightvolume horiz right
Volume Horiz Right
bar color net horizbar color net horiz
Bar Net Horiz
bar color total horizbar color total horiz
Bar Total Horiz
bar color fullbar color full
Bar Full
bar color net vertbar color net vert
Bar Net Vert
bar color total vertbar color total vert
Bar Total Vert

Analysis

highlight lefthighlight left
Highlight Left
highlight righthighlight right
Highlight Right
scatter brandscatter brand
Scatter Brand
scatter colorscatter color
Scatter Color
price target upprice target up
Price Target Up
price target downprice target down
Price Target Down

Asset

optionsoptions
Options
options chainoptions chain
Options Chain
binary brandbinary brand
Binary
binary colorbinary color
Binary Color
nodes brandnodes brand
Nodes
nodes colornodes color
Nodes Color
globeglobe
Globe

Chart

gridlines allgridlines all
Gridlines All
gridlines horizgridlines horiz
Gridlines Horizontal
gridlines vertgridlines vert
Gridlines Vertical
gridlines all maxgridlines all max
Gridlines All Max
scrubber crosshairsscrubber crosshairs
Scrubber Crosshairs
scrubber simplescrubber simple
Scrubber Simple
y axis lefty axis left
Y Axis Left
x axisx axis
X Axis
y axis righty axis right
Y Axis Right

Portfolio

collect duocollect duo
Collect
combine duocombine duo
Combine
context duocontext duo
Context
curate duocurate duo
Curate

Customer

solo duomdsolo duomd
SoloDev
startup duomdstartup duomd
Startup
ent duomdent duomd
Enterprise
ai duomdai duomd
AI

LAYOUT

Note: Main content structure = 1224px Container + 24px Gutters, defined in Tailwind V4 as max-w-7xl px-7 + gap-6

1
1224px
2
600px
2
600px
3
392px
3
392px
3
392px
4
288px
4
288px
4
288px
4
288px
6
184px
6
184px
6
184px
6
184px
6
184px
6
184px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
12
80px
Primary
Fixed 808px
Secondary
Flex 392px
Primary
Fixed 704px
Secondary
Flex 496px

MOTION

Note: we use a combo of simple tailwind classes & Motion.Dev for our motion and animation design.

BASIC MOTION
HOVER MOTION
Hover or tap the square below
DRAG MOTION
Drag the square within bounds

SURFACE

Note: shadows are hard to see in Dark Mode and should NOT be used for critical UI elements.

PAGE
CARD
NAV
MENU
TOOLTIP
EMBED/HOVER
ELEVATION
CARD FLAT
no shadow
CARD HOVERED
shadow-2xl
NAV
shadow-nav
MENU/TOOLTIP
shadow-float
PAGE
CARD
EMBED/HOVER
NAV
MENU

PATTERN

TYPOGRAPHY

INTERFACE SIZES & WEIGHTS
2XS .625rem (10/16px)
Light
Thin
Normal
Medium
Semibold
Bold
XS .6875rem (11/16px)
Light
Thin
Normal
Medium
Semibold
Bold
SM .8125rem (13/20px)
Light
Thin
Normal
Medium
Semibold
Bold
Base .875rem (14/24px)
Light
Thin
Normal
Medium
Semibold
Bold
LG 1rem (16/24px)
Light
Thin
Normal
Medium
Semibold
Bold
XL 1.125rem (18/28px)
Light
Thin
Normal
Medium
Semibold
Bold
2XL 1.25rem (20/28px)
Light
Thin
Normal
Medium
Semibold
Bold
3XL 1.5rem (24/32px)
Light
Thin
Normal
Medium
Semibold
Bold
4XL 2rem (32/40px)
Light
Thin
Normal
Medium
Semibold
Bold

COLOR vs CARD SURFACE
Primary 2XL Normal
Secondary
Tertiary
Quaternary
Primary LG Normal
Secondary
Tertiary
Quaternary
Disabled
Primary Base Normal
Secondary
Tertiary
Quaternary
Disabled
Primary SM Normal
Secondary
Tertiary
Quaternary
Disabled
Positive 2XL Normal
Secondary
Tertiary
Quaternary
Positive LG Normal
Secondary
Tertiary
Quaternary
Positive Base Normal
Secondary
Tertiary
Quaternary
Positive SM Normal
Secondary
Tertiary
Quaternary
Negative 2XL Normal
Secondary
Tertiary
Quaternary
Negative LG Normal
Secondary
Tertiary
Quaternary
Negative Base Normal
Secondary
Tertiary
Quaternary
Negative SM Normal
Secondary
Tertiary
Quaternary
Brand 2XL Normal
Secondary
Tertiary
Quaternary
Brand LG Normal
Secondary
Tertiary
Quaternary
Brand Base Normal
Secondary
Tertiary
Quaternary
Brand SM Normal
Secondary
Tertiary
Quaternary
Warning 2XL Normal
Secondary
Tertiary
Quaternary
Warning LG Normal
Secondary
Tertiary
Quaternary
Warning Base Normal
Secondary
Tertiary
Quaternary
Warning SM Normal
Secondary
Tertiary
Quaternary
COLOR vs PAGE SURFACE
Primary 2XL Normal
Secondary
Tertiary
Quaternary
Primary LG Normal
Secondary
Tertiary
Quaternary
Disabled
Primary Base Normal
Secondary
Tertiary
Quaternary
Disabled
Primary SM Normal
Secondary
Tertiary
Quaternary
Disabled
Positive 2XL Normal
Secondary
Tertiary
Quaternary
Positive LG Normal
Secondary
Tertiary
Quaternary
Positive Base Normal
Secondary
Tertiary
Quaternary
Positive SM Normal
Secondary
Tertiary
Quaternary
Negative 2XL Normal
Secondary
Tertiary
Quaternary
Negative LG Normal
Secondary
Tertiary
Quaternary
Negative Base Normal
Secondary
Tertiary
Quaternary
Negative SM Normal
Secondary
Tertiary
Quaternary
Brand 2XL Normal
Secondary
Tertiary
Quaternary
Brand LG Normal
Secondary
Tertiary
Quaternary
Brand Base Normal
Secondary
Tertiary
Quaternary
Brand SM Normal
Secondary
Tertiary
Quaternary
Warning 2XL Normal
Secondary
Tertiary
Quaternary
Warning LG Normal
Secondary
Tertiary
Quaternary
Warning Base Normal
Secondary
Tertiary
Quaternary
Warning SM Normal
Secondary
Tertiary
Quaternary
COLOR vs NAV SURFACE
Primary 2XL Normal
Secondary
Tertiary
Quaternary
Primary LG Normal
Secondary
Tertiary
Quaternary
Disabled
Primary Base Normal
Secondary
Tertiary
Quaternary
Disabled
Primary SM Normal
Secondary
Tertiary
Quaternary
Disabled
Positive 2XL Normal
Secondary
Tertiary
Quaternary
Positive LG Normal
Secondary
Tertiary
Quaternary
Positive Base Normal
Secondary
Tertiary
Quaternary
Positive SM Normal
Secondary
Tertiary
Quaternary
Negative 2XL Normal
Secondary
Tertiary
Quaternary
Negative LG Normal
Secondary
Tertiary
Quaternary
Negative Base Normal
Secondary
Tertiary
Quaternary
Negative SM Normal
Secondary
Tertiary
Quaternary
Brand 2XL Normal
Secondary
Tertiary
Quaternary
Brand LG Normal
Secondary
Tertiary
Quaternary
Brand Base Normal
Secondary
Tertiary
Quaternary
Brand SM Normal
Secondary
Tertiary
Quaternary
Warning 2XL Normal
Secondary
Tertiary
Quaternary
Warning LG Normal
Secondary
Tertiary
Quaternary
Warning Base Normal
Secondary
Tertiary
Quaternary
Warning SM Normal
Secondary
Tertiary
Quaternary
COLOR vs MENU SURFACE
Primary 2XL Normal
Secondary
Tertiary
Quaternary
Primary LG Normal
Secondary
Tertiary
Quaternary
Disabled
Primary Base Normal
Secondary
Tertiary
Quaternary
Disabled
Primary SM Normal
Secondary
Tertiary
Quaternary
Disabled
Positive 2XL Normal
Secondary
Tertiary
Quaternary
Positive LG Normal
Secondary
Tertiary
Quaternary
Positive Base Normal
Secondary
Tertiary
Quaternary
Positive SM Normal
Secondary
Tertiary
Quaternary
Negative 2XL Normal
Secondary
Tertiary
Quaternary
Negative LG Normal
Secondary
Tertiary
Quaternary
Negative Base Normal
Secondary
Tertiary
Quaternary
Negative SM Normal
Secondary
Tertiary
Quaternary
Brand 2XL Normal
Secondary
Tertiary
Quaternary
Brand LG Normal
Secondary
Tertiary
Quaternary
Brand Base Normal
Secondary
Tertiary
Quaternary
Brand SM Normal
Secondary
Tertiary
Quaternary
Warning 2XL Normal
Secondary
Tertiary
Quaternary
Warning LG Normal
Secondary
Tertiary
Quaternary
Warning Base Normal
Secondary
Tertiary
Quaternary
Warning SM Normal
Secondary
Tertiary
Quaternary

COLOR

USAGE
TEXT COLORS
Primary Text (--color-prim)
Secondary Text (--color-scnd)
Tertiary Text (--color-tert)
Quaternary Text (--color-quat)
Disabled Text (--color-disb)
Inverted Text (--color-invr)
STATUS COLORS
Positive (--color-pos)
Negative (--color-neg)
Warning (--color-warn)
Brand (--color-brand)
BACKGROUND COLORS
Page (--color-page)
Nav (--color-nav)
Card (--color-card)
Menu (--color-menu)
Tooltip (--color-tooltip)
Hover (--color-hover)
STROKE COLORS
Weak (--color-strk-weak)
Weak Mid (--color-strk-weakmid)
Weak Alpha (--color-strk-weakalpha)
Strong Alpha (--color-strk-strongalpha)
Strong Mid (--color-strk-strongmid)
Strong (--color-strk-strong)
UI BASE COLORS
Base Weak (--color-ui-base-weak)
Base Weak Mid (--color-ui-base-weakmid)
Base Strong Mid (--color-ui-base-strongmid)
Base Strong (--color-ui-base-strong)
Base Full (--color-ui-base-full)
DATA 1 - BLUE
Data 1 Weak (--color-ui-data1-weak)
Data 1 Weak Mid (--color-ui-data1-weakmid)
Data 1 Strong Mid (--color-ui-data1-strongmid)
Data 1 Strong (--color-ui-data1-strong)
Data 1 Full (--color-ui-data1-full)
DATA 2 - ORANGE
Data 2 Weak (--color-ui-data2-weak)
Data 2 Weak Mid (--color-ui-data2-weakmid)
Data 2 Strong Mid (--color-ui-data2-strongmid)
Data 2 Strong (--color-ui-data2-strong)
Data 2 Full (--color-ui-data2-full)
DATA 3 - PINK
Data 3 Weak (--color-ui-data3-weak)
Data 3 Weak Mid (--color-ui-data3-weakmid)
Data 3 Strong Mid (--color-ui-data3-strongmid)
Data 3 Strong (--color-ui-data3-strong)
Data 3 Full (--color-ui-data3-full)
BackHub
NextComponents