Typography
Typography creates clarity, builds hierarchy, and carries our brand voice. Every typographic choice supports readability and trust across the Cüte platform.
Approach
We use BR Sonoma as our primary typeface across all touchpoints. Its clean, geometric forms balance friendliness with professionalism, reflecting our approach to circular fashion.
Primary
Headlines, navigation, and UI elements
Aa
BR Sonoma
Weights
Three weights for clear hierarchy
Regular
Medium
Semibold
400 / 500 / 600
International
Full glyph support for global audiences
Ää Öö Üü Çç Ññ
Extended Latin
a17 typesets f-*
Semantic, responsive type tokens generated by the a17 Tailwind Typography plugin from frontend.config.json. Each token resolves to a different size per breakpoint — use these for headings, hero copy, and body content across blocks and patterns.
Resize the viewport to see size changes at the listed breakpoints.
f-display-1Circular
text-6xlsmtext-7xlmdtext-8xllgtext-9xlxltext-10xlfont-semiboldleading-14tracking-tightf-display-2Circular
text-5xlsmtext-6xlmdtext-7xllgtext-8xlxltext-9xlfont-semiboldleading-12tracking-tightf-display-3Circular
text-4xlsmtext-5xlmdtext-6xllgtext-7xlxltext-8xlfont-semiboldleading-10tracking-tightf-heroCircular
text-7xlsmtext-8xlmdtext-9xllgtext-10xlxltext-12xlfont-boldleading-16tracking-tightf-heading-1Circular
text-4xlsmtext-4xlmd3.25remfont-semiboldleading-9tracking-tightf-heading-2Circular
text-2xlmdtext-3xllgtext-4xlfont-mediumleading-8tracking-normalf-heading-3Circular
text-2xlmdtext-3xlfont-mediumleading-8tracking-normalTailwind scale text-*
Tailwind's size utilities, overridden in our theme to follow a Major Third (1.2) musical scale — each step is ≈1.2× the previous. Use these for one-off UI text (labels, captions, micro-copy) where a semantic typeset would be overkill. Sizes are not responsive — combine with breakpoint prefixes (md:text-lg) when needed.
text-3xsCircular
text-xsCircular
text-smCircular
text-baseCircular
text-lgCircular
text-xlCircular
text-2xlCircular
text-3xlCircular
text-4xlCircular
text-5xlCircular
text-6xlCircular
text-7xlCircular
text-8xlCircular
text-9xlCircular
text-10xlCircular
text-12xlCircular
Font specimen
The complete character set of BR Sonoma, including Latin extended glyphs, numerals, and special characters.
Primary typeface
BR Sonoma
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numbers
0123456789
Currency
€$£¥₹₿¢
Special characters
!@#$%^&*()_+-=[]{}|;':",./<>?~`
Best practices
Guidelines for using typography effectively across the platform.
Do
- Reach for f-* typesets first — they scale responsively
- Use text-* utilities for one-off UI labels and micro-copy
- Maintain consistent line heights for readability
- Use semibold for emphasis and hierarchy
- Keep body text at 16px minimum for interfaces
- Use proper contrast ratios (4.5:1 minimum)
- Limit line length to 65–75 characters for body text
Don't
- Hardcode font-size in style props or arbitrary values
- Mix f-* and text-* on the same element
- Use more than 3 font weights per layout
- Set body copy smaller than 14px
- Use all caps for passages longer than a few words
- Reduce line height below 1.3 for multi-line text
- Use letter-spacing on body text
Accessibility
Typography plays a crucial role in making our platform accessible to everyone. We follow WCAG 2.1 AA standards.
Contrast
4.5:1
Minimum contrast ratio for normal text. Large text (24px+) requires 3:1.
Minimum size
16px
Base font size for body text. All sizes use relative units so users can scale.
Line length
75ch
Maximum characters per line for comfortable reading across devices.