IYU Labs / Design / 03
One family. A clear hierarchy.
Manrope connects the wordmark, headlines and interface. Scale and weight create hierarchy. System monospace is reserved for tokens and other values you might copy.
One family, different scales
Manrope / 550
From idea to
working software.
Manrope / 400
Body text has an open line height and a comfortable measure. Keep most paragraphs below 64 characters per line.
0123456789
Try the scale
Headings grow with the viewport, within fixed limits. The smallest text stays readable at narrow widths.
This edits the samples only. Resize the window to see the fluid scale respond.
display / clamp(3rem, 6.2vw, 5.75rem)
From idea to working software.
h1 / clamp(2.75rem, 5.5vw, 4.75rem)
From idea to working software.
h2 / clamp(2rem, 3.8vw, 3.5rem)
From idea to working software.
h3 / 1.5rem
From idea to working software.
body / 1rem
From idea to working software.
small / 0.875rem
From idea to working software.
Space and composition
Use the shared Container for a centered page width of up to 78rem. Its side padding grows from 20px to 32px at the small breakpoint. Keep longer copy near 64 characters per line; centered introductions use a shorter measure.
space-1: 0.25remspace-2: 0.5remspace-3: 0.75remspace-4: 1remspace-6: 1.5remspace-8: 2remspace-12: 3remspace-16: 4remspace-24: 6remspace-32: 8remHome chapters have viewport-scale minimum heights and grow with their contents. The product stage reserves room for transformed screenshots and keeps equal padding inside the selector. On narrower screens, split sections and project lists stack. Never fix a section height in a way that clips enlarged text.
Page introductions are centered, while service descriptions, project details and company copy stay left aligned. The homepage headline has its own bounded size in facelift.css; the editable specimens above show the general type tokens.
import { Container } from '@/components/layout/Container'
<Container>
<div className="section-heading centered">
<h2>Selected work</h2>
<p>Software products and a client website rebuild.</p>
</div>
</Container>Local fonts, open licenses
Social images use local TrueType files at render time. Keep those fonts in the project image route’s deployment trace. The build runs check-og-trace.mjs to catch missing packaged fonts before publication.
Manrope is self-hosted under the SIL Open Font License. Bricolage Grotesque and Instrument Sans remain in the isolated font comparison. Instrument Sans also serves the social image renderer.