@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)

Module Logos

Stencil SVGs for the Frequency module logos live in assets/module-logos/svg/. Each file is a single compound path (fill-rule="evenodd") — the circle is filled, the icon shape is a transparent cutout. Color is applied entirely via CSS (mask-image + background), so solid colors and gradients both work without modifying the SVG.

Consumers import the markup as inlined strings from @frequencyads/brand/module-logos (accountSvg, catalogSvg, …). The strings are generated from the SVG files by scripts/generate-module-logo-strings.mjs, which runs automatically on build/dev. This avoids any bundler-specific ?raw import, so the logos render identically under Vite, webpack, Turbopack, and during SSR.

Adding a new icon: if the source SVG is already in stencil format, copy it straight to assets/module-logos/svg/ and add its name to NAMES in scripts/generate-module-logo-strings.mjs. If it uses a filled-circle + coloured-paths layout instead, run the optional conversion script first:

pnpm --filter @frequencyads/brand build-stencil-logos

Source SVGs (input to the script) are gitignored — only the output stencils are committed.

License

MIT