Skip to main content

Framework M Brand Guidelines

Framework M is a Modular, Metadata-Driven Full-Stack Framework. Since it is open source, anyone can use, customize, and improve it. Framework M encourages community contribution and makes it easier to create high-quality digital products efficiently.

The visual branding and identity for Framework M was crafted by the talented design team at Aavatto.

Top-Level Rules​

  • Always use the provided SVG variants for the logo and icon when integrating the brand.
  • Minimum Size: The 40px minimum size rule must be strictly followed when presenting the horizontal logo variant.

Primary Colors​

NameHexRGBHSLPreview
Violet / Bright Purple#8B5CF6139, 92, 246258, 90%, 66%
Midnight Navy#0215262, 21, 38208, 90%, 8%

We provide both vector (.svg) for maximum scalability, and raster (.png) versions of the logos, icons, and social media assets to accommodate any integration format.

Official Logos​

VariantPreviewSVGPNG
Primarylogo-primary.svglogo-primary.png
Dark
logo-dark.svglogo-dark.png
White
logo-white.svglogo-white.png
Blacklogo-black.svglogo-black.png

General Icons​

VariantPreviewSVGPNG
Primaryicon-primary.svgicon-primary.png
Dark
icon-dark.svgicon-dark.png
Purpleicon-purple.svgicon-purple.png
White
icon-white.svgicon-white.png
Blackicon-black.svgicon-black.png

Social Media Icons (Circular)​

VariantPreviewSVGPNG
Primarysocial-primary.svgsocial-primary.png
Darksocial-dark.svgsocial-dark.png
Purplesocial-purple.svgsocial-purple.png
White
social-white.svgsocial-white.png
Blacksocial-black.svgsocial-black.png

Brand Patterns​

AssetPreviewSVGPNG
Social Background (Dark)brand-pattern-dark.svgbrand-pattern-dark.png
Social Background (Light)brand-pattern-light.svgbrand-pattern-light.png

Typography​

The official typography for Framework M is Google Sans (with Open Sans as an acceptable fallback).

Usage​

Ensure the primary font family prioritizes: Google Sans, 'Open Sans', system-ui, sans-serif