Struct Brand: Colors, Fonts, Logo & Visual Identity
Struct Brand Identity
A complete profile of Struct's visual system — colors, typography, components, and personality — extracted from https://struct.app. Built for designers, agents, and AI tools.
Color Palette
Brand palette extracted from https://struct.app.
primary
#19184A
rgb(25, 24, 74)
secondary
#1E293B
rgb(30, 41, 59)
accent
#EEF1FC
rgb(238, 241, 252)
background
#F8FAFC
rgb(248, 250, 252)
textPrimary
#343434
rgb(52, 52, 52)
link
#0F172A
rgb(15, 23, 42)
Typography
Each font links to its Google Fonts page where available.
primary
DM Sans
DM Sans Google Fonts →
heading
Product Sans
Product Sans Google Fonts →
Visual Assets
Logo
Favicon
Social Card
UI Components
Live previews rendered using Struct's actual button styles.
Input
| Field | Detail |
|---|---|
| background | #FFFFFF |
| textColor | #0F172A |
| borderColor | #E2E8F0 |
| borderRadius | 13.08px |
| shadow | none |
Button Primary
| Field | Detail |
|---|---|
| background | #EEF1FC |
| textColor | #343434 |
| borderColor | #BFCAFAb |
| borderRadius | 13.08px |
| shadow | rgba(99, 124, 247, 0.12) 0px 0px 0px 1px, rgba(99, 124, 247, 0.12) 0px 4px 12px -4px |
Button Secondary
| Field | Detail |
|---|---|
| background | #FEFEFE |
| textColor | #343434 |
| borderRadius | 13.08px |
| shadow | rgba(255, 60, 60, 0.32) 0px 6px 20px 0px, rgba(255, 80, 60, 0.15) 0px 2px 6px 0px |
Brand Personality
Tone: professional
Energy: medium
Audience: businesses looking to purchase premium domains
Frequently Asked Questions
What is Struct's primary brand color?
Struct's primary brand color is #19184A. It anchors the visual identity across their website, product UI, and marketing materials.
What accent color does Struct use?
Struct uses #EEF1FC as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis.
What font does Struct use?
Struct uses DM Sans for body text and Product Sans for headings. Fonts were detected on https://struct.app as part of their live design system.
Does Struct use a light or dark theme?
Struct's primary site uses a light color scheme, with a background of #F8FAFC.
Where can I find Struct's logo?
Struct's logo is available directly on their site (https://struct.app). The current logo URL is included in the machine-readable JSON profile linked above.
How was this brand profile generated?
This profile was extracted from https://struct.app 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 Struct.
Machine-Readable Profile
Direct endpoints for agents, designers, and tooling. No login or auth required.
{
"colorScheme": "light",
"fonts": [
{
"family": "DM Sans",
"role": "body"
},
{
"family": "Inter",
"role": "body"
},
{
"family": "Product Sans",
"role": "heading"
},
{
"family": "Plus Jakarta Sans",
"role": "unknown"
}
],
"colors": {
"primary": "#19184A",
"secondary": "#1E293B",
"accent": "#EEF1FC",
"background": "#F8FAFC",
"textPrimary": "#343434",
"link": "#0F172A"
},
"typography": {
"fontFamilies": {
"primary": "DM Sans",
"heading": "Product Sans"
},
"fontStacks": {
"heading": [
"DM Sans",
"Inter",
"Product Sans",
"sans-serif"
],
"body": [
"DM Sans",
"Inter",
"Product Sans",
"sans-serif"
],
"paragraph": [
"DM Sans",
"Inter",
"Product Sans",
"sans-serif"
]
},
"fontSizes": {
"h1": "52.32px",
"h2": "19.62px",
"body": "14px"
}
},
"spacing": {
"baseUnit": 4,
"borderRadius": "12px"
},
"components": {
"input": {
"background": "#FFFFFF",
"textColor": "#0F172A",
"borderColor": "#E2E8F0",
"borderRadius": "13.08px",
"borderRadiusCorners": {
"topLeft": "13.08px",
"topRight": "13.08px",
"bottomRight": "13.08px",
"bottomLeft": "13.08px"
},
"shadow": "none"
},
"buttonPrimary": {
"background": "#EEF1FC",
"textColor": "#343434",
"borderColor": "#BFCAFA",
"borderRadius": "13.08px",
"borderRadiusCorners": {
"topLeft": "13.08px",
"topRight": "13.08px",
"bottomRight": "13.08px",
"bottomLeft": "13.08px"
},
"shadow": "rgba(99, 124, 247, 0.12) 0px 0px 0px 1px, rgba(99, 124, 247, 0.12) 0px 4px 12px -4px"
},
"buttonSecondary": {
"background": "#FEFEFE",
"textColor": "#343434",
"borderRadius": "13.08px",
"borderRadiusCorners": {
"topLeft": "13.08px",
"topRight": "13.08px",
"bottomRight": "13.08px",
"bottomLeft": "13.08px"
},
"shadow": "rgba(255, 60, 60, 0.32) 0px 6px 20px 0px, rgba(255, 80, 60, 0.15) 0px 2px 6px 0px"
}
},
"images": {
"logo": "https://www.atom.com/public/images/logo.svg",
"favicon": "https://domains.atom.com/assets/images/atom-favicon.png",
"ogImage": "https://img.atom.com/story_images/visual_images/d-logo-3943-78777-struct.app.jpg?class=show",
"logoAlt": "Logo"
},
"personality": {
"tone": "professional",
"energy": "medium",
"targetAudience": "businesses looking to purchase premium domains"
}
}