Bloom Brand Identity

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

Quick Facts

Color Palette

• primary: #000000
• accent: #E0E1E4
• background: #ECEDEF
• textPrimary: #171717
• link: #000000

Typography

• primary: Inter — https://fonts.google.com/specimen/Inter
• heading: Inter — https://fonts.google.com/specimen/Inter

Visual Assets

• Logo:
• Favicon:

UI Components

• input: background=transparent, textColor=#171717, borderColor=null, borderRadius=0px, shadow=none
• buttonPrimary: background=#E0E1E4, textColor=#171717, borderRadius=999px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.33) 0px 2px 6px -2px
• buttonSecondary: background=#171717, textColor=#FFFFFF, borderRadius=999px, shadow=rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.04) 0px 2px 12px 0px

Brand Personality

Tone: modern · Energy: medium · Audience: developers and tech-savvy individuals

Bloom Brand in the Wild

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

• Bloom on Android — Early Access | Bloom
  • Image:
  • Source: https://bloom.diy/android
• Bloom - Create Mobile Apps in Seconds
  • Image:
  • Source: https://bloom.diy/
• Careers | Bloom | Bloom
  • Image:
  • Source: https://bloom.diy/careers
• Changelog - Bloom | Bloom
  • Image:
  • Source: https://bloom.diy/changelog
• Bloom on Android — Early Access | Bloom
  • Image:
  • Source: https://bloom.diy/android
• Pricing - Bloom | Bloom
  • Image:
  • Source: https://bloom.diy/pricing

Working with these fonts

CharacterQuilt.com suggests this flow:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font".
3. Hard-reload the page and capture font URLs.
4. Download the font files locally.
5. Extract @font-face declarations from the CSS.

Only do this if you have permission to use the brand assets.

Machine-Readable Profile

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Inter",
      "role": "body"
    },
    {
      "family": "Segoe UI",
      "role": "unknown"
    },
    {
      "family": "Roboto",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#000000",
    "accent": "#E0E1E4",
    "background": "#ECEDEF",
    "textPrimary": "#171717",
    "link": "#000000"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Inter",
      "heading": "Inter"
    },
    "fontStacks": {
      "heading": [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI",
        "Noto Color Emoji"
      ],
      "body": [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI",
        "Noto Color Emoji"
      ],
      "paragraph": [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI",
        "Noto Color Emoji"
      ]
    },
    "fontSizes": {
      "h1": "72px",
      "h2": "20px",
      "body": "18px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "4px"
  },
  "components": {
    "input": {
      "background": "transparent",
      "textColor": "#171717",
      "borderColor": null,
      "borderRadius": "0px",
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#E0E1E4",
      "textColor": "#171717",
      "borderRadius": "999px",
      "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.33) 0px 2px 6px -2px"
    },
    "buttonSecondary": {
      "background": "#171717",
      "textColor": "#FFFFFF",
      "borderRadius": "999px",
      "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.04) 0px 2px 12px 0px"
    }
  },
  "images": {
    "logo": "https://bloom.diy/_next/static/media/bloom-logo-shaded.1891cada.webp",
    "favicon": "https://bloom.diy/icon-production.png",
    "logoHref": "/",
    "logoAlt": "Bloom"
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "developers and tech-savvy individuals"
  },
  "designSystem": {
    "framework": "tailwind",
    "componentLibrary": ""
  }
}