docs: add editorial patterns (pulled quote, stat figure, arch diagram) to style guide
This commit is contained in:
Jonathan
parent
26173b7396
commit
fa5e6d8414
1 changed files with 147 additions and 0 deletions
|
|
@ -86,6 +86,7 @@ const lucideIcons = [
|
||||||
<a href="#cards">Cards</a>
|
<a href="#cards">Cards</a>
|
||||||
<a href="#icons">Iconography</a>
|
<a href="#icons">Iconography</a>
|
||||||
<a href="#motion">Motion</a>
|
<a href="#motion">Motion</a>
|
||||||
|
<a href="#editorial">Editorial</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -610,6 +611,64 @@ const lucideIcons = [
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 12 · Editorial patterns ─────────────────────────────── -->
|
||||||
|
<section id="editorial" class="sg-section sg-section--light">
|
||||||
|
<div class="sg-inner">
|
||||||
|
<span class="label-md sg-section-label">12 — Editorial patterns</span>
|
||||||
|
|
||||||
|
<h2 class="sg-sub">Pulled quote</h2>
|
||||||
|
<p class="body-sm sg-note">
|
||||||
|
A short, high-impact statement extracted from body copy. Newsreader italic,
|
||||||
|
oversized, with a left-rule in the secondary colour. Muted attribution line below.
|
||||||
|
Use sparingly — one per section maximum.
|
||||||
|
</p>
|
||||||
|
<div class="sg-demo-panel">
|
||||||
|
<blockquote class="pulled-quote">
|
||||||
|
<p class="pulled-quote__text">We can't build our digital fortress on foreign clouds.</p>
|
||||||
|
<footer class="pulled-quote__attribution">— Framing line, Project Bifrost vision</footer>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sg-sub">Large statistic</h2>
|
||||||
|
<p class="body-sm sg-note">
|
||||||
|
A single striking figure, set in Newsreader at display scale, colour-muted.
|
||||||
|
Followed by a short label in Manrope. Used for credibility anchors in pitch sections.
|
||||||
|
</p>
|
||||||
|
<div class="sg-demo-panel">
|
||||||
|
<figure class="stat-figure">
|
||||||
|
<p class="stat-figure__number">97%</p>
|
||||||
|
<figcaption class="stat-figure__label">of AI foundational model usage falls outside EU jurisdiction</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sg-sub">Architecture diagram row</h2>
|
||||||
|
<p class="body-sm sg-note">
|
||||||
|
Four stacked horizontal rows using surface tiers for tonal separation. No borders,
|
||||||
|
no drop shadows. Left label in Manrope tracked uppercase, right body in Newsreader italic.
|
||||||
|
</p>
|
||||||
|
<div class="sg-demo-panel">
|
||||||
|
<div class="arch-diagram">
|
||||||
|
<div class="arch-row" style="background: var(--surface-container-lowest);">
|
||||||
|
<span class="arch-row__label label-sm">AI Model</span>
|
||||||
|
<span class="arch-row__desc body-md">Locally hosted open-source foundation model — no data leaves the infrastructure.</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row" style="background: var(--surface-container-low);">
|
||||||
|
<span class="arch-row__label label-sm">Agents</span>
|
||||||
|
<span class="arch-row__desc body-md">Specialised agents that handle distinct tasks and collaborate.</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row" style="background: var(--surface-container);">
|
||||||
|
<span class="arch-row__label label-sm">Semantic Layer</span>
|
||||||
|
<span class="arch-row__desc body-md">The vocabulary through which the AI understands the organisation.</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-row" style="background: var(--surface-container-high);">
|
||||||
|
<span class="arch-row__label label-sm">Tools</span>
|
||||||
|
<span class="arch-row__desc body-md">The capabilities agents use to act: read files, query systems, produce output.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- ── Footer ─────────────────────────────────────────────── -->
|
<!-- ── Footer ─────────────────────────────────────────────── -->
|
||||||
<footer class="sg-footer">
|
<footer class="sg-footer">
|
||||||
<div class="sg-inner sg-footer-inner">
|
<div class="sg-inner sg-footer-inner">
|
||||||
|
|
@ -1214,6 +1273,94 @@ const lucideIcons = [
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Footer ──────────────────────────────────────────────────── */
|
/* ── Footer ──────────────────────────────────────────────────── */
|
||||||
|
/* ── 12 Editorial patterns ──────────────────────────────────── */
|
||||||
|
.sg-demo-panel {
|
||||||
|
padding: var(--space-8);
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulled quote */
|
||||||
|
.pulled-quote {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 var(--space-6);
|
||||||
|
border-left: 3px solid var(--secondary);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
.pulled-quote__text {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: var(--text-display-md);
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.pulled-quote__attribution {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-label-md);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large statistic */
|
||||||
|
.stat-figure {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.stat-figure__number {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: var(--text-display-xl);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.stat-figure__label {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-body-md);
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
max-width: 28rem;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Architecture diagram */
|
||||||
|
.arch-diagram {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.arch-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10rem 1fr;
|
||||||
|
gap: var(--space-5);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-5) var(--space-6);
|
||||||
|
}
|
||||||
|
.arch-row__label {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.arch-row__desc {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin: 0;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
.sg-footer {
|
.sg-footer {
|
||||||
background: var(--on-surface);
|
background: var(--on-surface);
|
||||||
padding: var(--space-8) 0;
|
padding: var(--space-8) 0;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue