Typography

Our type system ensures readability and distinctiveness across all applications.

Main Font

Typeface Used

Wotfard

A modern geometric sans-serif that balances legibility with personality. It's versatile, robust, and perfect for both UI and marketing materials.

Regular Semibold Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Font Hierarchy

Scale Ratio: 1.618 (Golden Ratio)

A clear type scale allows users to easily understand the importance of content.

H1 / Display

Step Into the Light.

Size Ratio 1.618

H2 / Section Header

Selected Case Studies

Size Ratio 1.618

H3 / Subheader

Construction Industry

Size Ratio 1.618

H4 / Card Title

Project Overview

Size Ratio 1.618

P / Lead

This is a lead paragraph used for introductions and summaries. It stands out from the body text.

P / Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

AI Prompt for Typography

Copy this prompt to instruct your AI assistant on how to use the typography system.

1. Main Font Family: "Wotfard", sans-serif
2. Scaling Ratio: 1.618 (Golden Ratio)
3. Base Size for H1: 104.71696px

Implement the CSS variables in the :root selector:
--font-base-constant: 104.71696px;
--font-ratio: 1.618;
--h1-size: var(--font-base-constant);
--h2-size: calc(var(--h1-size) / var(--font-ratio));
--h3-size: calc(var(--h2-size) / var(--font-ratio));
--h4-size: calc(var(--h3-size) / var(--font-ratio));
--h5-size: calc(var(--h4-size) / var(--font-ratio));
--h6-size: calc(var(--h5-size) / var(--font-ratio));

Apply the font styles:
- All headings (h1-h6) use the "Wotfard" font-family.
- h1: font-weight 700, text-transform uppercase, line-height 1.1.
- h2-h6: font-weight 600.
- P / Lead: font-size 1.25rem, used for introductions and summaries.
- P / Body: standard body text size (1rem), regular weight.