Block Accents.

A flat list is hard to scan. A Colored Block is a semantic chunk. Block Accents group related thoughts and assign them a mood instantly.

The Accent Palette

Every operator has a color. When used as a block accent, that color paints the left border, creating a visual "folder" for the content inside.

Pros / Supporting

Arguments for, benefits, positive data.

Cons / Obstacles

Arguments against, costs, negatives.

Risks / Critical

Danger zones, blockers, failures.

Results / Outcomes

Final decisions, shipped features.

Tensions / Trade-offs

Conflicting goals, gray areas.

Core / Definitions

The foundational context of the block.

The Syntax

Block accents are applied via the ac attribute on a container element.

                                <cln-block ac="plus">

                                  <cln-line>+ Benefit 1</cln-line>

                                  <cln-line>+ Benefit 2</cln-line>

                                </cln-block>

Artifact: The Decision Matrix

The most powerful application of Block Accents. Visualizing a trade-off decision without reading a word.

// DECISION: Rewrite Legacy Service vs Buy SaaS

Arguments for Rewrite

Full control over data architecture

Vendor lock-in eliminated

Can optimize for our specific scale

Arguments against Rewrite

6-month timeline (Time to Market risk)

Requires 2 senior engineers (Cost)

Opportunity cost: delays Feature X

Verdict

→

Buy SaaS for now (MVP). Rewrite if MRR > $50k/mo.

trigger: Financial scale

Visual Hierarchy

As blocks nest, their borders change style to prevent visual clutter. Solid → Dashed → Dotted.

Level 1: Solid Border (The Main Container)

Level 2: Dashed Border (Sub-context)

Level 3: Dotted Border (Deep Detail)

Level 4: Faintest (Rarely used)