Typography & Text
Title
Heading component that uses the theme’s heading font (Montserrat).
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text
Body text component using the theme’s body font (Source Sans 3).
Sizes
Extra Small text (xs)
Small text (sm)
Medium text (md) — default
Large text (lg)
Extra Large text (xl)
Weight
Light (300)
Regular (400)
Medium (500)
Semi Bold (600)
Bold (700)
Black (900)
Colors
Dimmed text
Blue text
Violet text
Red text
Green text
Yellow text
Orange text
Cyan text
Pink text
Indigo text
Decoration & Transform
Underline
Strikethrough
Italic
uppercase
capitalize this text
Truncate & Line Clamp
This is a very long text that will be truncated with an ellipsis when it overflows the container width
This text will be clamped to two lines. 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.
Gradient Text
Frequency Gradient Text
Highlight
Highlights specified substrings within text.
Welcome to Frequency brand guidelines
Our brand theme applies to all components
Mark
Inline highlight for emphasis.
The most important information should stand out. You can also use colored marks and violet marks.
Code
Inline and block code styling.
Inline
Use console.log() for debugging. Install with npm install @mantine/core.
Block
import { Button } from '@mantine/core';
function Demo() {
return <Button>Click me</Button>;
}Colors
Use the color prop on Mantine’s Code component for colored inline code: blue, violet, red, green.
Blockquote
Consistency in visual identity builds trust and recognition across all touchpoints.
— Brand Guidelines
Every design decision should serve the user first.
— Design Principles
List
Unordered
- Primary brand color is Frequency Blue (#169BDE)
- Secondary color is Violet (#7E57C2)
- Use semantic colors for status indicators
- Maintain WCAG 2.1 AA contrast ratios
Ordered
- Define the layout structure
- Apply the theme provider
- Add components with brand styling
- Test across light and dark modes
With Icons
✓
Accessible color contrast
✓
Responsive breakpoints
✓
Dark mode support
✗
Custom color modifications
Nested
Typography
- Headings: Montserrat
- Body: Source Sans 3
Colors
- Primary: Blue
- Secondary: Violet