Documentation/ Visual identity /Colors and styles
Contact us
Install
01ELOA

Colors and styles

Colors, schemes, and visual settings saved in this preset.

SAVED COLOR SCHEMES

The preset’s five color schemes

These values come directly from settings_data.json. Recreate them in the same order so sections referencing a scheme keep the same appearance.

scheme-1
View values
background
#e7e1d6
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#342922
button
#342922
button_label
#f6f1e8
secondary_button_label
#766a60
shadow
#beb4a7
scheme-2
View values
background
#2e6e63
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#fff9f1
button
#e5b94e
button_label
#342922
secondary_button_label
#fff9f1
shadow
#1f4d46
scheme-3
View values
background
#c4493d
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#342922
button
#fff9f1
button_label
#342922
secondary_button_label
#fff9f0
shadow
#92372f
scheme-4
View values
background
#e5b94e
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#342922
button
#342922
button_label
#fff9f1
secondary_button_label
#342922
shadow
#c29b38
scheme-5
View values
background
#ffc8b1
background_gradient
No custom value: the theme uses its automatic behavior or hides the element when no data is available.
text
#342922
button
#c4493d
button_label
#fff9f1
secondary_button_label
#342922
shadow
#d58f6d
DESIGN SYSTEM

Preset global values

background_color#F6F1E8
background_soft_color#E7E1D6
foreground_color#342922
muted_color#766A60
accent_color#C4493D
accent_contrast_color#FFF9F1
type_heading_fontdm_serif_display_n4
heading_letter_spacing0
heading_text_transformnone
type_primary_fontsans_serif_n4
body_line_height145
eyebrow_letter_spacing16
link_color#C4493D
link_hover_color#342922
link_stylenone
surface_color#E7E1D6
surface_border_color#342922
card_background_color#F6F1E8
card_border_color#342922
glass_color#F6F1E8
glass_content_color#342922
glass_action_color#C4493D
glass_background_color#F6F1E8
glass_border_color#FFF9F1
button_primary_background#C4493D
button_primary_text#F6F1E8
button_secondary_background#342922
button_secondary_text#FFFFFF
REPRODUCTION

Recommended order

  1. 01

    Create the schemes in Theme settings → Colors.

  2. 02

    Apply global values before editing a section.

  3. 03

    Then configure page templates in the documented order.

  4. 04

    Check contrast and mobile rendering.