Sparkles Brand Identity

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

Quick Facts

Color Palette

• primary: #54B16C
• accent: #54B16C
• background: #FFFFFF
• textPrimary: #18181B
• link: #54B16C

Typography

• primary: Articulat CF — https://fonts.google.com/specimen/Articulat+CF
• heading: Gelica — https://fonts.google.com/specimen/Gelica

Visual Assets

• Logo:
• Favicon:

UI Components

• input: background=#27272A, textColor=#FFFFFF, borderColor=#3F3F46, borderRadius=10px, shadow=none
• buttonPrimary: background=#18181B, textColor=#FFFFFF, borderColor=#3F3F46, borderRadius=8px, 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.05) 0px 1px 2px 0px
• buttonSecondary: background=#171717, textColor=#FAFAFA, borderRadius=8px, shadow=none

Brand Personality

Tone: modern · Energy: medium · Audience: developers and project managers

Sparkles Brand in the Wild

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

• Sparkles - Lovable for Existing Projects | Ship Code Changes Without Engineers
  • Image:
  • Source: https://sparkles.dev/
• Mattel PJ Sparkles Commercial 1988
  • Image:
  • Source: https://www.youtube.com/watch?v=cSKXlz_pjBw
• Sublimation report sparkles : r/Dustbunny_Game
  • Image:
  • Source: https://www.reddit.com/r/Dustbunny_Game/comments/1qjh6ji/sublimation_report_sparkles/
• Sparkles - Landing Page Design | Lapa Ninja
  • Image:
  • Source: https://www.lapa.ninja/post/sparkles/
• Starbrite Sparkles Toy Commercial 1991
  • Image:
  • Source: https://www.youtube.com/watch?v=KdHTmu3ddyM

Working with these fonts

Not found on Google Fonts? Follow these steps if you have permission:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) to load specific weights.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS and copy the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for response events for font/, and write the body to disk.

Machine-Readable Profile

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Articulat CF",
      "role": "body"
    },
    {
      "family": "Gelica",
      "role": "heading"
    },
    {
      "family": "Georgia",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#54B16C",
    "accent": "#54B16C",
    "background": "#FFFFFF",
    "textPrimary": "#18181B",
    "link": "#54B16C"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Articulat CF",
      "heading": "Gelica"
    },
    "fontStacks": {
      "heading": [
        "Gelica",
        "Georgia",
        "serif"
      ],
      "body": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ],
      "paragraph": [
        "Articulat CF",
        "system-ui",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "60px",
      "h2": "48px",
      "body": "20px"
    }
  },
  "spacing": {
    "baseUnit": 8,
    "borderRadius": "0px"
  },
  "components": {
    "input": {
      "background": "#27272A",
      "textColor": "#FFFFFF",
      "borderColor": "#3F3F46",
      "borderRadius": "10px",
      "borderRadiusCorners": {
        "topLeft": "10px",
        "topRight": "10px",
        "bottomRight": "10px",
        "bottomLeft": "10px"
      },
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#18181B",
      "textColor": "#FFFFFF",
      "borderColor": "#3F3F46",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "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.05) 0px 1px 2px 0px"
    },
    "buttonSecondary": {
      "background": "#171717",
      "textColor": "#FAFAFA",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "https://sparkles.dev/sparkles-logotype.svg",
    "favicon": "https://sparkles.dev/favicon.ico",
    "ogImage": null,
    "logoHref": "/",
    "logoAlt": "Sparkles"
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "developers and project managers"
  },
  "designSystem": {
    "framework": "tailwind",
    "componentLibrary": ""
  }
}