Resonance Brand Identity

A complete profile of Resonance's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #AA5DF9
• secondary: #552762
• accent: #AA5DF9
• background: #000000
• textPrimary: #000000
• link: #0000EE

Typography

• primary: Outfit — Outfit Font
• heading: Outfit — Outfit Font

Visual Assets

• Logo:
• Favicon:

UI Components

• buttonPrimary: background=#AA5DF9, textColor=#0000EE, borderRadius=8px, shadow=rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.14) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.14) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.13) 0px 6.8656px 6.8656px -2.5px, rgba(0, 0, 0, 0.1) 0px 13.6468px 13.6468px -3.125px, rgba(0, 0, 0, 0.05) 0px 30px 30px -3.75px

Brand Personality

Tone: modern · Energy: high · Audience: tech-savvy professionals

Resonance Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Resonance
  • Image:
  • Source: https://www.useresonance.com/
• Resonance
  • Image:
  • Source: https://www.useresonance.com/
• Resonance
  • Image:
  • Source: https://www.useresonance.com/
• Resonance
  • Image:
  • Source: https://www.useresonance.com/
• Resonance
  • Image:
  • Source: https://www.useresonance.com/

Machine-Readable Profile

{
 "colorScheme": "dark",
 "fonts": [
 {"family": "Outfit", "role": "body"}
 ],
 "colors": {
 "primary": "#AA5DF9",
 "secondary": "#552762",
 "accent": "#AA5DF9",
 "background": "#000000",
 "textPrimary": "#000000",
 "link": "#0000EE"
 },
 "typography": {
 "fontFamilies": {
 "primary": "Outfit",
 "heading": "Outfit"
 },
 "fontStacks": {
 "heading": ["Outfit", "sans-serif"],
 "body": ["sans-serif"],
 "paragraph": ["Outfit", "sans-serif"]
 },
 "fontSizes": {
 "h1": "60px",
 "h2": "50px",
 "body": "20px"
 }
 },
 "spacing": {
 "baseUnit": 4,
 "borderRadius": "4px"
 },
 "components": {
 "buttonPrimary": {
 "background": "#AA5DF9",
 "textColor": "#0000EE",
 "borderRadius": "8px",
 "borderRadiusCorners": {
 "topLeft": "8px",
 "topRight": "8px",
 "bottomRight": "8px",
 "bottomLeft": "8px"
 },
 "shadow": "rgba(0, 0, 0, 0.15) 0px 0.706592px 0.706592px -0.625px, rgba(0, 0, 0, 0.14) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.14) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.13) 0px 6.8656px 6.8656px -2.5px, rgba(0, 0, 0, 0.1) 0px 13.6468px 13.6468px -3.125px, rgba(0, 0, 0, 0.05) 0px 30px 30px -3.75px"
 }
 },
 "images": {
 "logo": "https://framerusercontent.com/assets/Pt0tCEUco3SRt5Tn0gYyvNJsGA.png",
 "favicon": "https://framerusercontent.com/images/Pt0tCEUco3SRt5Tn0gYyvNJsGA.png",
 "ogImage": null,
 "logoHref": "./",
 "logoAlt": "Logo"
 },
 "personality": {
 "tone": "modern",
 "energy": "high",
 "targetAudience": "tech-savvy professionals"
 },
 "designSystem": {
 "framework": "custom",
 "componentLibrary": ""
 },
 "confidence": {
 "buttons": 0.9,
 "colors": 0.9,
 "overall": 0.9
 }
}