joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: add editorial patterns (pulled quote, stat figure, arch diagram) to style guide

Browse source
This commit is contained in:
Jonathan 2026-04-19 20:28:10 +02:00
parent 26173b7396
commit fa5e6d8414
1 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/pages/style-guide.astro
View file

@ -86,6 +86,7 @@ const lucideIcons = [
<a href="#cards">Cards</a>
<a href="#icons">Iconography</a>
<a href="#motion">Motion</a>
<a href="#editorial">Editorial</a>
</nav>
</div>
</header>
@ -610,6 +611,64 @@ const lucideIcons = [
</div>
</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 class="sg-footer">
<div class="sg-inner sg-footer-inner">
@ -1214,6 +1273,94 @@ const lucideIcons = [
}
/* ── 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 {
background: var(--on-surface);
padding: var(--space-8) 0;