Skip to content
MS Keys Gate
Concept / DemoWordPress theme

Broadsheet — WordPress theme

Shows theme.json design tokens, block patterns and full-site-editing templates.

A concept by MS Keys Gate, built to demonstrate capability. It is not a client project and was never commissioned.

Screens

broadsheet-theme.example

Front page. A lead story, a secondary rail and section blocks, all patterns.

What it sets out to prove

  • Express the whole visual system as theme.json tokens editors cannot break
  • Ship patterns for the layouts a newsroom actually assembles
  • Keep the front-end CSS small enough to inline the critical part

Built with

  • WordPress block theme
  • theme.json
  • Block patterns
  • PHP

Tokens, not hard-coded values

Colour, spacing and type scales live in theme.json; templates reference them by name, so a rebrand is one file.

Patterns over page builders

Front page, article and section-hub layouts are registered patterns — editors compose, they do not design.

A look at the code

A slice of theme.json — colour and spacing as tokens

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "ink", "color": "#14161d", "name": "Ink" },
        { "slug": "paper", "color": "#f7f6f2", "name": "Paper" },
        { "slug": "accent", "color": "#5a4a7a", "name": "Accent" }
      ]
    },
    "spacing": {
      "spacingScale": { "steps": 7 },
      "units": ["px", "rem", "vw"]
    },
    "typography": {
      "fontFamilies": [
        { "slug": "body", "name": "Body", "fontFamily": "Newsreader, Georgia, serif" }
      ]
    }
  }
}

Illustrative snippet from the concept (json).

Take this further

The thinking here carries straight into a real project. See the WordPress development service, or tell us what you have in mind.