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 |
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: px Weight: |
| 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: px Weight: |
| 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: px Weight: |
| 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: px Weight: |
| 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: px Weight: |
| 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: px Weight: |
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
| Setting Name | Variable Name | Type | Current Value |
|---|---|---|---|
| font | group_paragraph.font | font | Font: inherits from base_font.font Font Set: inherits from base_font.font_set Fallback: inherits from base_font.fallback Size: px |
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 |
|---|---|---|---|
| text_color | group_fonts.text_color | color | Inherits from color_3.color |
| paragraph_color | group_fonts.paragraph_color | color | Inherits from color_3.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 |
|---|---|---|---|
| text_color | group_fonts.text_color | color | Inherits from color_3.color |
| paragraph_color | group_fonts.paragraph_color | color | Inherits from color_3.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 |
|---|---|---|---|
| text_color | group_fonts.text_color | color | Inherits from color_3.color |
| paragraph_color | group_fonts.paragraph_color | color | Inherits from color_3.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 |
|---|---|---|---|
| text_color | group_fonts.text_color | color | Inherits from color_2.color |
| paragraph_color | group_fonts.paragraph_color | color | Inherits from color_2.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 text_color.color |
| paragraph_color | group_card_colors.paragraph_color | color | Inherits from paragraph_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 text_color.color |
| paragraph_color | group_card_colors.paragraph_color | color | Inherits from paragraph_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 text_color.color |
| paragraph_color | group_card_colors.paragraph_color | color | Inherits from paragraph_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 text_color.color |
| paragraph_color | group_card_colors.paragraph_color | color | Inherits from paragraph_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 |