NPM Package

Install @frequencyads/brand to get type-safe access to Frequency brand tokens — colors, typography, gradients, Mantine theme, logos, and AI context — all from a single package.


npm install @frequencyads/brand

What’s Included

The package ships 6 entry points so you can import only what you need:

Entry Point	What You Get
`@frequencyads/brand`	Everything below, plus brand metadata
`@frequencyads/brand/colors`	10-color palette, semantic aliases, gradients
`@frequencyads/brand/typography`	Font families, size scale, heading & body styles
`@frequencyads/brand/mantine`	Pre-configured Mantine v7 theme, CSS variables
`@frequencyads/brand/logos`	Logo asset filenames and metadata
`@frequencyads/brand/context`	AI-optimized brand summary for prompts

Logo assets (PNG, SVG, ICO, WebP) also ship directly at @frequencyads/brand/assets/*.

All entry points support CommonJS, ESM, and TypeScript out of the box.

Quick Start

With Mantine


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

Without Mantine (CSS Variables)


import { cssVariables, getCssVariablesString } from '@frequencyads/brand/mantine';
 
// Inject brand CSS variables into :root
const style = document.createElement('style');
style.textContent = `:root {\n${getCssVariablesString()}\n}`;
document.head.appendChild(style);

Then use the variables anywhere in your CSS:


.heading {
  font-family: var(--frequency-font-heading);
  color: var(--frequency-primary);
}
 
.body {
  font-family: var(--frequency-font-body);
  color: var(--frequency-text-primary);
}

Plain JavaScript / Node.js


import { colors, fonts, brand } from '@frequencyads/brand';
 
console.log(brand.name);           // "Frequency"
console.log(colors.primary.main);  // "#169bde"
console.log(fonts.heading.family); // "Montserrat, sans-serif"

Entry Points

`@frequencyads/brand`

The root entry point re-exports everything from the sub-modules plus a brand metadata object.


import {
  // Colors & Gradients
  colors, mantineColors, gradients,
  // Typography
  fonts, googleFontsUrl, googleFontsLink, fontSizes, lineHeights, headingStyles, bodyStyles,
  // Mantine
  frequencyTheme, cssVariables, getCssVariablesString,
  // AI
  aiContext, getAIContext,
  // Metadata
  brand,
} from '@frequencyads/brand';
 
brand.name       // "Frequency"
brand.tagline    // "Audio teams worldwide use Frequency to work faster and smarter."
brand.website    // "https://frequencyads.com/"
brand.founded    // 2017
brand.founder    // "Pete Jimison"
brand.social     // { linkedin, youtube }

`@frequencyads/brand/colors`


import {
  colors,          // Semantic aliases (primary, secondary, error, warning, success, text, background)
  mantineColors,   // 10 Mantine-compatible color tuples
  gradients,       // 6 named brand gradients
  blue, violet, red, green, yellow, orange, cyan, pink, indigo, gray, // Individual palettes
} from '@frequencyads/brand/colors';

Semantic Colors


colors.primary.main   // "#169bde"
colors.primary.light  // "#45b2e1"
colors.primary.dark   // "#0b5a8c"
 
colors.secondary.main // "#7e57c2"
colors.error.main     // "#e63459"
colors.warning.main   // "#e79e26"
colors.success.main   // "#5ab267"
 
colors.text.primary   // "#212121"
colors.text.secondary // "#808080"
colors.text.disabled  // "#CCCCCC"
 
colors.background.light   // "#FFFFFF"
colors.background.dark    // "#1A1A1A"

Individual Palettes

Each palette is a 10-shade tuple (index 0-9, main at 5):


blue[0]  // "#e7f5fb" (lightest)
blue[5]  // "#169bde" (main)
blue[9]  // "#052e3c" (darkest)

Gradients


gradients.frequencyAlive.css      // "linear-gradient(135deg, #2C9EE0 0%, #7727F0 100%)"
gradients.electricAllure.css      // "linear-gradient(135deg, #4442F0 0%, #36B7CD 100%)"
gradients.brightJewel.css         // "linear-gradient(135deg, #2DE1B9 0%, #2C9EE0 100%)"
gradients.specialtyAttraction.css // "linear-gradient(135deg, #6A0D9E 0%, #6E18F0 100%)"
gradients.eyecatchingError.css    // "linear-gradient(135deg, #FF7009 0%, #E23646 100%)"
gradients.cautionFlag.css         // "linear-gradient(135deg, #DA8B01 0%, #F6B13E 100%)"

`@frequencyads/brand/typography`


import {
  fonts,          // Font family definitions
  googleFontsUrl, // URL string for Google Fonts API
  googleFontsLink,// Full HTML <link> tags
  fontSizes,      // Size scale (xs through 6xl)
  lineHeights,    // Line height scale
  headingStyles,  // Complete heading styles (display, h1-h6)
  bodyStyles,     // Complete body styles (large, default, small, caption)
} from '@frequencyads/brand/typography';

Font Families


fonts.heading.family  // "Montserrat, sans-serif"
fonts.heading.weights // { regular: 400, medium: 500, semibold: 600, bold: 700 }
 
fonts.body.family     // "Source Sans 3, Source Sans Pro, sans-serif"
fonts.body.weights    // { regular: 400, semibold: 600 }

Loading Fonts


// Use the Google Fonts URL directly
googleFontsUrl
// → "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap"
 
// Or paste the full HTML into your <head>
googleFontsLink
// → <link rel="preconnect" href="https://fonts.googleapis.com">
//   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
//   <link href="..." rel="stylesheet">

Font Sizes


fontSizes.xs   // "12px"
fontSizes.sm   // "14px"
fontSizes.md   // "16px"
fontSizes.lg   // "18px"
fontSizes.xl   // "20px"
fontSizes['2xl'] // "24px"
fontSizes['3xl'] // "30px"
fontSizes['4xl'] // "36px"
fontSizes['5xl'] // "48px"
fontSizes['6xl'] // "60px"

Heading & Body Styles


headingStyles.h1
// { fontSize: "48px", fontWeight: 700, letterSpacing: "-1px", lineHeight: 1.2, fontFamily: "Montserrat, sans-serif" }
 
bodyStyles.default
// { fontSize: "16px", fontWeight: 400, lineHeight: 1.5, fontFamily: "Source Sans 3, Source Sans Pro, sans-serif" }

`@frequencyads/brand/mantine`


import {
  frequencyTheme,      // MantineThemeOverride — drop into MantineProvider
  cssVariables,        // Object of CSS variable key-value pairs
  getCssVariablesString, // Returns CSS variables as a string for injection
} from '@frequencyads/brand/mantine';

Theme Contents

The frequencyTheme object includes:

All 10 color palettes mapped to Mantine color keys
Primary color set to blue at shade 5
Typography (Montserrat headings, Source Sans 3 body)
Spacing, radius, and shadow scales
Component defaults for Button, Input, Card, Paper, Badge, and Anchor

CSS Variables


cssVariables['--frequency-primary']       // "#169bde"
cssVariables['--frequency-secondary']     // "#7e57c2"
cssVariables['--frequency-font-heading']  // "Montserrat, sans-serif"
// ... 14 variables total
 
getCssVariablesString()
// → "  --frequency-primary: #169bde;\n  --frequency-primary-light: #45b2e1;\n  ..."

See Mantine Theme for the full copyable theme configuration.

`@frequencyads/brand/context`


import { aiContext, getAIContext } from '@frequencyads/brand/context';

Full Context


aiContext
// A complete, token-optimized markdown string with all brand info:
// colors, typography, voice guidelines, CSS variables, and gradients

Filtered Context


getAIContext({ includeColors: true, includeTypography: true, includeVoice: false, includeCode: false })
// Returns only the colors and typography sections

See AI Context for a preview and copy button.

`@frequencyads/brand/logos`


import { logos, mark, markWhite, textmark, textmarkWhite, favicon } from '@frequencyads/brand/logos';

Logo Variants

Export	Files	Usage
`mark`	`.png` `.svg`	Circular brand mark (full color) — light backgrounds
`markWhite`	`.png` `.svg`	Circular brand mark (white) — dark backgrounds
`textmark`	`.png`	Horizontal textmark (dark text) — light backgrounds
`textmarkWhite`	`.png`	Horizontal textmark (light text) — dark backgrounds
`favicon`	`.ico` `.webp`	Favicon files


mark.svg          // "frequency-mark.svg"
markWhite.png     // "frequency-mark-white.png"
textmark.png      // "frequency-textmark.png"
favicon.ico       // "favicon.ico"

Direct Asset Import

You can also reference assets directly by path:


// In Next.js, Vite, or any bundler that resolves node_modules
import markSvg from '@frequencyads/brand/assets/frequency-mark.svg';
import faviconIco from '@frequencyads/brand/assets/favicon.ico';

Or copy them from node_modules/@frequencyads/brand/assets/ into your public directory.

TypeScript

The package ships full TypeScript definitions. Key exported types:


import type {
  FrequencyColors,     // typeof colors — semantic color object
  FrequencyGradients,  // typeof gradients — gradient definitions
  MantineColorTuple,   // readonly 10-string tuple for Mantine palettes
  FrequencyFonts,      // typeof fonts — font family definitions
  HeadingStyle,        // "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  BodyStyle,           // "large" | "default" | "small" | "caption"
  FrequencyTheme,      // typeof frequencyTheme
  FrequencyLogos,      // typeof logos — all logo asset metadata
} from '@frequencyads/brand';

Package Info


Name	`@frequencyads/brand`
Version	`1.0.0`
License	MIT
Peer Dependencies	`@mantine/core >=7.0.0` (optional)
Repository	GitHub
Formats	CommonJS, ESM, TypeScript definitions