shadszn/ui

Typography

Font specimens and the type scale.

Inter

shadszn/ui uses Inter as its primary typeface. Inter is a variable font designed for screens, with excellent legibility at small sizes and a clean geometric style that complements the glass morphism aesthetic.

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Type scale

The type scale is defined as CSS custom properties and maps to Tailwind text utilities. Each size has a paired line-height for consistent vertical rhythm.

xs
The quick brown fox jumps over the lazy dog
sm
The quick brown fox jumps over the lazy dog
base
The quick brown fox jumps over the lazy dog
lg
The quick brown fox jumps over the lazy dog
xl
The quick brown fox jumps over the lazy dog
2xl
The quick brown fox jumps over the lazy dog
3xl
The quick brown fox jumps over the lazy dog
4xl
The quick brown fox jumps over the lazy dog
5xl
The quick brown fox jumps over the lazy dog

Font weights

Four weight stops are used throughout the system. Regular for body text, Medium for emphasis, Semibold for headings and labels, and Bold for strong emphasis.

Regular400
The quick brown fox jumps over the lazy dog
Medium500
The quick brown fox jumps over the lazy dog
Semibold600
The quick brown fox jumps over the lazy dog
Bold700
The quick brown fox jumps over the lazy dog

Monospace

Code blocks, inline code, and technical values use a monospace stack: SF Mono, Monaco, Consolas, monospace.

13px / Regular

const theme = "szns-dark";
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {} [] () => !== ===

15px / Regular

const theme = "szns-dark";
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {} [] () => !== ===

11px / Medium (captions, metadata)

--bg-deep: #0A0820;
--brand-lavender: #E8E3FF;
--brand-orange: #FF8B4B;

Usage guidelines

  • Page headings use text-3xl (30px) with semibold weight.
  • Section headings use text-xl (20px) with semibold weight.
  • Body text uses text-base (15px) with regular weight and secondary color.
  • Captions and metadata use text-xs (11px) with tertiary or muted color.
  • Inline code uses the monospace stack at text-sm (13px) with the lavender accent color.