Text styles
Body, lead, muted, small and eyebrow.
Lead paragraph for introductions and page summaries.
Body text at 14px with a 1.5 line height. Comfortable for dense product UI.
Muted supporting text for descriptions and helper content.
Subtle caption text for timestamps and metadata.
Eyebrow label
Monospace · INV-2041 · sk_live_9f2a
Gradient text for hero moments
View code
<p class="slate-lead">Lead paragraph for introductions and page summaries.</p>
<p>Body text at 14px with a 1.5 line height. Comfortable for dense product UI.</p>
<p class="slate-muted slate-text-sm">Muted supporting text for descriptions and helper content.</p>
<p class="slate-subtle slate-text-xs">Subtle caption text for timestamps and metadata.</p>
<p class="slate-eyebrow">Eyebrow label</p>
<p class="slate-mono slate-text-sm">Monospace · INV-2041 · sk_live_9f2a</p>
<p class="slate-gradient-text slate-h3">Gradient text for hero moments</p>
Designing for density
Software for work lives or dies on how much it can show without feeling crowded. Tight type, hairline borders and restrained colour do most of the work.
Use whitespace to group, not to decorate. When everything has a border, nothing does.
View code
<div class="slate-prose">
<h3 class="slate-h3">Designing for density</h3>
<p>Software for work lives or dies on how much it can show without feeling crowded. <strong>Tight type, hairline borders and restrained colour</strong> do most of the work.</p>
<p>Use whitespace to group, not to decorate. When everything has a border, nothing does.</p>
</div>
Run npm install slateos then import the stylesheet.
.card {
border: 1px solid var(--slate-border);
border-radius: var(--slate-radius-lg);
}
View code
<p>Run <code class="slate-code">npm install slateos</code> then import the stylesheet.</p>
<pre class="slate-pre" style="width:100%"><code>.card {
border: 1px solid var(--slate-border);
border-radius: var(--slate-radius-lg);
}</code></pre>