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

docs: add ProjectLockup to style guide

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

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

@ -2,6 +2,7 @@
// Internal design system review page. // Internal design system review page.
// Remove or gate behind auth before production launch. // Remove or gate behind auth before production launch.
import BaseLayout from '../layouts/BaseLayout.astro'; import BaseLayout from '../layouts/BaseLayout.astro';
import ProjectLockup from '../components/ProjectLockup.astro';
const surfaces = [ const surfaces = [
{ token: '--surface-container-lowest', hex: '#fffcf7', label: 'surface-container-lowest', note: 'Floating / most elevated' }, { token: '--surface-container-lowest', hex: '#fffcf7', label: 'surface-container-lowest', note: 'Floating / most elevated' },
@ -116,6 +117,35 @@ const lucideIcons = [
Clear space equal to the spear-head height on all sides. Clear space equal to the spear-head height on all sides.
Never distort, recolour, or place on a competing textured background. Never distort, recolour, or place on a competing textured background.
</p> </p>
<h2 class="sg-sub">ProjectLockup component</h2>
<p class="body-sm sg-note">
Definitive Emphasis pattern applied to the project name.
"Project " in Newsreader regular, "Bifrost" in bold italic, terminal period.
Fenja wordmark below at reduced opacity. Three sizes × two alignments.
</p>
<div class="lockup-demo-grid">
<div class="lockup-demo-cell">
<span class="label-sm sg-demo-label">hero · left</span>
<ProjectLockup size="hero" alignment="left" />
</div>
<div class="lockup-demo-cell">
<span class="label-sm sg-demo-label">lg · left</span>
<ProjectLockup size="lg" alignment="left" />
</div>
<div class="lockup-demo-cell">
<span class="label-sm sg-demo-label">md · left</span>
<ProjectLockup size="md" alignment="left" />
</div>
<div class="lockup-demo-cell lockup-demo-cell--centered">
<span class="label-sm sg-demo-label">hero · center</span>
<ProjectLockup size="hero" alignment="center" />
</div>
<div class="lockup-demo-cell">
<span class="label-sm sg-demo-label">md · left · no wordmark</span>
<ProjectLockup size="md" alignment="left" showWordmark={false} />
</div>
</div>
</div> </div>
</section> </section>
@ -730,6 +760,31 @@ const lucideIcons = [
display: block; display: block;
} }
/* ── ProjectLockup demo ─────────────────────────────────────── */
.lockup-demo-grid {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-top: var(--space-6);
}
.lockup-demo-cell {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-8);
background: var(--background);
border-radius: var(--radius-md);
}
.lockup-demo-cell--centered {
background: var(--surface-container-low);
align-items: center;
}
.sg-demo-label {
color: var(--on-surface-muted);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* ── 02 Colour ───────────────────────────────────────────────── */ /* ── 02 Colour ───────────────────────────────────────────────── */
.swatch-row { .swatch-row {
display: grid; display: grid;