Laylo Brand: Colors, Fonts, Logo & Visual Identity
Laylo Brand Identity
A complete profile of Laylo's visual system — colors, typography, components, and personality — extracted from https://laylo.com. Built for designers, agents, and AI tools.
Primary
Primary Color:#0C4D5C
Accent Color:#22A1BC
Body Font:Inter
Heading Font:Bricolage Grotesque
Color Palette
Brand palette extracted from https://laylo.com.
- Primary:
#0C4D5C(rgb(12, 77, 92)) - Secondary:
#05252B(rgb(5, 37, 43)) - Accent:
#22A1BC(rgb(34, 161, 188)) - Background:
#000000(rgb(0, 0, 0)) - Text Primary:
#000000(rgb(0, 0, 0)) - Link:
#22A1BC(rgb(34, 161, 188))
Typography
Each font links to its Google Fonts page where available.
- Primary Font:
Inter
Google Fonts → - Heading Font:
Bricolage Grotesque
Google Fonts →
Visual Assets
Logo
Favicon
Social Card
UI Components
Live previews rendered using Laylo's actual button styles.
Input
- Background: transparent
- Text Color: #EDF0F5
- Border Color: null
- Border Radius: 0px
- Shadow: none
Button Primary
- Background: #22A1BC
- Text Color: #FFFFFF
- Border Radius: 24px
- Shadow: none
Button Secondary
- Background: #05252B
- Text Color: #53B2C6
- Border Color: #0B4957
- Border Radius: 16px
- Shadow: none
Brand Personality
- Tone: modern
- Energy: medium
- Audience: artists, live event organizers, and creators
Frequently Asked Questions
What is Laylo's primary brand color?
Laylo's primary brand color is #0C4D5C. It anchors the visual identity across their website, product UI, and marketing materials.
What accent color does Laylo use?
Laylo uses #22A1BC as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis.
What font does Laylo use?
Laylo uses Inter for body text and Bricolage Grotesque for headings.
Does Laylo use a light or dark theme?
Laylo's primary site uses a dark color scheme, with a background of #000000.
Where can I find Laylo's logo?
Laylo's logo is available directly on their site (https://laylo.com). The current logo URL is included in the machine-readable JSON profile linked above.
Methodology
Brand data on this page was extracted from https://laylo.com on 2026-07-27 using the Firecrawl branding extraction API, which inspects each site's live CSS, font network requests, color tokens, and component styles.
Machine-Readable Profile
Direct endpoints for agents, designers, and tooling. No login or auth required.
{
"colorScheme": "dark",
"fonts": [
{
"family": "Inter",
"role": "body"
},
{
"family": "Bricolage Grotesque",
"role": "heading"
}
],
"colors": {
"primary": "#0C4D5C",
"secondary": "#05252B",
"accent": "#22A1BC",
"background": "#000000",
"textPrimary": "#000000",
"link": "#22A1BC"
},
"typography": {
"fontFamilies": {
"primary": "Inter",
"heading": "Bricolage Grotesque"
},
"fontStacks": {
"heading": [
"Bricolage Grotesque",
"sans-serif"
],
"body": [
"Arial",
"sans-serif"
],
"paragraph": [
"Inter",
"sans-serif"
]
},
"fontSizes": {
"h1": "51.2px",
"h2": "20px",
"body": "20px"
}
},
"spacing": {
"baseUnit": 4,
"borderRadius": "24px"
},
"components": {
"input": {
"background": "transparent",
"textColor": "#EDF0F5",
"borderColor": null,
"borderRadius": "0px",
"shadow": "none"
},
"buttonPrimary": {
"background": "#22A1BC",
"textColor": "#FFFFFF",
"borderRadius": "24px",
"shadow": "none"
},
"buttonSecondary": {
"background": "#05252B",
"textColor": "#53B2C6",
"borderColor": "#0B4957",
"borderRadius": "16px",
"shadow": "none"
}
},
"images": {
"logo": "https://laylo.com/wf-cdn/61d60e9ad7eb927cabbb4c9e/62d09c5eb42661c340329d42_layloLogo.svg",
"favicon": "https://laylo.com/wf-cdn/61d60e9ad7eb927cabbb4c9e/634dbd76ce407d3c53b48459_favicon-32x32.png",
"ogImage": "https://laylo-public.s3.us-west-2.amazonaws.com/assets/openGraph-general%401x.jpg"
},
"personality": {
"tone": "modern",
"energy": "medium",
"targetAudience": "artists, live event organizers, and creators"
}
}