@frequencyads/brand

Official Frequency brand tokens, colors, typography, and theme configurations.

Installation

npm install @frequencyads/brand

Usage

Full Package

import { colors, fonts, frequencyTheme, brand } from '@frequencyads/brand';

console.log(colors.primary.main); // #169BDE
console.log(fonts.heading.family); // Montserrat, sans-serif

Mantine Theme

import { MantineProvider } from '@mantine/core';
import { frequencyTheme } from '@frequencyads/brand/mantine';

function App() {
  return (
    <MantineProvider theme={frequencyTheme}>
      {/* Your app */}
    </MantineProvider>
  );
}

Colors Only

import { colors, mantineColors } from '@frequencyads/brand/colors';

// Hex colors
console.log(colors.primary.main); // #169BDE
console.log(colors.secondary.main); // #7E57C2

// Mantine color tuples
console.log(mantineColors.frequency); // ['#E3F2FD', ..., '#0A3D7A']

Typography Only

import { fonts, fontSizes, headingStyles } from '@frequencyads/brand/typography';

console.log(fonts.heading.family); // Montserrat, sans-serif
console.log(fonts.body.family); // Source Sans 3, Source Sans Pro, sans-serif

Color Palette

| Name | Hex | Usage | |------|-----|-------| | Primary | #169BDE | Main brand color | | Primary Light | #73C3EB | Hover states, backgrounds | | Primary Dark | #0B5A9F | Active states, emphasis | | Secondary | #7E57C2 | Accent color | | Raspberry | #E63459 | Error states | | Gold | #E79E26 | Warning states | | Mint | #5AB267 | Success states |

Typography

• Headings: Montserrat (400, 500, 600, 700)
• Body: Source Sans 3 (400, 600)

License

MIT