The deister software design language, rendered live.
Every section, component and variant the deister.io site ships with — shown in its real environment, using the same XSL templates the public pages use. The companion piece is the editorial canon (87 forbidden phrases, enforced mechanically at build time).
How to read this page
Every section below renders the same component the public site uses. The text above each section names the component ; the text below names the attributes that control its variants.
Editorial canon
87 forbidden phrases / patterns audited at build time. Run .claude/skills/editorial-canon/audit.sh ; build aborts on violation. The canon is the copy guard ; this page is the visual guard.
Brand discipline
deister software (lowercase brand identifier). Carbon Blue 60 accent. Helvetica Neue typography. "Since 1988" heritage anchor visible across the site. Three engineering anchors : Spain (Barcelona, Madrid, Sevilla), Peru (Lima), Colombia (Barranquilla), plus Asia engineering centre (Islamabad).
Maintenance rule
When you add a new section type to sections.xsl, add one live example here. When you change a component's CSS, this page is the first place to verify the change does not drift.
Brand anchors — heritage as receipt.
Every number below is a verifiable claim — not a marketing rounding. The heritage register is the differentiator vs the modern platform-cloud category.
Section : <story> — default tone
The default story section. Two paragraphs of prose, no imagery, no list structure. Used for bridge passages between denser components — Axional ERP module list to module-specific feature pages, for example.
Tone attribute : default (no attribute) renders on the light- grey alt background. tone="dark" for carbon black ; tone="tinted" is a no-op for <story> because the default background is already tinted.
Section : <story> — tone="dark"
The dark variant. Carbon-black background, near-white body text. Use sparingly — never three dark bands in a row. Subtitle and body text are forced to #f4f4f4 on dark backgrounds via the .section--dark override.
On deister.io the dark variant pairs well with the "Since 1988" heritage anchor — gravitas reads against carbon black.
Section : <pillars> — 4-up grid of feature cards
Grid of cards, each with icon, title and body. Used for "what the practice covers" framings on Axional module pages and industry pages. 3–6 pillars per block.
One purpose per card
Each pillar says one thing. If a pillar's body grows past four lines, it is two pillars in disguise.
Icon supports, title leads
The icon is a visual chip. The title carries the meaning. If they disagree, the title wins.
Present tense, no apology
The platform owns X. The runtime does Y. Not "we have not yet" or "we are working on". Present-tense statements only.
3–6 per block
Three reads as a frame ; four as a grid ; six as a catalogue. Past six, switch to feature-rows.
Section : <strip>
Four-up card row, slightly denser than pillars. Used just below the hero as the "four anchors" band — what the page is going to say, in four short statements.
Always four
Strip is canonically four items. Three reads thin ; five wraps awkwardly. If the content wants five+, it is a pillars block, not a strip.
Tone attribute
tone="tinted" for the light-grey variant. tone="dark" for carbon black. Default is white.
Body is short
Each strip card's body is 1–2 sentences. Longer body belongs in a pillars or feature-rows block, not in a strip.
Section : <comparison> — analyst-deliverable table
3-column comparison with one column highlighted. Used on the Axional overview to position vs SAP S/4HANA and others. The highlighted column is always Axional / deister software.
| SAP S/4HANA | Axional | Mid-market ERP | |
|---|---|---|---|
| Best fit | 100-country multinational, single ERP standard | ✓ Spain-led complex enterprise, fiscally rich, multi-entity | Single-country, single-entity, modest fiscal complexity |
| Spanish fiscal compliance | Yes, via localisation modules | ✓ Yes, native — built into the engine | Variable — partner-pack quality |
| Implementation cost | High — multi-year, multi-million | ✓ A fraction of SAP equivalent | Low — but ceiling hits quickly |
| Time to value | 12–24 months | ✓ 3–12 months | 3–6 months |
Section : <feature-rows> — alternating image + bullet rows
One row per capability. Image on one side, copy on the other, alternating left/right. Used on industry pages and Axional module pages.
One capability per row, breathing space between.
Used on industry and module pages to walk through 4–6 capabilities in sequence. Each row sits long enough to register before the next one starts.
- Bullets carry sub-features — Each bullet has a short title (bold) and a body paragraph. Use 3–4 bullets per row.
- Image is supporting — The image (or placeholder) sits beside the prose. The prose carries the meaning.
- Alternation creates rhythm — Row 1 image-left, row 2 image-right.
image-src attribute to the source element.
Recommended: 1600 × 900 px (16:9)
Formats : PNG · JPEG · WebP · SVG
Non-canonical uploads are rejected — aspect ratio outside 16:9 ±2%, dimensions outside 800×450 … 3840×2160, or excessive byte size.
The second row alternates to the other side.
When image assets are not yet shipped, the row shows a dashed-border placeholder slot with the row's title as a label.
- Placeholder slots are intentional — The dashed border + label reads as work-in-progress without being apologetic.
- Image specs in the alt-text — Every placeholder carries the capture spec (1920 × 1080, 16:9, JPEG q80, ≤ 350 KB).
- Drop-in replacement when ready — Replace the image-src ; the layout doesn't change.
image-src attribute to the source element.
Recommended: 1600 × 900 px (16:9)
Formats : PNG · JPEG · WebP · SVG
Non-canonical uploads are rejected — aspect ratio outside 16:9 ±2%, dimensions outside 800×450 … 3840×2160, or excessive byte size.
Section : <team-grid> — grouped headshot cards
Used on /company/team. Cards group by role family. Bracketed placeholder names + bracketed bios + image-pending placeholder block are the canonical shape until real headshots and approved names land.
Demo group
Each card is a person. Name, role and bio. Headshots are 800 × 800 1:1 JPEG q80 ≤ 150 KB.
image-src attribute to the source element.
Recommended: 800 × 800 px (1:1 square)
Formats : PNG · JPEG · WebP · SVG
Non-canonical uploads are rejected — aspect ratio outside 1:1 ±2%, dimensions outside 400×400 … 2400×2400, or excessive byte size.
[ Name once approved ]
Role · descriptor
[ One- or two-sentence bio once approved. ]
image-src attribute to the source element.
Recommended: 800 × 800 px (1:1 square)
Formats : PNG · JPEG · WebP · SVG
Non-canonical uploads are rejected — aspect ratio outside 1:1 ±2%, dimensions outside 400×400 … 2400×2400, or excessive byte size.
[ Name once approved ]
Role · descriptor
[ One- or two-sentence bio once approved. ]
image-src attribute to the source element.
Recommended: 800 × 800 px (1:1 square)
Formats : PNG · JPEG · WebP · SVG
Non-canonical uploads are rejected — aspect ratio outside 1:1 ±2%, dimensions outside 400×400 … 2400×2400, or excessive byte size.
[ Name once approved ]
Role · descriptor
[ One- or two-sentence bio once approved. ]
Copy register — what the deister.io canon enforces
Forbidden patterns specific to deister (in addition to the shared 87) : Deister (use deister software lowercase) ; Deister.com (the canonical URL is deister.io) ; Latin America as a footprint claim (use Peru or Colombia where accurate ; reserve "the wider region" for forward-looking aspiration) ; references to a Payroll module as a product (Payroll is not a deister.io product — removed from the navbar and from every customer / industries / services page).
Required register : present-tense statements, every claim enumerable, no apologetic backstory. The headline test is — would a senior consultant from Accenture, Deloitte, PwC, KPMG, EY or McKinsey publish this sentence in a customer- facing deliverable ? If no, cut it. The "Big-Four-grade" voice is the brand voice ; departures from it are unintentional and should be edited out.
Drift watch — when the design is wandering
If any of the following start appearing, the site is drifting and should be reviewed before shipping : a second accent colour with weight (anything other than Carbon Blue 60 carrying weight) ; illustrations softer than abstract-geometric (cartoons, mascots) ; stock photography of "happy people in modern office" in any hero ; "Deister" with the upper-case D in body copy (brand identifier is deister software, lowercase) ; payroll re-appearing as a packaged product ; "Latin America" used to describe the operational footprint rather than the regional aspiration.
The editorial canon catches most of the copy drift mechanically. The visual + brand-architecture drift has no mechanical guard — this page is it. The companion piece is docs/audits/competitor-design-audit.md, which documents the design lineage and the failure modes to avoid.