Jump to Navigation Jump to Main Content Jump to Footer
Home » Tutorials » Chisel Coffee Shop » Chapter 1: Project Setup

Chapter 1: Project Setup

1.1 Installing Chisel

To install Chisel, follow the installation instructions for creating a new project as described in the documentation.

1.2 Theme.json setup

In this section, we’ll configure the theme.json file to establish our custom color palette and typography system for the Chisel Coffee Shop theme. The theme.json file is the central configuration file for WordPress block themes, allowing us to define global styles, settings, and design tokens.

Understanding theme.json Structure

The theme.json file uses a specific schema to define theme settings and styles. For our coffee shop theme, we’ll focus on two main areas:

  1. Settings – Define available options (colors, fonts, spacing)
  2. Styles – Apply those options to elements

Setting Up Custom Colors

Our color palette is built around warm, earthy tones that reflect the coffee shop aesthetic—rich browns for primary elements and creamy neutrals for secondary elements.

Adding the Color Palette

Open your theme.json file and locate the settings.color section. Add the following palette:

"palette": [
  {
    "name": "Foreground",
    "slug": "foreground",
    "color": "#050a18"
  },
  {
    "name": "Background",
    "slug": "background",
    "color": "#f8f6f3"
  },
  {
    "name": "Primary",
    "slug": "primary",
    "color": "#53230C"
  },
  {
    "name": "Primary 100",
    "slug": "primary-100",
    "color": "#953F15"
  },
  {
    "name": "Primary 200",
    "slug": "primary-200",
    "color": "#743110"
  },
  {
    "name": "Primary 300",
    "slug": "primary-300",
    "color": "#632A0E"
  },
  {
    "name": "Primary 600",
    "slug": "primary-600",
    "color": "#421C09"
  },
  {
    "name": "Primary 800",
    "slug": "primary-800",
    "color": "#291106"
  },
  {
    "name": "Primary 900",
    "slug": "primary-900",
    "color": "#180A03"
  },
  {
    "name": "Secondary",
    "slug": "secondary",
    "color": "#CEB68C"
  },
  {
    "name": "Secondary 100",
    "slug": "secondary-100",
    "color": "#FFFFFC"
  },
  {
    "name": "Secondary 200",
    "slug": "secondary-200",
    "color": "#FFFEC4"
  },
  {
    "name": "Secondary 300",
    "slug": "secondary-300",
    "color": "#F7DAA8"
  },
  {
    "name": "Secondary 600",
    "slug": "secondary-600",
    "color": "#A49170"
  },
  {
    "name": "Secondary 800",
    "slug": "secondary-800",
    "color": "#675B46"
  },
  {
    "name": "Secondary 900",
    "slug": "secondary-900",
    "color": "#3D362A"
  },
  {
    "name": "Black",
    "slug": "black",
    "color": "#000000"
  },
  {
    "name": "White",
    "slug": "white",
    "color": "#ffffff"
  },
  {
    "name": "Grey 900",
    "slug": "grey-900",
    "color": "#343a40"
  },
  {
    "name": "Grey 800",
    "slug": "grey-800",
    "color": "#444444"
  },
  {
    "name": "Grey 600",
    "slug": "grey-600",
    "color": "#6E6E6E"
  },
  {
    "name": "Grey 400",
    "slug": "grey-400",
    "color": "#999999"
  },
  {
    "name": "Grey 300",
    "slug": "grey-300",
    "color": "#c2c2c2"
  },
  {
    "name": "Grey 200",
    "slug": "grey-200",
    "color": "#e5e5e5"
  },
  {
    "name": "Grey 100",
    "slug": "grey-100",
    "color": "#f8f8f8"
  },
  {
    "name": "Success",
    "slug": "success",
    "color": "#6B8E23"
  },
  {
    "name": "Info",
    "slug": "info",
    "color": "#5B7C99"
  },
  {
    "name": "Warning",
    "slug": "warning",
    "color": "#D4A373"
  },
  {
    "name": "Error",
    "slug": "error",
    "color": "#A0522D"
  }
]
JSON

Color Palette Breakdown

  • Foreground/Background – Base text and page background colors
  • Primary (Brown tones) – Main brand color with shades from light (#953F15) to dark (#180A03)
  • Secondary (Cream tones) – Complementary color with variations
  • Greys – Neutral colors for borders, dividers, and subtle backgrounds
  • Utility Colors – Success, info, warning, and error states for UI feedback

Setting Up Custom Typography

We’re using a classic serif/sans-serif pairing: Lora for headings (elegant, readable serif) and Nunito for body text (friendly, modern sans-serif).

Adding Font Families

In the settings.typography section of theme.json, add:

"fontFamilies": [
  {
    "fontFamily": "Nunito,sans-serif",
    "slug": "body",
    "name": "Nunito",
    "fontFace": [
      {
        "fontFamily": "Nunito",
        "fontWeight": "400",
        "fontStyle": "normal",
        "fontStretch": "normal",
        "fontDisplay": "swap",
        "src": ["file:./assets/fonts/nunito-regular.woff2"]
      },
      {
        "fontFamily": "Nunito",
        "fontWeight": "700",
        "fontStyle": "normal",
        "fontStretch": "normal",
        "fontDisplay": "swap",
        "src": ["file:./assets/fonts/nunito-700.woff2"]
      }
    ]
  },
  {
    "fontFamily": "Lora,serif",
    "slug": "headings",
    "name": "Lora",
    "fontFace": [
      {
        "fontFamily": "Lora",
        "fontWeight": "400",
        "fontStyle": "normal",
        "fontStretch": "normal",
        "fontDisplay": "swap",
        "src": ["file:./assets/fonts/lora-regular.woff2"]
      },
      {
        "fontFamily": "Lora",
        "fontWeight": "700",
        "fontStyle": "normal",
        "fontStretch": "normal",
        "fontDisplay": "swap",
        "src": ["file:./assets/fonts/lora-700.woff2"]
      }
    ]
  }
]
JSON

Font Files Setup

Before this configuration works, you need to download and place the font files:

  1. Download Nunito and Lora from google webfonts helper
  2. Convert to WOFF2 format (if not already)
  3. Place files in: your-theme/assets/fonts/
    • nunito-regular.woff2
    • nunito-700.woff2
    • lora-regular.woff2
    • lora-700.woff2

Note: The file:./assets/fonts/ path is relative to your theme’s root directory.

Applying Typography in Styles

Now that fonts are defined, apply them globally in the styles section:

{
  "styles": {
    "typography": {
      "fontSize": "var(--wp--preset--font-size--normal)",
      "fontFamily": "var(--wp--preset--font-family--body)",
      "lineHeight": "var(--wp--custom--line-height--normal)"
    },
    "elements": {
      "heading": {
        "typography": {
           "fontFamily": "var(--wp--preset--font-family--headings)",
          "fontWeight": "700",
          "lineHeight": "var(--wp--custom--line-height--normal)"
        }
      }
    }
  }
}
JSON

How This Works

  • Body text uses Nunito via var(--wp--preset--font-family--body)
  • All headings use Lora via var(--wp--preset--font-family--headings)
  • WordPress automatically generates CSS custom properties from your fontFamilies definitions

Using Custom Colors

Once configured, your custom colors will appear in the WordPress block editor’s color picker. You can reference them in:

  • CSS custom properties: var(--wp--preset--color--primary)
  • Block editor: Color palette in sidebar
  • CSS classes: .has-primary-color, .has-primary-background-color

Using Custom Fonts

Your custom fonts will be available in:

  • Block editor typography controls
  • CSS custom properties: var(--wp--preset--font-family--body) or var(--wp--preset--font-family--headings)

Best Practices

  • Use semantic naming – “primary,” “secondary” instead of “brown,” “cream”
  • Limit font weights – Only include weights you actually use (400, 700 in our case)
  • Use fontDisplay: swap – Prevents invisible text during font loading

Do you like Chisel?

Give it a star on GitHub!