#ffffffFoundations
设计系统
18 个主题设置分组、208 个 CSS 变量和 6 个字体文件。
主题颜色
#151515#151515#E2E2E2#dedede#ffffff#151515#ffffff#000000#151515#151515#151515#E2E2E2#151515#ffffff#151515#151515#FD9A52#151515#279A4B#FB9E5B#FFFFFF#FFFFFF#FFFFFF#ffffff#151515#ffffff#939393#151515#2e2e2e字体与排版
Light in Palm, Light on Hair
Laifen High-Speed Hair Dryer
主题字体、字号比例、行高和字间距全部来自当前 Shopify settings。
[
{
"type": "paragraph",
"content": "Please refer to [How do I add custom fonts to Reformation theme?](https://documentation.fuelthemes.net/kb/how-do-i-add-custom-fonts-to-reformation-theme/) to add custom fonts to your theme."
},
{
"type": "font_picker",
"label": "Heading font",
"id": "heading_font",
"default": "archivo_narrow_n4",
"info": "Selecting a different font can affect the speed of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)"
},
{
"type": "range",
"id": "heading_font_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "Font size scale",
"default": 100
},
{
"type": "range",
"id": "heading_font_letter_spacing",
"min": -50,
"max": 200,
"step": 10,
"label": "Letter spacing",
"default": 0
},
{
"type": "range",
"id": "heading_font_line_height_scale",
"min": 50,
"max": 150,
"step": 10,
"unit": "%",
"label": "Line height scale",
"default": 100
},
{
"type": "font_picker",
"label": "Body font",
"id": "body_font",
"default": "archivo_narrow_n4",
"info": "Selecting a different font can affect the speed of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)"
},
{
"type": "range",
"id": "body_font_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "Font size scale",
"default": 100
},
{
"type": "range",
"id": "body_font_letter_spacing",
"min": -50,
"max": 200,
"step": 10,
"label": "Letter spacing",
"default": 0
},
{
"type": "range",
"id": "body_font_line_height_scale",
"min": 50,
"max": 150,
"step": 10,
"unit": "%",
"label": "Line height scale",
"default": 100
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "range",
"id": "announcement_font_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "Font size scale",
"default": 100
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "range",
"id": "navigation_font_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "Font size scale",
"default": 100
},
{
"type": "checkbox",
"id": "navigation_uppercase",
"label": "Make navigation uppercase",
"default": false
},
{
"type": "header",
"content": "Product card"
},
{
"type": "range",
"id": "product_title_font_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "Product title size scale",
"default": 100
},
{
"type": "range",
"id": "product_title_line_height_scale",
"min": 50,
"max": 150,
"step": 10,
"unit": "%",
"label": "Product title line height scale",
"default": 100
},
{
"type": "checkbox",
"id": "product_title_uppercase",
"label": "Make product title uppercase",
"default": false
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "range",
"id": "button_letter_spacing",
"min": -50,
"max": 200,
"step": 10,
"label": "Letter spacing",
"default": 20
},
{
"type": "checkbox",
"id": "button_uppercase",
"label": "Make buttons uppercase",
"default": false
}
]CSS Variables
--accent--badge-corner-radius--bg--bg-body--bg-body-darken--bg-body-rgb--button--button-border-radius--button-letter-spacing--cfc-mobile-side--cfc-slide-width--cmp-color-accent--cmp-color-accent-hover--cmp-color-accent-soft--cmp-color-bg--cmp-color-bg-alt--cmp-color-border--cmp-color-border-soft--cmp-color-error--cmp-color-focus-ring--cmp-color-muted--cmp-color-muted-30--cmp-color-stone--cmp-color-success--cmp-color-surface--cmp-color-surface-elevated--cmp-color-text-muted--cmp-color-text-primary--cmp-color-text-secondary--cmp-color-warning--cmp-content-width--cmp-font-family--cmp-font-serif--cmp-font-size-2xl--cmp-font-size-3xl--cmp-font-size-4xl--cmp-font-size-5xl--cmp-font-size-base--cmp-font-size-lg--cmp-font-size-sm--cmp-font-size-xl--cmp-font-size-xs--cmp-grad-accessory--cmp-grad-emailcapture--cmp-grad-guarantee--cmp-grad-mystery--cmp-grad-others--cmp-grad-wishlist--cmp-leading-normal--cmp-leading-relaxed--cmp-leading-snug--cmp-leading-tight--cmp-max-width--cmp-radius-2xl--cmp-radius-full--cmp-radius-lg--cmp-radius-md--cmp-radius-sm--cmp-radius-xl--cmp-shadow-lg--cmp-shadow-md--cmp-shadow-sm--cmp-space-2xl--cmp-space-3xl--cmp-space-4xl--cmp-space-lg--cmp-space-md--cmp-space-sm--cmp-space-xl--cmp-space-xs--cmp-transition-base--cmp-transition-fast--cmp-transition-slow--cnc-accent-color--cnc-bg-color--cnc-progress-bg--cnc-progress-border--cnc-shadow--cnc-stat-bg--cnc-stat-border--cnc-text-color--cnc-text-secondary--cnc-video-overlay--color-accent--color-accent-rgb--color-announcement-bar-bg--color-announcement-bar-text--color-badge-sale--color-badge-sold-out--color-badge-text--color-body--color-body-rgb--color-border--color-dots--color-footer-bg--color-footer-border--color-footer-border-rgb--color-footer-link--color-footer-link-hover--color-footer-text--color-footer-text-rgb--color-form-border--color-header-bg--color-header-bg-rgb--color-header-border--color-header-icons--color-header-links--color-header-links-hover--color-header-text--color-header-text-rgb--color-inventory-instock--color-inventory-lowstock--color-overlay-rgb--color-price--color-star--column--number--comparison--control--dropcap--ecom-global-colors-accent--ecom-global-colors-primary--ecom-global-colors-secondary--ecom-global-colors-text--ecom-global-typography-accent-font-family--ecom-global-typography-accent-font-size--ecom-global-typography-primary-font-family--ecom-global-typography-primary-font-size--ecom-global-typography-primary-font-weight--ecom-global-typography-primary-line-height--ecom-global-typography-secondary-font-family--ecom-global-typography-secondary-font-size--ecom-global-typography-secondary-font-weight--ecom-global-typography-text-font-family--ecom-global-typography-text-font-size--font-announcement-scale--font-body-letter-spacing--font-body-line-height-scale--font-body-scale--font-heading-letter-spacing--font-heading-line-height-scale--font-heading-scale--font-navigation-scale--font-product-title-line-height-scale--font-product-title-scale--font-size--form-container--ghost--highlighted--horizontal--image--image-media--information--inner--inner--input--is-mark--item--layered-button--letter-spacing--lf-container-max-width--lf-container-padding-lg--lf-container-padding-mobile--lf-container-padding-sm--line-item--text--line-item--textarea--link--logos--main--marquee--media--outline--outline-button-label--payment-terms-background-color--percent--poster--primary--pulse--recommendations--products--risk-button--scroll-container--scroll-shadow-bottom--scroll-shadow-left--scroll-shadow-right--scroll-shadow-size--scroll-shadow-top--secondary--section-spacing-desktop--section-spacing-mobile--shadow-large--shadow-medium--shadow-small--slide--solid-button-background--solid-button-label--star-percent--swiper-navigation-color--swiper-navigation-size--swiper-pagination-color--swiper-preloader-color--swiper-theme-color--tabs--tooltip-bottom--tooltip-left--tooltip-right--tooltip-top--true--variant--visible--wrapper-list