AI Context

Copy this markdown summary to provide AI assistants with Frequency brand context. This includes the design system style statement, component rules, and brand fundamentals.

Design System — Style Statement

Foundation

Frequency’s UI is built on Mantine v7 using the @frequencyads/brand theme (frequencyTheme). The aesthetic is neutral modern flat — clean surfaces, strong grid/spacing, no decorative elements. Default radius is md (8px). Base Mantine components are used with minimal additional styling; the system works with defaults, not against them.

Typography

Body: Source Sans 3 (weights 400/600)
Headings: Montserrat — H1 50px/400, H2 36px/400, H3 22px/400 uppercase with 1px letter-spacing
These fonts are non-negotiable brand elements

Light / Dark Mode

Both modes are supported.

Light mode: white and light gray surface hierarchy (body #f7f7f7, cards #ffffff) with subtle shadows (0 1px 2px rgba(0,0,0,0.05)) — no borders for visual separation
Dark mode: Dark Mode Elevated — deep dark body (#1a1a1a) with surface depth expressed through slight lightness increments (#242424 → #2e2e2e → #383838) rather than borders or heavy shadows

Color

Color is semantic, never decorative. The interface should never look like a rainbow.

Proportion	Usage
~50%	Background (white/dark)
~15%	Text and UI chrome
~20%	Primary Blue (`blue[5]` = `#169BDE`) for interactive elements
~10%	Violet (`violet[5]` = `#7E57C2`) for secondary accents
~5%	Semantic state colors (red = error, yellow = warning, green = success)

Always reference colors by palette index. Never tint, shade, or adjust opacity of core brand colors.

Gradients

Gradients are a first-class design element — encouraged for CTAs, feature highlights, and headers. All at 135deg.

Name	Stops
Frequency Alive	`#2C9EE0` → `#7727F0`
Electric Allure	`#4442F0` → `#36B7CD`
Bright Jewel	`#2DE1B9` → `#2C9EE0`
Specialty Attraction	`#6A0D9E` → `#6E18F0`
Eyecatching Error	`#FF7009` → `#E23646`
Caution Flag	`#DA8B01` → `#F6B13E`

Layout & Density

Utility-first. Information density is high. Grid-anchored layouts with consistent spacing scale (8/12/16/24/32px). No decorative elements or flourishes unless functionally justified.

Design Rules

No borders for visual separation — use different shades of background to stand off elements
Shadows sparingly — subtle only (0 1px 2px rgba(0,0,0,0.05)), never heavy drop shadows
Default radius is md (8px) — don’t override unless there’s a specific reason
Never use !important without a comment explaining why (e.g. overriding Nextra’s unlayered CSS)
Avoid inline styles and Tailwind — use Mantine style props, CSS Modules, or the theme

Tone

Professional and task-oriented. Feels like a tool built for experts. Approachable due to soft radii and restrained palette — never playful.

Component Rules

Always use @frequencyads/components — check the component catalog before building anything custom
Use Mantine primitives for everything else — Paper, Card, SimpleGrid, Table, Group, Stack, Text, Title, Button, etc. Never raw HTML with Tailwind
Wrap apps in <MantineProvider theme={frequencyTheme}> using the theme from @frequencyads/brand/mantine
Load fonts using loadFrequencyFonts() from @frequencyads/brand/typography or the googleFontsUrl export

Available `@frequencyads/components`

Hero — full-screen hero section (logo or gradient text variant, video bg, waveform)
AudioPlayer / MiniAudioPlayer / AudioWaveform — audio playback components
SpeedDial — floating action button with expandable actions
PrincipleCard — accent-bordered card for principles/values
DosDonts / HintBadge — do/don’t comparison cards and badges
ColorSwatch / ColorPalette / GradientSwatch / BrandColorCard — color display
CodeBlock / Copyable — code viewer and click-to-copy
FadeInSection — scroll-triggered fade-in animation
AnimatedWaveform / FrequencyWave / VideoBackground — decorative elements

Tech Stack

Layer	Technology
UI framework	Mantine v7 with `@frequencyads/brand` theme
Site framework	Next.js + Nextra v4 (MDX)
Icons	`@tabler/icons-react`
Fonts	Montserrat (headings) + Source Sans 3 (body) via Google Fonts
Monorepo	pnpm workspaces + Turborepo
Auth	Supabase (private apps only)

Brand Context (from NPM package)

The @frequencyads/brand package includes a compact AI context string with colors, gradients, typography, and voice guidelines:

ai-context.md

# Frequency Brand

Audio adtech platform (est. 2017). Voice: innovative, professional, approachable.

## Colors
Primary: #169BDE (light #45B2E1, dark #0B5A8C)
Secondary: #7E57C2 (light #B89DDA, dark #442E6F)
Error: #E63459 | Warning: #E79E26 | Success: #5AB267
Text: #212121 (secondary #808080, disabled #CCC)

## 10-Color Palette
Blue, Violet, Red, Green, Yellow, Orange, Cyan, Pink, Indigo, Gray
Each color has 10 shades (index 0-9), main color at index 5.

## Typography
Headings: Montserrat 400-700, letter-spacing -1px to -2px
Body: Source Sans 3 400/600
Scale: Display 60px, H1 48px, H2 36px, H3 24px, H4 20px, Body 16px, Small 14px

## Voice
Clear, direct, human. Avoid jargon. Sentence case for buttons.
Prefer: create, platform, teams, fast, simple, help
Avoid: generate, solution, stakeholders, rapid, seamless, assist

## Code
```css
--frequency-primary: #169BDE;
--frequency-primary-light: #45B2E1;
--frequency-primary-dark: #0B5A8C;
--frequency-secondary: #7E57C2;
--frequency-secondary-light: #B89DDA;
--frequency-secondary-dark: #442E6F;
--frequency-error: #E63459;
--frequency-warning: #E79E26;
--frequency-success: #5AB267;
--frequency-text: #212121;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Source Sans 3', sans-serif;
```

## Gradients
Frequency Alive: #2C9EE0 → #7727F0 (primary brand)
Electric Allure: #4442F0 → #36B7CD (tech/data)
Bright Jewel: #2DE1B9 → #2C9EE0 (success)
Specialty Attraction: #6A0D9E → #6E18F0 (premium)
Eyecatching Error: #FF7009 → #E23646 (error)
Caution Flag: #DA8B01 → #F6B13E (warning)
All gradients use 135deg angle.

Programmatic Access


import { aiContext } from '@frequencyads/brand/context';
 
// Or build custom context
import { getAIContext } from '@frequencyads/brand/context';
 
const colorsOnly = getAIContext({
  includeColors: true,
  includeTypography: false,
  includeVoice: false,
  includeCode: false
});