---
bcp_version: "1.1.1"
file_type: visual
parent: https://registry.encodedbrands.ai/roamly-73efb104/.well-known/brand.md
last_updated: "2026-10-30"
---

# Visual

Roamly looks like a clean, white-led consumer insurance site with a deep navy voice and a bright green "go" colour: large rounded-sans headlines in navy, light grey body copy, pill-shaped green buttons, rounded photo cards of real vehicles outdoors (RV on a mountain road, cruiser motorcycle, speedboat on a lake), and a small green dot that finishes the wordmark.

**Evidence level: observed only.** No Roamly brand guidelines, logo rules or press kit were found (gap). Everything below was observed on www.roamly.com on 2026-10-30: served CSS bundles (`/_next/static/immutable/chunks/184fjbs3i-k22.css`, `3oqitnk8oc3ui.css` and two smaller files), `@font-face` declarations, `/svg/Roamly-logo.svg`, and computed styles in headless Chromium at 1440x900 and 390x900 on `/` and `/claims`. These describe the website surface, not a declared design system. Treat them as `observed`.

## Logo

The wordmark is "Roamly." in a rounded geometric sans, navy letters with a green full stop. The served SVG is the only logo file found. There are no documented variants, clear space or minimum size (gap).

```yaml
logo:
  primary:
    description: "Roamly wordmark as served in the site header: 'Roamly' in navy #040932 with a green #33CF8E dot. 100x25 viewBox SVG. Observed asset, not a declared master file."
    variants:
      - format: svg
        url: "https://www.roamly.com/svg/Roamly-logo.svg"
        sha256: "ce00594246f171ce50ec339b67895b324c8d325398de8c76622f4b82d903fb9e"
        background: "transparent; used on white in the site header"
        treatment: "full colour (navy letters, green dot)"
        purpose: "Default mark on white or very light grounds."
  usage_notes:
    - "Use the served SVG unchanged. Never retype the wordmark in sofiaPro or any font, never drop or recolour the dot, never stretch."
    - "No reversed (white) logo file was found. On dark navy grounds, do not invent one; place the logo on a white area instead, or flag the gap."
    - "Favicon: https://www.roamly.com/icon.png (32x32 PNG). Also observed but not checked: alternate logo path https://www.roamly.com/svg/logo.svg and OG image https://www.roamly.com/opengraph-image.gif. Use the hashed Roamly-logo.svg above."
    - "Clear space and minimum size are not published (gap). Observed header use: about 145 px wide at 1440 px viewport."
```

## Colour

Observed CSS tokens and computed colours. Hex values are exact as served.

```yaml
colors:
  - name: Roamly navy (brand-secondary)
    hex: "#161E54"
    role: primary
    evidence: "CSS --tw-brand-secondary fallback #161e54 (12 uses); computed colour of every H1/H2/H3 on / and /claims, rgb(22,30,84); Myles chat panel header."
  - name: Roamly green (brand-primary)
    hex: "#3FBA73"
    role: accent
    evidence: "CSS --tw-brand-primary fallback #3fba73; computed background of primary CTA buttons 'Start your quote', 'Get Your Quote', 'Submit my claim', rgb(63,186,115)."
  - name: green-700
    hex: "#30987F"
    role: accent
    evidence: "Tailwind token green-700 (source pack, CoB, 2026-10-30); also served as --tw-brand-primary fallback (#30987f, 5 uses) on some components. Which green is canonical is not documented (gap). Default to #3FBA73 for buttons."
  - name: green-600
    hex: "#37A97B"
    role: accent
    evidence: "Tailwind token green-600 (source pack, CoB, 2026-10-30); also a --tw-brand-primary fallback (2 uses). Use not documented."
  - name: blue-600
    hex: "#15134C"
    role: secondary
    evidence: "Tailwind token in /_next/static/immutable/chunks/184fjbs3i-k22.css (source pack, CoB, 2026-10-30). Use not documented."
  - name: blue-700 (hover)
    hex: "#1B1045"
    role: secondary
    evidence: "Tailwind token, observed as a hover state (source pack, CoB, 2026-10-30)."
  - name: blue-900
    hex: "#220B35"
    role: secondary
    evidence: "Tailwind token (source pack, CoB, 2026-10-30). Use not documented."
  - name: Neutral 900
    hex: "#181D27"
    role: neutral
    evidence: "Served neutral (source pack, CoB, 2026-10-30)."
  - name: Neutral grey #717680
    hex: "#717680"
    role: neutral
    evidence: "Served neutral (source pack, CoB, 2026-10-30)."
  - name: Placeholder grey
    hex: "#A4A7AE"
    role: neutral
    evidence: "Served neutral, used for placeholders (source pack, CoB, 2026-10-30)."
  - name: Logo navy
    hex: "#040932"
    role: primary
    evidence: "Fill of the letters in /svg/Roamly-logo.svg. Logo only."
  - name: Logo green dot
    hex: "#33CF8E"
    role: accent
    evidence: "Fill of the dot in /svg/Roamly-logo.svg. Logo only."
  - name: Body grey
    hex: "#535862"
    role: neutral
    evidence: "Computed colour of lead/body paragraphs, rgb(83,88,98)."
  - name: White
    hex: "#FFFFFF"
    role: background
    evidence: "Page background on / and /claims; button text on green."
  - name: Light grey surfaces and borders
    hex: "#F5F5F5"
    role: neutral
    evidence: "Served #f5f5f5, #fafafa, #e9eaeb, #d5d7da as surface, gradient and border greys."
```

Pairs observed: navy text on white (headings); grey #535862 on white (body); white text on green #3FBA73 (primary buttons; white on this green is low contrast, about 2.5:1, so keep button text at 18 px or larger as the site does, and don't set small white text on it); navy text on white with navy or grey border (secondary "Track my claim" button). The green "blob" circles over product photos on the homepage are decorative (#03A356 in inline SVG); do not treat them as a palette rule. #00B67A in the CSS is Trustpilot green (review widget), not a Roamly colour; never use it as a brand colour (source pack, CoB, 2026-10-30).

## Typography

- **Typeface:** Sofia Pro (CSS family name `sofiaPro`, set through `--font-sofia: "sofiaPro", "sofiaPro Fallback"`). The site self-hosts 16 WOFF2 cuts from `/_next/static/immutable/media/` (UltraLight 100 to Black 900, each with an italic), declared in `/_next/static/immutable/chunks/0yfp1py827c_7.css`. The font files' own name table reads "Copyright (c) Olivier Gourvat - Mostardesign Studio, 2012" and "Sofia Pro is a trademark of Mostardesign Studio" (re-checked 2026-10-30).
- **Licensing source:** Sofia Pro is a commercial typeface from Mostardesign Studio (http://www.mostardesign.com). It is **not** a Google Font. Roamly's licence terms are not published (gap). Web use outside roamly.com needs the brand's own font kit or licence.
- **Fallback:** the site's own fallback face is `sofiaPro Fallback`, which is local Arial with metric overrides (`ascent-override:72.56%; descent-override:23.42%; line-gap-override:32.82%; size-adjust:104.19%`). Use `"Sofia Pro", "sofiaPro", Arial, sans-serif` when the kit can't load.
- **Serif utility:** the main CSS bundle has a `font-serif` utility with the stack `Sentinel, ui-serif, Georgia, Cambria, "Times New Roman", serif`, but none of the four served bundles declares an `@font-face` for Sentinel (re-checked 2026-10-30). Visitors therefore see Georgia or the system serif, not Sentinel. Do not adopt Sentinel as a brand face.
- **Observed scale (1440 px):** H1 80/80 px, weight 500, letter-spacing −1.6 px, navy, centred on home. H2 64/72 px, 500, −1.28 px, navy. H3 22–32 px, 500–600. Lead paragraph 22/32 px, weight **300** (light), grey #535862. Buttons 18/28 px, 400.
- **Observed scale (390 px):** H1 and H2 32/36 px, 500. Lead 18/28 px, 300.
- Headlines are sentence case with a closing full stop ("Insurance built for adventure.", "Start your Roamly claim."). Medium weight, not bold. Small caps-style eyebrow labels appear in the Myles panel ("BUILT FOR ADVENTURE", "AI AGENT · ACTS ON YOUR BEHALF").

```yaml
typography:
  primary:
    family: "Sofia Pro"
    css_family: "sofiaPro"
    foundry: "Mostardesign Studio (Olivier Gourvat)"
    licence_source: "Commercial typeface, not Google Fonts. Roamly's licence terms are not published (gap)."
    weights_served: [100, 200, 300, 400, 500, 600, 700, 900]
    italics_served: true
    weights_in_use: {headings: 500, lead: 300, body: 400, emphasis: 600}
    files:
      - {weight: 300, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProLight-s.p.0qcizcn3xt36e.woff2", sha256: "a05a3d67c7cfbc33224651cbd45be3d9e25b2b9831ddcbee982363a27efba573"}
      - {weight: 400, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProRegular-s.p.251m1nb85yfge.woff2", sha256: "7183fc4677e4c4bf192c95274ca24a0d9a92562a7324731c29e3acfcb0c3dcb2"}
      - {weight: 400, style: italic, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProItalic-s.p.0xiv5e8v04ncp.woff2", sha256: "a4ddfff953f3108e2ae08c50321c3e917b4bde94508d1b343ab40538094a265d"}
      - {weight: 500, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProMedium-s.p.0-s0sg6r2hv4a.woff2", sha256: "fde4a781ef2b07cb560a67a8c564797ffd366b2fce3dc8b3c177f6d8fbc487d4"}
      - {weight: 600, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProSemiBold-s.p.29n9fjmhvj34v.woff2", sha256: "9340af3f049584244ae0792746ca2d91e70ccee7ef779e5dff9179c4f6383cb4"}
      - {weight: 700, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProBold-s.p.3l_ahlhwk0br4.woff2", sha256: "1544bc73bc508ae11d2b0b88f2058a99fc1116c9804e772cfa7c23bdd30df73f"}
      - {weight: 900, style: normal, url: "https://www.roamly.com/_next/static/immutable/media/SofiaProBlack-s.p.3w6awk5n1cwv5.woff2", sha256: "22b047c53f5ef8e23c783191e11782151a9aa0a2def0932810140994ee066a6c"}
    fallback_stack: '"Sofia Pro", "sofiaPro", Arial, sans-serif'
  serif_utility:
    stack: 'Sentinel, ui-serif, Georgia, Cambria, "Times New Roman", serif'
    loaded: false
    note: "No @font-face for Sentinel in any served bundle; renders as Georgia or the system serif."
```

## Layout and components

- White-led pages, generous whitespace, centred hero headline and subline on home; content width about 1200 px.
- **Buttons:** fully rounded pills (border-radius 9999px), padding 12px 32px. Primary = green fill, white text. Secondary = white fill, dark text, thin border.
- **Cards:** rounded-corner photo cards in a row (RV, Motorcycle, Boat, ATV), each with a short label and a "Compare … coverage plans" link; soft drop shadows (Tailwind-style `0 4px 6px -1px #0a0d121a`).
- **Myles:** an AI agent panel ("Hey, I'm Myles. Tell me what you need — I'll take it from here.") with a navy header, cartoon avatar and option tiles (RV quote, Motorcycle quote, Manage my policy, Claim status, Just browsing). The selected tile has a pale green fill and green border.
- Testimonial cards credit Trustpilot with the reviewer's first name; agent "expert" cards show a photo, first name, specialty and a "Give [name] a call" link.
- Every page ends with the licensing and underwriter disclosure paragraph in small grey text above the footer.

## Imagery

- Real outdoor photography of the vehicle in use, in bright daylight or golden-hour light with natural colour: camper vans under mountain peaks, teardrop and travel trailers by lakes, Class C motorhomes at palm-lined campsites, fifth wheels with tow trucks on grass. Other lines (motorcycle and more) use the same style. The vehicle is always the subject, shown in a real landscape, often with camp chairs or people nearby (images viewed 2026-10-30).
- **Green dot motif:** on `/insurance/personal/rv` the feature photos (`image-1`, `image-3` and `image-4`) put a solid saturated-green circle over or beside the vehicle on the road, echoing the dot in the wordmark. The green samples at about #00A82E to #00B030 in the JPEGs, so it is not one of the CSS tokens; treat it as a photo treatment, not a palette colour.
- People shots: friendly staff portraits for the expert cards (`/_next/static/immutable/media/krista.214vqrj1q97rt.jpg`, `justin.3sfuh6xu_bahc.jpg`, `hank.0xbgiz0q-2u0e.jpg`, `evin.39mjbzdrkgllh.jpg`, `eric.0-n0dlegrmdn0.jpg`), and a lifestyle image of a parent and child in the back of a converted van.
- Homepage lifestyle images: `/_next/static/immutable/media/image-1.2o2cd4h-h7k5i.jpg`, `image-2.2tbq7y9p9gu2y.jpg` (van build, parent and child) and `image-3.040iatm8mgnkf.jpg`. Other CMS images seen on the RV and home pages show a Class C by a lake, a cruiser motorcycle, a trailer among palms and a portable generator.
- Use Roamly images only in work for Roamly and only as served. Do not crop out the vehicle, recolour, or composite new vehicles into them. Do not generate fake customers or fake agents.

```yaml
imagery:
  rights: "Brand-owned photography served on roamly.com. No press kit or image licence page was found (gap)."
  style: "Real vehicles outdoors in natural light; landscape and road; vehicle as subject; no studio or stock-insurance clichés."
  motif: "Solid green dot over the vehicle on RV-page feature photos (about #00A82E to #00B030), echoing the wordmark's dot."
  references:
    - id: camper-van-mountain-sunrise
      shows: "Camper van parked below a snow-capped peak at dusk"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/rv-1.0sxtxhcynw_fr.jpg"
    - id: teardrop-trailer-lakeside
      shows: "Teardrop trailer with camp chairs under trees by a lake"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/rv-2.2zq_1gt87fdhg.jpg"
    - id: class-c-sunset-campsite
      shows: "Class C motorhome under palms at sunset"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/rv-3.2ia7nimrxol0f.jpg"
    - id: green-dot-desert-highway
      shows: "Motorhome on a desert highway with the green dot"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/image-1.0lx2l9cl3z445.jpg"
    - id: green-dot-truck-trailer
      shows: "Pickup towing a travel trailer on a forest road with the green dot"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/image-3.0w51u_97nk0m6.jpg"
    - id: green-dot-mountain-road
      shows: "Motorhome on a mountain road with the green dot"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://www.roamly.com/_next/static/immutable/media/image-4.1_d8waq--17us.jpg"
    - id: fifth-wheel-campsite
      shows: "Fifth wheel and pickup at a grassy campsite"
      page: "https://www.roamly.com/insurance/personal/rv"
      url: "https://cdn.sanity.io/images/v46qdseo/production/9a223151df016bb192e0f7440bcdd066bba70691-2121x1414.jpg"
    - id: van-build-family
      shows: "Parent and child sitting in the back of a converted van"
      page: "https://www.roamly.com/"
      url: "https://www.roamly.com/_next/static/immutable/media/image-2.2tbq7y9p9gu2y.jpg"
```

## Motion

Not documented and not analysed (gap). Keep motion minimal.

## Do / don't

- Do: white space, navy sentence-case headlines with a full stop, light grey supporting text, one green pill CTA per section, real vehicles outdoors.
- Don't: dark full-bleed navy pages as the default, gradients as brand colour, stock "family on a beach" insurance photography, shield/umbrella insurance clichés, retyped logos, more than one competing primary CTA.