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

fix: style-guide polish — section labels, representative content, emphasis scope

Browse source
This commit is contained in:
Jonathan 2026-04-18 16:42:54 +02:00
parent e6b97beb68
commit 918231f5f2
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -264,6 +264,12 @@ const lucideIcons = [
The terminal keyword or phrase of every product headline is set in Newsreader Bold Italic.
Everything before it stays in regular weight. Every headline ends with a period.
</p>
<p class="body-sm sg-note">
Scope: applies to all display and headline scales — <code>display-xl</code>, <code>display-lg</code>,
<code>display-md</code>, <code>headline-lg</code>, <code>headline-md</code>, <code>headline-sm</code>.
Not applied to <code>title</code> (sans), <code>body</code>, <code>label</code>, or <code>lead</code>.
Never applied to user-generated content (contribution text, document titles, notes).
</p>
<div class="emphasis-examples">
<div class="display-md emphasis-headline">
A quiet place to keep <em class="emphasis-keyword">what you are reading.</em>
@ -411,11 +417,11 @@ const lucideIcons = [
<div class="field">
<label class="field-label" for="sg-org">Organisation</label>
<input class="field-input" id="sg-org" type="text" value="Statens Serum Institut" />
<span class="field-hint">Auto-saved a moment ago.</span>
<span class="field-hint">e.g. Auto-saved a moment ago.</span>
</div>
<div class="field">
<label class="field-label" for="sg-idea">Your idea</label>
<textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="A question, an inspiration, or an idea…"></textarea>
<textarea class="field-input field-textarea" id="sg-idea" rows="3" placeholder="What if the wiki could auto-link to relevant meeting notes when I paste a concept?"></textarea>
</div>
<div class="field">
<label class="field-label" for="sg-disabled">Read-only</label>
@ -669,6 +675,12 @@ const lucideIcons = [
.sg-section-label {
display: block;
margin-bottom: var(--space-7);
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--text-label-md);
color: var(--on-surface-muted);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.sg-sub {
font-family: var(--font-sans);