05.0 COMPONENTS
Live patterns from the brand system.
Five recurring patterns make up the visible vocabulary of Sovereign Stratum: the section eyebrow, the CTA link, the trust-bar, the status-dot, and the dimensional callout. Each is shown live below, rendered with the production CSS, and paired with the source markup so it can be reused unchanged.
Section eyebrow
Locates the reader inside a structured document. Mono caps, lime accent on the number, paper-warm on the label. Always at the top of every section.
<Eyebrow num="01.0" label="MISSION" />CTA link
Two flavours: primary (lime underline, arrow) and secondary (paper-warm dim, no arrow). Used sparingly: one or two CTAs per page, never a wall of buttons.
<a class="cta-link" href="https://getenchilada.com">
Visit getenchilada.com <span class="arrow">→</span>
</a>
<a class="cta-link secondary" href="#mission">
Read our Mission
</a>Trust-bar
Compressed credentials in mono caps, separated by middle-dots. Lives below the hero CTA pair. Three or four claims max, never a feature list in disguise.
<div class="trust-bar">
<span>EU-hosted</span>
<span class="dot">·</span>
<span>Open-Core</span>
<span class="dot">·</span>
<span>Made in Germany</span>
</div>Status-dot
Sovereign-Lime bullet that signals "live / current / sovereign." Used sparingly: once at section eyebrows that mark active state, once on the brand overview overline. Never decorative.
● SOVEREIGN STRATUM · v0.1
<span style="color: var(--sovereign-lime);">●</span> SOVEREIGN STRATUM · v0.1Dimensional callout
Engineering-blueprint signature: a value or year-range bracketed by typesetting drafting marks (⊢ … ⊣), followed by a mono caps label. The brand's most distinctive structural mark. Used twice per page max.
<div class="dim-callout">
<span class="dim-annotation">
<span class="dim-bracket">⊢</span>
<span>2026–2046</span>
<span class="dim-bracket">⊣</span>
</span>
<span class="dim-label">long-horizon</span>
</div>