Special offer: Get 20% off your first order. Learn more

Theme Settings (Generated)

Auto-generated from fields.json. Shows all theme settings organized by groups.

Foundation

Fonts

Setting Name Variable Name Type Current Value
base_font group_fonts.base_font font Inter
(GOOGLE)
Fallback: sans-serif

Typography Colors

Setting Name Variable Name Type Current Value
headings_color group_typography_colors.headings_color color #000000
body_color group_typography_colors.body_color color #222222
headings_color_dark group_typography_colors.headings_color_dark color #FFFFFF
body_color_dark group_typography_colors.body_color_dark color #E5E7EB

Font elements

Headings

Heading Level Variable Name Type Current Value
Heading 1 (H1) group_heading_1.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 60px
Weight: 500
Heading 1 (H1) group_heading_1.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 48px
Weight: 500
Heading 1 (H1) group_heading_1.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 36px
Weight: 500
Heading 2 (H2) group_heading_2.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 48px
Weight: 500
Heading 2 (H2) group_heading_2.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 36px
Weight: 500
Heading 2 (H2) group_heading_2.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 30px
Weight: 500
Heading 3 (H3) group_heading_3.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 36px
Weight: 500
Heading 3 (H3) group_heading_3.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 30px
Weight: 500
Heading 3 (H3) group_heading_3.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 4 (H4) group_heading_4.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 4 (H4) group_heading_4.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 4 (H4) group_heading_4.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 5 (H5) group_heading_5.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 5 (H5) group_heading_5.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 5 (H5) group_heading_5.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 6 (H6) group_heading_6.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 6 (H6) group_heading_6.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500
Heading 6 (H6) group_heading_6.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 24px
Weight: 500

Navigation

Setting Name Variable Name Type Current Value
link_spacing group_navigation.link_spacing choice default

Main Navigation Links

Setting Name Variable Name Type Current Value
font_mobile group_main_nav.font_mobile font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 13px
Weight:
font_sm group_main_nav.font_sm font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 13px
Weight:
font_md group_main_nav.font_md font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 14px
Weight:
font_lg group_main_nav.font_lg font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 14px
Weight:
font_xl group_main_nav.font_xl font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 15px
Weight:
font_2xl group_main_nav.font_2xl font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 15px
Weight:

Dropdown Navigation Links

Setting Name Variable Name Type Current Value
font_mobile group_dropdown_nav.font_mobile font Font: inherits from font_mobile.font
Font Set: inherits from font_mobile.font_set
Fallback: inherits from font_mobile.fallback
Size: 13px
Weight:
font_sm group_dropdown_nav.font_sm font Font: inherits from font_sm.font
Font Set: inherits from font_sm.font_set
Fallback: inherits from font_sm.fallback
Size: 13px
Weight:
font_md group_dropdown_nav.font_md font Font: inherits from font_md.font
Font Set: inherits from font_md.font_set
Fallback: inherits from font_md.fallback
Size: 14px
Weight:
font_lg group_dropdown_nav.font_lg font Font: inherits from font_lg.font
Font Set: inherits from font_lg.font_set
Fallback: inherits from font_lg.fallback
Size: 14px
Weight:
font_xl group_dropdown_nav.font_xl font Font: inherits from font_xl.font
Font Set: inherits from font_xl.font_set
Fallback: inherits from font_xl.fallback
Size: 15px
Weight:
font_2xl group_dropdown_nav.font_2xl font Font: inherits from font_2xl.font
Font Set: inherits from font_2xl.font_set
Fallback: inherits from font_2xl.fallback
Size: 15px
Weight:

Body

Paragraph

Desktop (> 1024px)

Setting Name Variable Name Type Current Value
font group_desktop.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 18px

Tablet (768px - 1024px)

Setting Name Variable Name Type Current Value
font group_tablet.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px

Mobile (< 768px)

Setting Name Variable Name Type Current Value
font group_mobile.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px

Other elements

Block quote

Setting Name Variable Name Type Current Value
font group_block_quote.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 18px
Weight:

Caption

Setting Name Variable Name Type Current Value
font group_caption.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 12px
Weight: 400
case group_caption.case choice uppercase

Colors

Base colors

Setting Name Variable Name Type Current Value
color_1 group_base_colors.color_1 color #FFFFFF
color_2 group_base_colors.color_2 color #eeeeee
color_3 group_base_colors.color_3 color #222222

Accent colors

Setting Name Variable Name Type Current Value
color_1 group_accent_colors.color_1 color #eff6ff
color_2 group_accent_colors.color_2 color #93c5fd
color_3 group_accent_colors.color_3 color #2563eb

More settings

Sections

Setting Name Variable Name Type Current Value
section_to_edit group_sections.section_to_edit choice light_section_1

Light section 1

Section

Setting Name Variable Name Type Current Value
background_color group_section.background_color color Inherits from color_1.color

Fonts

Setting Name Variable Name Type Current Value
heading_color group_fonts.heading_color color Inherits from headings_color.color
body_text_color group_fonts.body_text_color color Inherits from body_color.color
accent_color group_fonts.accent_color color Inherits from color_3.color
caption_color group_fonts.caption_color color #647390

Blockquote

Setting Name Variable Name Type Current Value
text_color group_blockquote.text_color color Inherits from color_3.color
background_color group_blockquote.background_color color Inherits from color_2.color
accent_color group_blockquote.accent_color color Inherits from color_3.color

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice primary_links

Light section 2

Section

Setting Name Variable Name Type Current Value
background_color group_section.background_color color Inherits from color_2.color

Fonts

Setting Name Variable Name Type Current Value
heading_color group_fonts.heading_color color Inherits from headings_color.color
body_text_color group_fonts.body_text_color color Inherits from body_color.color
accent_color group_fonts.accent_color color Inherits from color_3.color
caption_color group_fonts.caption_color color #647390

Blockquote

Setting Name Variable Name Type Current Value
text_color group_blockquote.text_color color Inherits from color_3.color
background_color group_blockquote.background_color color Inherits from color_2.color
accent_color group_blockquote.accent_color color Inherits from color_3.color

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice primary_links

Light section 3

Section

Setting Name Variable Name Type Current Value
background_color group_section.background_color color Inherits from color_1.color

Fonts

Setting Name Variable Name Type Current Value
heading_color group_fonts.heading_color color Inherits from headings_color.color
body_text_color group_fonts.body_text_color color Inherits from body_color.color
accent_color group_fonts.accent_color color Inherits from color_3.color
caption_color group_fonts.caption_color color #4D6080

Blockquote

Setting Name Variable Name Type Current Value
text_color group_blockquote.text_color color Inherits from color_3.color
background_color group_blockquote.background_color color Inherits from color_1.color
accent_color group_blockquote.accent_color color Inherits from color_3.color

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice primary_links

Dark section 1

Section

Setting Name Variable Name Type Current Value
background_color group_section.background_color color Inherits from color_3.color

Fonts

Setting Name Variable Name Type Current Value
heading_color group_fonts.heading_color color Inherits from headings_color_dark.color
body_text_color group_fonts.body_text_color color Inherits from body_color_dark.color
accent_color group_fonts.accent_color color Inherits from color_2.color
caption_color group_fonts.caption_color color #7D8CA5

Blockquote

Setting Name Variable Name Type Current Value
text_color group_blockquote.text_color color Inherits from color_2.color
background_color group_blockquote.background_color color #18233B
accent_color group_blockquote.accent_color color Inherits from color_2.color

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice secondary_links

Elements

Buttons

Primary button

Setting Name Variable Name Type Current Value
button_fill group_primary_button.button_fill choice filled
shape_filled group_primary_button.shape_filled choice rounded
shape_unfilled group_primary_button.shape_unfilled choice rounded
border_thickness group_primary_button.border_thickness number 0px

Default state

Setting Name Variable Name Type Current Value
fill_color group_default_state.fill_color color Inherits from color_3.color
border_color group_default_state.border_color color Inherits from color_3.color
text_color group_default_state.text_color color Inherits from color_2.color

Hover state

Setting Name Variable Name Type Current Value
fill_color group_hover_state.fill_color color Inherits from color_2.color
border_color group_hover_state.border_color color Inherits from color_2.color
text_color group_hover_state.text_color color Inherits from color_3.color

Text

Setting Name Variable Name Type Current Value
text group_text.text font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px
Weight: 500

Secondary button

Setting Name Variable Name Type Current Value
button_fill group_secondary_button.button_fill choice no_fill
shape_filled group_secondary_button.shape_filled choice rounded
shape_unfilled group_secondary_button.shape_unfilled choice rounded
border_thickness group_secondary_button.border_thickness number 2px

Default state

Setting Name Variable Name Type Current Value
fill_color group_default_state.fill_color color Inherits from color_3.color
border_color group_default_state.border_color color Inherits from color_3.color
text_color group_default_state.text_color color Inherits from color_3.color

Hover state

Setting Name Variable Name Type Current Value
fill_color group_hover_state.fill_color color Inherits from color_3.color
border_color group_hover_state.border_color color Inherits from color_3.color
text_color group_hover_state.text_color color Inherits from color_1.color

Text

Setting Name Variable Name Type Current Value
text group_text.text font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px
Weight: 500

Tertiary button

Setting Name Variable Name Type Current Value
button_fill group_tertiary_button.button_fill choice filled
shape_filled group_tertiary_button.shape_filled choice rounded
shape_unfilled group_tertiary_button.shape_unfilled choice rounded
border_thickness group_tertiary_button.border_thickness number 0px

Default state

Setting Name Variable Name Type Current Value
fill_color group_default_state.fill_color color Inherits from color_2.color
border_color group_default_state.border_color color Inherits from color_2.color
text_color group_default_state.text_color color Inherits from color_3.color

Hover state

Setting Name Variable Name Type Current Value
fill_color group_hover_state.fill_color color Inherits from color_3.color
border_color group_hover_state.border_color color Inherits from color_3.color
text_color group_hover_state.text_color color Inherits from color_1.color

Text

Setting Name Variable Name Type Current Value
text group_text.text font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px
Weight: 500

Accent button

Setting Name Variable Name Type Current Value
button_fill group_accent_button.button_fill choice no_fill
shape_filled group_accent_button.shape_filled choice rounded
shape_unfilled group_accent_button.shape_unfilled choice rounded
border_thickness group_accent_button.border_thickness number 2px

Default state

Setting Name Variable Name Type Current Value
fill_color group_default_state.fill_color color Inherits from color_2.color
border_color group_default_state.border_color color Inherits from color_2.color
text_color group_default_state.text_color color Inherits from color_2.color

Hover state

Setting Name Variable Name Type Current Value
fill_color group_hover_state.fill_color color Inherits from color_3.color
border_color group_hover_state.border_color color Inherits from color_3.color
text_color group_hover_state.text_color color Inherits from color_1.color

Text

Setting Name Variable Name Type Current Value
text group_text.text font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 16px
Weight: 500

Links

Primary links

Default state

Setting Name Variable Name Type Current Value
text_color group_default_state.text_color color Inherits from color_3.color
show_underline group_default_state.show_underline boolean false
underline_color group_default_state.underline_color color Inherits from color_3.color

Hover state

Setting Name Variable Name Type Current Value
text_color group_hover_state.text_color color Inherits from color_3.color
show_underline group_hover_state.show_underline boolean true
underline_color group_hover_state.underline_color color Inherits from color_3.color

Secondary links

Default state

Setting Name Variable Name Type Current Value
text_color group_default_state.text_color color Inherits from color_2.color
show_underline group_default_state.show_underline boolean false
underline_color group_default_state.underline_color color Inherits from color_2.color

Hover state

Setting Name Variable Name Type Current Value
text_color group_hover_state.text_color color Inherits from color_2.color
show_underline group_hover_state.show_underline boolean true
underline_color group_hover_state.underline_color color Inherits from color_2.color

Forms

Setting Name Variable Name Type Current Value
form_fill_color group_forms.form_fill_color color Inherits from color_1.color

Field background

Setting Name Variable Name Type Current Value
background group_field_background.background choice filled

Field shape

Setting Name Variable Name Type Current Value
field_shape_filled group_field_shape.field_shape_filled choice rounded
field_shape_unfilled group_field_shape.field_shape_unfilled choice rounded

Field border

Setting Name Variable Name Type Current Value
field_border_shape group_field_border.field_border_shape choice all
field_border_shape_rectangle group_field_border.field_border_shape_rectangle choice all
field_border_shape_unfilled group_field_border.field_border_shape_unfilled choice all
field_border_shape_rectangle_unfilled group_field_border.field_border_shape_rectangle_unfilled choice all
border_thickness group_field_border.border_thickness number 1px

Field default state

Setting Name Variable Name Type Current Value
fill_color group_default_state.fill_color color Inherits from color_2.color
border_color group_default_state.border_color color #D3DAE4

Label text

Setting Name Variable Name Type Current Value
font group_label_text.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 18px
Weight: 500
text_color group_label_text.text_color color Inherits from color_3.color

Input text

Setting Name Variable Name Type Current Value
text_color group_input_text.text_color color Inherits from color_3.color

Placeholder text

Setting Name Variable Name Type Current Value
text_color group_placeholder_text.text_color color #7d8ca5

Form background

Setting Name Variable Name Type Current Value
background group_form_background.background choice filled

Form shape

Setting Name Variable Name Type Current Value
form_shape group_form_shape.form_shape choice rounded
form_shape_unfilled group_form_shape.form_shape_unfilled choice rounded

Form border

Setting Name Variable Name Type Current Value
form_border_shape group_form_border.form_border_shape choice all
border_thickness group_form_border.border_thickness number 1px
form_border_color group_form_border.form_border_color color #D3DAE4

Cards

Card variant 1

Setting Name Variable Name Type Current Value
card_background group_card_variant_1.card_background choice filled
card_shape_filled group_card_variant_1.card_shape_filled choice rounded
card_shape_unfilled group_card_variant_1.card_shape_unfilled choice rounded
border_thickness group_card_variant_1.border_thickness number 1px

Card colors

Setting Name Variable Name Type Current Value
fill_color group_card_colors.fill_color color Inherits from color_1.color
text_color group_card_colors.text_color color Inherits from heading_color.color
paragraph_color group_card_colors.paragraph_color color Inherits from body_text_color.color
border_color group_card_colors.border_color color #D3DAE4

Icon colors

Setting Name Variable Name Type Current Value
fill_color group_icon_colors.fill_color color Inherits from color_3.color
background_color group_icon_colors.background_color color Inherits from color_2.color

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice primary_links

Card variant 2

Setting Name Variable Name Type Current Value
card_background group_card_variant_2.card_background choice filled
card_shape_filled group_card_variant_2.card_shape_filled choice rounded
card_shape_unfilled group_card_variant_2.card_shape_unfilled choice rounded
border_thickness group_card_variant_2.border_thickness number 1px

Card colors

Setting Name Variable Name Type Current Value
fill_color group_card_colors.fill_color color Inherits from color_2.color
text_color group_card_colors.text_color color Inherits from heading_color.color
paragraph_color group_card_colors.paragraph_color color Inherits from body_text_color.color
border_color group_card_colors.border_color color #D3DAE4

Icon colors

Setting Name Variable Name Type Current Value
fill_color group_icon_colors.fill_color color Inherits from color_3.color
background_color group_icon_colors.background_color color #D3DAE4

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice primary_links

Card variant 3

Setting Name Variable Name Type Current Value
card_background group_card_variant_3.card_background choice filled
card_shape_filled group_card_variant_3.card_shape_filled choice rounded
card_shape_unfilled group_card_variant_3.card_shape_unfilled choice rounded
border_thickness group_card_variant_3.border_thickness number 1px

Card colors

Setting Name Variable Name Type Current Value
fill_color group_card_colors.fill_color color Inherits from color_3.color
text_color group_card_colors.text_color color Inherits from heading_color.color
paragraph_color group_card_colors.paragraph_color color Inherits from body_text_color.color
border_color group_card_colors.border_color color #303F59

Icon colors

Setting Name Variable Name Type Current Value
fill_color group_icon_colors.fill_color color Inherits from color_2.color
background_color group_icon_colors.background_color color #303F59

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice secondary_links

Card variant 4

Setting Name Variable Name Type Current Value
card_background group_card_variant_4.card_background choice filled
card_shape_filled group_card_variant_4.card_shape_filled choice rounded
card_shape_unfilled group_card_variant_4.card_shape_unfilled choice rounded
border_thickness group_card_variant_4.border_thickness number 1px

Card colors

Setting Name Variable Name Type Current Value
fill_color group_card_colors.fill_color color #18233B
text_color group_card_colors.text_color color Inherits from heading_color.color
paragraph_color group_card_colors.paragraph_color color Inherits from body_text_color.color
border_color group_card_colors.border_color color #303F59

Icon colors

Setting Name Variable Name Type Current Value
fill_color group_icon_colors.fill_color color Inherits from color_2.color
background_color group_icon_colors.background_color color #303F59

Other elements

Setting Name Variable Name Type Current Value
link_colors group_other_elements.link_colors choice secondary_links

Tags

Setting Name Variable Name Type Current Value
case group_tags.case choice none

Background

Setting Name Variable Name Type Current Value
background group_background.background choice filled

Shape

Setting Name Variable Name Type Current Value
shape_filled group_shape.shape_filled choice rounded
shape_unfilled group_shape.shape_unfilled choice rounded

Border

Setting Name Variable Name Type Current Value
border_thickness group_border.border_thickness number 1px

Colors

Setting Name Variable Name Type Current Value
fill_color group_colors.fill_color color #E5F0FF
border_color group_colors.border_color color #E5F0FF
text_color group_colors.text_color color #063E95

Text

Setting Name Variable Name Type Current Value
font group_text.font font Font: inherits from base_font.font
Font Set: inherits from base_font.font_set
Fallback: inherits from base_font.fallback
Size: 14px
Weight: 500

Header

Setting Name Variable Name Type Current Value
enable_sticky_header enable_sticky_header boolean true