Cricket Club

This walkthrough builds a complete xtyle definition for a fictional community cricket club. It covers all three pillars and demonstrates context variants.

The Definition

{
  "xtyle": "1.0",
  "name": "crossfield-cricket-club",
  "parent": "../crossfield-league.xtyle.json",

  "visual": {
    "colors": {
      "palette": { "crimson": "#DC143C", "cream": "#FFFDD0", "charcoal": "#36454F" },
      "semantic": { "primary": "crimson", "surface": "cream", "text": "charcoal" }
    },
    "typography": {
      "families": { "heading": "Oswald", "body": "Source Sans Pro", "mono": "Fira Code" },
      "scale": { "base": "16px", "ratio": 1.25 }
    }
  },

  "verbal": {
    "identity": {
      "name": "Crossfield Cricket Club",
      "tagline": "Gentlemen don't sledge. Usually.",
      "description.short": "Community cricket in south Manchester."
    },
    "jargon": {
      "sledge": "Verbal gamesmanship. Frowned upon. Mostly.",
      "nightwatchman": "A lower-order batter sent in to protect a better one. Noble sacrifice."
    }
  },

  "voice": {
    "tone": { "energy": "dry wit, understated", "formality": "casual-leaning" },
    "values": { "principles": ["fair play", "community first", "tea before trophies"] },
    "positioning": {
      "is": "a local club that takes the game seriously and itself not at all",
      "isNot": "a competitive academy, a pub team, or a brand exercise"
    }
  },

  "variants": {
    "match-day": {
      "visual": {
        "colors": { "semantic": { "surface": "crimson", "text": "cream" } }
      }
    }
  }
}

What’s Happening

Cascade

The definition inherits from crossfield-league.xtyle.json. The league may mandate fonts, voice tone, or common branding — the club inherits all of that and only overrides what it needs.

Visual

Three palette colors with semantic mappings. The typography stack specifies heading, body, and mono fonts. The type scale uses a major third ratio (1.25).

Verbal

The club’s name, tagline, and short description are declared as identity tokens. Domain-specific jargon gets its own section with definitions.

Voice

Tone, values, and positioning guide how the club communicates. An LLM consuming this definition knows to write with dry wit, prioritize fair play, and avoid corporate speak.

Variants

The match-day variant flips the surface and text colors — crimson background with cream text — for match-day communications.

Compiling to CSS

npx xtyle-css crossfield-cricket-club.xtyle.json -o tokens.css

Produces:

:root {
  --xtyle-color-crimson: #DC143C;
  --xtyle-color-cream: #FFFDD0;
  --xtyle-color-charcoal: #36454F;
  --xtyle-color-primary: #DC143C;
  --xtyle-color-surface: #FFFDD0;
  --xtyle-color-text: #36454F;
  --xtyle-font-heading: Oswald;
  --xtyle-font-body: Source Sans Pro;
  --xtyle-font-mono: Fira Code;
  --xtyle-font-size-base: 16px;
  --xtyle-font-scale-ratio: 1.25;
}