Block & Deck Latest guides
Style guide

Block & Deck style guide

Colours, type and the reusable blocks every page is built from. Change a token in src/css/styles.css and the whole site follows.

Colour

Palette

Orange and cream lead. Moss, Sky and Grape tell you which section you’re in: Minecraft, Pokémon and Fortnite. Sun and Redstone are for difficulty and warnings only. Dark mode swaps every token automatically.

Aa
Orange#FF6414var(--brand)Primary. Top bar, main buttons, logo.
Aa
Orange text#B3410Avar(--brand-text)Links and labels on cream.
Aa
Cream#FFF7ECvar(--bg)Page background.
Aa
Cream deep#FBEBD6var(--bg-alt)Alternate bands, hovers.
Aa
White#FFFFFFvar(--surface)Cards and menus.
Aa
Ink#1C1511var(--text)Text, outlines, shadows.
Aa
Moss#2F7D4Avar(--mc)Minecraft section, Easy.
Aa
Sky#2459C9var(--tcg)Pokémon section (TCG and VGC).
Aa
Grape#6B3FC9var(--fn)Fortnite section.
Aa
Sun#EDAE00var(--sun)Medium, highlights, focus ring.
Aa
Redstone#D23C2Evar(--red)Hard, warnings.
Contrast rule

Orange is too light for text on cream (about 2.7:1). On orange, use Ink text, never white. For orange text on cream, use Orange text #B84300 (about 5:1).

Type

Fonts and scale

Display

Lilita One

Headings only. Chunky and friendly, like a block.

Body

Figtree

Everything you read. Weights 400, 600, 700, 800.

Data

JetBrains Mono

Card counts, block counts, coordinates.

h1 · step-4

Build it, wire it

h2 · step-3

Redstone tutorials

h3 · step-1

Hidden 2×2 piston door

lead · step-1

Short intro under a page title.

body · step-0

Body copy at 16px with 1.6 line height, kept to about 65 characters wide.

eyebrowSection label
Spacing & shape

One scale for everything

Gaps between blocks use these steps only. Corners are 14px on cards, pill-shaped on buttons and badges. Borders are 2px Ink on things you can press.

--s14px
--s28px
--s312px
--s416px
--s524px
--s640px
--s764px
Blocks

Reusable components

Each block is one CSS class. Copy the markup, change the words. Set data-section="minecraft", "pokemon" or "fortnite" on a wrapper and the section colour follows.

Buttons · .btn
PrimaryGhostSmall
MinecraftPokémonFortnite
Badges · .badge
RedstoneBuildDecklistGuideFortnite
EasyMediumHard
Card · .card
RedstoneEasy

Card title

One or two lines saying what the guide is.

Read tutorial
Accordion (on-page dropdown) · .acc
Open by default

Use for steps, materials and full decklists.

Closed

Hidden until clicked.

Steps · .steps
  1. First thingOnly use numbers when order matters.
  2. Second thingThe number colour follows the section.
Deck bar · .deckbar
Pokémon 16Trainer 32Energy 12
Callout · .callout

Tips, warnings and placeholders.

Materials list · .materials
  • Sticky pistons8
  • Redstone dust14
Jump links · .chips
ColourTypeBlocks
Consistency

House rules for every page

Do

  • Start every page with a page hero: eyebrow, h1, lead, jump links.
  • Keep the main menu behind the Menu button. It slides out across the top bar. Menu items have no arrows: tapping one opens its three-column mega menu (pages, popular, featured), and the first link goes to that section’s page.
  • Alternate plain and .section--alt bands down the page.
  • Give every guide card a type badge and a difficulty badge.
  • Put materials or card counts before the steps.
  • Add or change menu items in the editing screen, under Menu. Featured guides come from the Featured switch on each guide.

Don’t

  • Put white text on orange.
  • Use Moss, Sky or Grape outside their own sections.
  • Invent new colours or font sizes inside a page.
  • Use official game logos or character art you don’t have rights to.