Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
    • Wholesale
      • Wholesale basics
      • Account restrictions
    • Color and option swatches
    • Device specific visibility
    • Discount popups
  • Templates
    • Collection template
    • Product template
    • Blog template
    • Article template
  • Sections
    • Global Sections
      • Header
      • Footer
      • Navigation links
      • Announcement
      • Cart drawer
      • Account drawer
      • Search drawer
      • Menu drawer
    • Media & Promotional
      • Slideshow
      • Video
      • Split banner
      • Marquee
      • Image hotspot
      • Countdown
      • Discount
      • Banner
      • Slider
      • Testimonial slider
      • Search banner
    • Product & Collection Displays
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Content & Marketing
      • Rich text
      • Blog posts grid
      • Testimonial grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
    • Utility & Custom
      • Custom liquid
      • Tool tip
      • Store locater
    • Forms & CTAs
      • Email sign-up
      • Sign-up form
      • Contact form
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
      • Knit
      • Kingpin
      • Kindred
      • Kettle
      • Kaleidoscope
Powered by GitBook
On this page
  • FAQs
  • Color settings
  • Understanding your color schemes

Was this helpful?

Edit on GitHub
  1. Getting started
  2. Theme settings

Colors

Last updated 18 days ago

Was this helpful?

Although it's possible to jump into Keystone and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.

If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as , to help with this process.

There are a handful of great resources online that can help guide your color selection process.

FAQs

Where can I adjust my color settings?
  1. Navigate to Theme settings > Colors - Open your theme by clicking Customize

  2. Click the gear icon (⚙️) in the top-left corner to open Theme Settings

  3. Scroll down and select Colors

  4. Modify your color settings (palette, accents, text colors, etc.) as needed

  5. Click Save to apply your changes

How can I change the accent colors in my theme settings?

Accent 1-3 represents darker shades of the Body color. You can find your Body color within the Colors drawer in your Theme settings tab. To use an accent color, you can set this within the Color settings of most Section blocks.

How do I change the top bar color on mobile devices?

Update the Mobile bar to change top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.

Color settings

These settings will be applied site-wide, affecting all sections and blocks. Changes made here will update the entire website's design uniformly.

Setting
Description

Background body color

Controls the main background color for the body of the site. This will also be available in other sections when selecting a color and shown as Body.

Foreground body color

Defines the primary text color used in the body content. It's best to use a color that contrasts well against Background body color.

Foreground body dark color

Alternative darker text color for body content

Background primary color

Sets the background color for primary content areas

Foreground primary color

Defines text color used in primary content sections

Background secondary color

Sets the background color for secondary content areas

Foreground secondary color

Defines text color used in secondary content sections

Background tertiary color

Sets the background color for tertiary content areas

Foreground tertiary color

Defines text color used in tertiary content sections

Bar color

Controls the color of dividing bars or horizontal elements

Background overlay

Sets the gradient overlay effect (default is a black gradient)

Input button style

Determines button appearance with options for standard, lighter, or darker styling

Understanding your color schemes

Body and Body Neutral:

  • Body is the base color.

  • Body Neutral is a blend of the Body color and Primary Accent.

  • If the Body color is dark, Accent and Shade can instead be lighter shades of the Body color.

Accent 1-3 and Shade 1-3:

  • Accent 1-3 represents darker shades of the Body color.

  • Shade 1-3 also represents darker shades of the Body color but with slight opacity, making them semi-transparent.

  • For example, if the background color is black, Accent 1-3 will be lighter shades rather than darker.

Primary, Secondary, and Tertiary Colors:

  • These colors are directly derived from the color settings.

Coolors
Brand Colors: How to Choose the Perfect Palette
Color Psychology: How Color Meanings Affect Your Brand
Theme settings 'Color' tab
What the setting will look like within a Section