Mantine Theme

Download the pre-configured Mantine theme with Frequency brand tokens. This theme is also available via the @frequencyads/brand npm package.

Installation

Via NPM Package (Recommended)


npm install @frequencyads/brand


import { MantineProvider } from '@mantine/core';
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
function App() {
  return (
    <MantineProvider theme={frequencyTheme}>
      {/* Your app */}
    </MantineProvider>
  );
}

Manual Configuration

Copy the theme configuration below and use it directly in your project.

frequencyTheme.ts

import type { MantineThemeOverride, MantineColorsTuple } from '@mantine/core';

// Frequency 10-color, 10-shade palette (Mantine format: index 0-9, main at 5)
const blue: MantineColorsTuple = [
  '#e7f5fb', '#b3e0f2', '#6fc4e8', '#45b2e1', '#3da8dc',
  '#169bde', '#0f6c9b', '#0b5a8c', '#084464', '#052e3c',
];

const violet: MantineColorsTuple = [
  '#f3edf7', '#d9c5ea', '#b89dda', '#9f7dd0', '#8e6ac9',
  '#7e57c2', '#5d3f95', '#442e6f', '#2c1e4a', '#180f27',
];

const red: MantineColorsTuple = [
  '#fce8ed', '#f7c0ce', '#f0899d', '#ea6582', '#e84d6d',
  '#e63459', '#a1243e', '#9a1d31', '#6e1523', '#420d15',
];

const green: MantineColorsTuple = [
  '#ebf7ed', '#c7e8cd', '#a2d9ac', '#8dd99c', '#77bf81',
  '#5ab267', '#3f7d48', '#2d6839', '#1d4425', '#0e2011',
];

const yellow: MantineColorsTuple = [
  '#fef8ec', '#fdefc7', '#fce49e', '#fad875', '#f9cd4c',
  '#e79e26', '#a26f1b', '#a37518', '#755410', '#473309',
];

const orange: MantineColorsTuple = [
  '#fff3e6', '#ffe0c2', '#ffcd9e', '#ffb87a', '#ffa356',
  '#ff8e32', '#d17820', '#a35e19', '#754411', '#472a0a',
];

const cyan: MantineColorsTuple = [
  '#e5f9fc', '#b8f0f9', '#8ae6f5', '#5ddcf2', '#30d3ef',
  '#15c5de', '#11a3b8', '#0d8091', '#095c6a', '#053843',
];

const pink: MantineColorsTuple = [
  '#fef0f5', '#fcd5e4', '#f9bad2', '#f79fc1', '#f584af',
  '#f2699d', '#cc5380', '#9e3f63', '#702b46', '#421829',
];

const indigo: MantineColorsTuple = [
  '#eef2ff', '#e0e7ff', '#c7d2fe', '#a5b4fc', '#818cf8',
  '#6366f1', '#4239ce', '#332ba1', '#241e74', '#151047',
];

const gray: MantineColorsTuple = [
  '#fafafa', '#f7f7f7', '#eeeeee', '#e3e3e3', '#bdbdbd',
  '#9e9e9e', '#808080', '#757575', '#424242', '#212121',
];

export const frequencyTheme: MantineThemeOverride = {
  colors: {
    blue, violet, red, green, yellow, orange, cyan, pink, indigo, gray,
  },
  primaryColor: 'blue',
  primaryShade: 5,

  fontFamily: 'Source Sans 3, Source Sans Pro, sans-serif',
  fontFamilyMonospace: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
  headings: {
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: '700',
    sizes: {
      h1: { fontSize: '48px', lineHeight: '1.2', fontWeight: '700' },
      h2: { fontSize: '36px', lineHeight: '1.25', fontWeight: '700' },
      h3: { fontSize: '24px', lineHeight: '1.3', fontWeight: '600' },
      h4: { fontSize: '20px', lineHeight: '1.4', fontWeight: '600' },
      h5: { fontSize: '18px', lineHeight: '1.4', fontWeight: '600' },
      h6: { fontSize: '16px', lineHeight: '1.4', fontWeight: '600' },
    },
  },

  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '20px',
  },

  spacing: {
    xs: '8px',
    sm: '12px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },

  radius: {
    xs: '4px',
    sm: '6px',
    md: '8px',
    lg: '12px',
    xl: '16px',
  },

  defaultRadius: 'md',

  shadows: {
    xs: '0 1px 2px rgba(0, 0, 0, 0.05)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  },

  cursorType: 'pointer',
  focusRing: 'auto',
  respectReducedMotion: true,

  components: {
    Button: {
      defaultProps: { radius: 'md' },
      styles: { root: { fontWeight: 600 } },
    },
    Input: {
      defaultProps: { radius: 'md' },
    },
    Card: {
      defaultProps: { radius: 'lg', shadow: 'sm' },
    },
    Paper: {
      defaultProps: { radius: 'md' },
    },
    Badge: {
      defaultProps: { radius: 'sm' },
    },
    Anchor: {
      defaultProps: { c: 'blue' },
    },
  },
};

Usage Examples

Basic Setup


import '@mantine/core/styles.css';
import { MantineProvider, Button, Card, Text } from '@mantine/core';
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
function App() {
  return (
    <MantineProvider theme={frequencyTheme}>
      <Card>
        <Text>Welcome to Frequency</Text>
        <Button>Get Started</Button>
      </Card>
    </MantineProvider>
  );
}

Using Brand Colors


import { Button, Badge } from '@mantine/core';
 
// Primary color (Frequency Blue)
<Button color="blue">Primary Action</Button>
 
// Secondary color (Violet)
<Button color="violet">Secondary Action</Button>
 
// Semantic colors
<Badge color="green">Success</Badge>
<Badge color="yellow">Warning</Badge>
<Badge color="red">Error</Badge>
 
// Accessing specific shades
<Button color="blue.7">Darker Blue</Button>
<Button color="violet.3">Lighter Violet</Button>

Typography with Brand Fonts

Remember to include the Google Fonts link in your HTML head:


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

Color Reference

Color	Shade 5 (Main)	Usage
`blue`	#169BDE	Primary brand color
`violet`	#7E57C2	Secondary brand color
`red`	#E63459	Error states
`yellow`	#E79E26	Warning states
`green`	#5AB267	Success states
`orange`	#FF8E32	Accent
`cyan`	#15C5DE	Accent
`pink`	#F2699D	Accent
`indigo`	#6366F1	Accent
`gray`	#9E9E9E	Neutral

Package Exports

The @frequencyads/brand package provides multiple entry points:


// Full package
import { colors, fonts, frequencyTheme } from '@frequencyads/brand';
 
// Just the Mantine theme
import { frequencyTheme } from '@frequencyads/brand/mantine';
 
// Just colors (with full 10-shade palettes)
import { colors, mantineColors, blue, violet, red, green } from '@frequencyads/brand/colors';
 
// Just typography
import { fonts, fontSizes } from '@frequencyads/brand/typography';