features.hardware-spec-table · Spec table

A features pattern from Industrial Hardware, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 5. Give the section root data-pattern="features.hardware-spec-table". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A product shot on a bordered surface plate with a mono caption in 1–5; a ruled spec table in 6–12: index, part, description and value in mono.
Slots
label, title, image, caption, meta, items[6..6]
Grid areas
product 1-5 · table 6-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E5E3DE · text #262522 · heading #111110 · accent #FF5B14 · accent2 #1C1C1A · Archivo / Archivo · radius 6px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Columns 1–5: part label, h2, a 4:3 product shot on a bordered surface plate and a mono caption (shot and caption hidden on phones, where the table carries the section). Columns 6–12: a mono header over six ruled spec rows, each a 12-column row: mono index (link) in 1, name (600) in 2–5, a muted line in 6–10 (hidden on phones), the value in mono, right-aligned, in 11–12.

What you get

What we do

Booking projects from June 2026

01

Positioning

Included

02

Identity systems

New

03

Websites

Built in

04

Sales enablement

Standard

05

Product naming

Optional

06

Brand governance

Always on