Lovable Brand Identity

A complete profile of Lovable's visual system — colors, typography, components, and personality — extracted from https://lovable.dev/. Built for designers, agents, and AI tools.

Color Palette

Brand palette extracted from https://lovable.dev/.
primary
#000000
accent
#1E1E1E
background
#FCFBF8
textPrimary
#1C1C1C
link
#000000

Typography

Each font links to its Google Fonts page where available.
primary: Camera Plain Variable
heading: Camera Plain Variable
Google Fonts →

Visual Assets

%20!important%3B%22%2F%3E%3Cmask%20id%3D%22_R_9bajhepolliv9fkl5b_-b%22%20width%3D%22124%22%20height%3D%22126%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%20style%3D%22mask-type%3A%20alpha%3B%20fill%3A%20none%20!important%3B%22%3E%3Cpath%20fill%3D%22url(%23_R_9bajhepolliv9fkl5b_-a)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M37.3.343c20.43%200%2036.991%2016.605%2036.991%2037.088v14.095h12.31c20.43%200%2036.991%2016.605%2036.991%2037.088s-16.561%2037.088-36.99%2037.088H.31V37.431C.31%2016.948%2016.87.343%2037.3.343Z%22%20clip-rule%3D%22evenodd%22%20style%3D%22fill%3A%20url(%26quot%3B%23_R_9bajhepolliv9fkl5b_-a%26quot%3B)%20!important%3B%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23_R_9bajhepolliv9fkl5b_-b)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cg%20filter%3D%22url(%23_R_9bajhepolliv9fkl5b_-c)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Ccircle%20cx%3D%2254.389%22%20cy%3D%2267.257%22%20r%3D%2283.452%22%20fill%3D%22%234B73FF%22%20style%3D%22fill%3A%20rgb(75%2C%20115%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23_R_9bajhepolliv9fkl5b_-d)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cellipse%20cx%3D%2263.557%22%20cy%3D%2221.462%22%20fill%3D%22%23FF66F4%22%20rx%3D%22106.879%22%20ry%3D%2283.452%22%20style%3D%22fill%3A%20rgb(255%2C%20102%2C%20244)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23_R_9bajhepolliv9fkl5b_-e)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cellipse%20cx%3D%2280.992%22%20cy%3D%225.757%22%20fill%3D%22%23FF0105%22%20rx%3D%2283.452%22%20ry%3D%2273.289%22%20style%3D%22fill%3A%20rgb(255%2C%201%2C%205)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23_R_9bajhepolliv9fkl5b_-f)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Ccircle%20cx%3D%2265.043%22%20cy%3D%2221.442%22%20r%3D%2250.188%22%20fill%3D%22%23FE7B02%22%20style%3D%22fill%3A%20rgb(254%2C%20123%2C%202)%20!important%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cfilter%20id%3D%22_R_9bajhepolliv9fkl5b_-c%22%20width%3D%22241.704%22%20height%3D%22241.704%22%20x%3D%22-66.463%22%20y%3D%22-53.596%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur%22%20stdDeviation%3D%2218.7%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22_R_9bajhepolliv9fkl5b_-d%22%20width%3D%22288.559%22%20height%3D%22241.704%22%20x%3D%22-80.723%22%20y%3D%22-99.39%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur%22%20stdDeviation%3D%2218.7%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22_R_9bajhepolliv9fkl5b_-e%22%20width%3D%22241.704%22%20height%3D%22221.378%22%20x%3D%22-39.86%22%20y%3D%22-104.931%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur%22%20stdDeviation%3D%2218.7%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22_R_9bajhepolliv9fkl5b_-f%22%20width%3D%22175.176%22%20height%3D%22175.176%22%20x%3D%22-22.545%22%20y%3D%22-66.146%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur%22%20stdDeviation%3D%2218.7%22%20style%3D%22fill%3A%20none%20!important%3B%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22_R_9bajhepolliv9fkl5b_-a%22%20x1%3D%2241.797%22%20x2%3D%2279.356%22%20y1%3D%2222.372%22%20y2%3D%22125.655%22%20gradientUnits%3D%22userSpaceOnUse%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Cstop%20offset%3D%22.025%22%20stop-color%3D%22%23FF8E63%22%20style%3D%22fill%3A%20none%20!important%3B%20stop-color%3A%20rgb(255%2C%20142%2C%2099)%20!important%3B%22%2F%3E%3Cstop%20offset%3D%22.56%22%20stop-color%3D%22%23FF7EB0%22%20style%3D%22fill%3A%20none%20!important%3B%20stop-color%3A%20rgb(255%2C%20126%2C%20176)%20!important%3B%22%2F%3E%3Cstop%20offset%3D%22.95%22%20stop-color%3D%22%234B73FF%22%20style%3D%22fill%3A%20none%20!important%3B%20stop-color%3A%20rgb(75%2C%20115%2C%20255)%20!important%3B%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E)

UI Components

Live previews rendered using Lovable's actual button styles.

Button Primary

buttonPrimary
background #1E1E1E
textColor #FAFAFA
borderRadius 8px
shadow rgba(0, 0, 0, 0.08) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 0px 0px inset, rgb(0, 0, 0) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 2px -1px, rgba(0, 0, 0, 0.12) 0px 4px 4px -2px

Button Secondary

buttonSecondary
background transparent
textColor #2E2E2D
borderColor #C5C4C2
borderRadius 8px
shadow none

Brand Personality

Tone: modern
Energy: medium
Audience: developers and tech enthusiasts

Frequently Asked Questions

What is Lovable's primary brand color?
Lovable's primary brand color is #000000. It anchors the visual identity across their website, product UI, and marketing materials.
What accent color does Lovable use?
Lovable uses #1E1E1E as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis.
What font does Lovable use?
Lovable uses Camera Plain Variable as the primary typeface across body and headings.
Does Lovable use a light or dark theme?
Lovable's primary site uses a light color scheme, with a background of #FCFBF8.
Where can I find Lovable's logo?
Lovable's logo is available directly on their site (https://lovable.dev/).
How was this brand profile generated?
This profile was extracted from https://lovable.dev/ using the Firecrawl branding extraction API, which inspects the live page's CSS, fonts, color tokens, and component styles. It is not affiliated with or endorsed by Lovable.