03 · Foundations
Typography
General Sans carries the interface. Manrope appears only in small editorial metadata. The hierarchy comes from scale, weight, and spacing rather than from decorative type.
General Sans, the primary typeface
General Sans is loaded as one variable-normal Fontshare webfont, the exact file used on shibin.co. Use it for headings, body copy, navigation, labels, and controls. One 200–700 face keeps every weight consistent across both sites.
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Some shorter words follow to give the line a sense of rhythm.
Your brand’s AI, that sells for you. Use this role for introductions, project descriptions, and other short supporting statements.
The quick brown fox jumps over the lazy dog. Articles and longer explanatory passages use this relaxed regular-weight role in --text-secondary on white.
Captions, metadata, helper text. Used sparingly, usually in text-muted or text-faint.
Section label
Manrope, editorial metadata
Manrope is reserved for quiet article context such as dates, breadcrumbs, reading time, and case-study metadata. It should never replace General Sans in headings, body copy, navigation, or controls.
Rules
- Sentence case for all headings, labels, buttons, and nav.
- Tight tracking on large type (−0.015em to −0.025em). Body text stays at default.
- Use 16 / 500 / 1.55 for short supporting copy. Keep articles and longer explanatory prose at 16 / 400 / 1.75.
- Color discipline: headings in
--foreground, body in--text-secondary, labels in--text-faint. - Keep roles separate. General Sans is the interface voice; Manrope is metadata only.
- Load one variable-normal General Sans face from Fontshare. Do not mix it with static weight files or bundle and redistribute the font.