Spend 10-20 minutes exploring the theme settings and previewing different sections when you first start using Keystone. This is also useful after updates to see what’s new or changed.

Before diving into color settings, it’s important to have a clear idea of your brand’s color palette. Use tools like Coolors to generate a color palette if you don’t already have one.

Resources to guide your color selection:

Background: Choose a light background to enhance readability. This color is used across your site. Ensure the Main Text color has strong contrast.

Main Text: Select a dark color for high contrast against the background.

Light Text: Used as an alternative for sections like dark banner images.

Border: Generates multiple border shades. The default shade matches the chosen color, while darker versions are available in section-specific settings.

Background: Used as the main accent color (e.g., call-to-action buttons). Recommended to use your primary brand color.

Text: Used for text within elements with the "Primary" color scheme.

Background: Used for elements with the "Secondary" color scheme (e.g., quick-add buttons).

Text: Used for text within elements with the "Secondary" color scheme.

Background: Used for elements with the "Tertiary" color scheme. This is not used by default and must be selected in section settings.

Text: Used for text within elements with the "Tertiary" color scheme.

Mobile Bar: Updates the top bar on mobile devices. Match this with your announcement bar for a cohesive look.

Enable "Color Fade" to create smooth transitions between colors in different sections.

Use the "Custom" scheme to apply any background color to sections.

Body: Base color for body elements.

Neutral: A mix of body and primary colors.

Accent 1-3: Darker shades of the body color.

Shade 1-3: Darker shades of the body color with slight opacity (see-through).

Primary/Secondary/Tertiary: Directly from the color settings.

Typography plays a crucial role in your website’s visual identity. Choose fonts that align with your brand’s mission and resonate with your customers.

Resources:

Use a maximum of two fonts to avoid performance issues.

Body Font: Applied to main body text (e.g., descriptions).

Heading Font: Applied to all headings.

Navigation Font: Applied to buttons.

Base Size: The smallest font size, serving as a reference for other sizes.

Scale Ratio: Adjusts heading sizes relative to the body font.

Choose from a variety of icon styles for a fresh look.

Helvetica + Helvetica Black

Futura + Basic Commercial

Muli + ITC Clearface

Monotype Century + Mariposa Sans Black

Nunito Sans + Optima Nova Medium

Work Sans + Crimson Text

Source Sans Pro + Nunito

Customize capitalization and font families for further typography adjustments.

Border settings (radius and thickness) impact your brand’s image. Rounded borders create a friendly look, while sharp corners suggest a stronger identity.

Button Radius: Affects all buttons (e.g., 0px for sharp corners, 50px for fully rounded).

Input Radius: Affects form inputs (recommended: 0-10px).

Element Border Radius: Affects borders around page elements (recommended: 0-10px).

Adjust the width of all borders (recommended: 1px). Use 0px for no borders or 2px for thicker borders.
​