Clash Display & Inter

Clash Display gives Botly its distinctive headings. Inter keeps body copy, navigation, and controls clear and easy to read.

Ideas into impact.

Design with purpose.

Body text — thoughtful digital experiences, built with clarity and care.

H1 — Page heading

H2 — Section heading

H3 — Content heading

H4 — Supporting heading

H5 — Small heading

H6 — Detail heading

Base H1: Inter, Bold (700), 38px font size and 44px line height at all breakpoints. The H1 sample above shows this base style. Page titles use their own classes. The Style Guide title uses detail-title-1: Clash Display, Semibold (600), line height 1, letter spacing -0.03em. Desktop: fluid 48–120px (8.333333vw); tablet and mobile landscape: 64px; mobile portrait: 48px. Use one primary H1 on content pages and follow a logical heading order. This Style Guide includes heading specimens for reference.

A neutral palette keeps the focus on the work. These samples use the same color variables as the site.

Room for every idea.

Use the Spacing collection for consistent gaps and padding. Common values: 8, 16, 24, 32, 48, 64, 80, and 120 px. Responsive layouts adjust spacing at smaller breakpoints.

Buttons share the same rolling-label hover. Underlined text links remove their underline on hover.

Contact Botly

Build once. Reuse consistently.

Shared headers, footer, project cards, pricing cards, achievement accordions, and FAQ cards keep pages consistent. Edit a component to update its instances.

License · Changelog