Vremly

Brand guidelines · v3 · October 2026

Everything you need
to build like Vremly.

Our logos, colours, typography and motion guidelines. Browse the reference or download it for your AI tools.

See the brand Get the brand LLM file

02 · Colour

Off-white ground, ink type, one emerald.

Use neutral surfaces and subtle borders, with emerald for emphasis. Keep status colours inside product previews and their backgrounds. Select a swatch to copy its value.

Grounds

Ink & text

Accent

App dark theme

Product previews only

The app has light and dark themes. This page and the marketing site stay light; their dark bands are painted #0C0C0E. App dark mode uses its own grounds, ink and accents. Preview both themes ↓

On the #121212 app card: primary ink 17.64:1, muted ink 5.79:1, emerald 7.39:1 and gold 9.05:1. These are text pairings, not white labels on solid accent fills.

Product status · light / dark

Same state, two palettes

Pending

unassigned jobs

Assigned

booked with a technician

In Progress

media capture underway

Uploaded

media handed to editors

Editing

being edited

In Review

quality control before delivery

Delivered

sent to the client

In Revision

changes requested after delivery

Cancelled

cancelled jobs · not a pipeline lane

Status badges use the matching hue as text, a 15% fill and a 30% inset ring. Dark badges on #121212 range from 4.38:1 (Editing, below AA for small text) to 6.77:1. These reproduce the app; they are not a blanket contrast approval for other surfaces.

03 · Type

A sans for headlines, a sans for reading, one serif word.

Use IBM Plex Sans Bold for headlines and Inter for body text. Highlight one word with IBM Plex Serif Bold Italic. Use IBM Plex Mono for IDs, values and URLs.

IBM Plex Sans · Bold 700 · Hero

Real estate media, handled.

IBM Plex Sans · Bold 700 · Sections

Three steps. Zero chaos.

Highlight one word per headline in serif italic. Keep the rest in the headline’s sans-serif face.

Inter · 400 · Ledes and body

One platform where agents book media, teams run operations, and providers find work.

Body copy is Inter at 15px with a 1.625 line-height, colour #737373. Hero sub-copy steps up to #525252. Emphasis is semibold ink. Hero buttons are Inter SemiBold 14px on a pill; the nav pill is Medium 13px.

IBM Plex Mono · 11.5px · IDs, values, URLs

Order #2841INV-A1B2C3D4app.vremly.com/projects
Hero H1IBM Plex Sans Bold 70040–64px · lh 1.1 · ls −1.5px phone / −2px desktop
Page H1IBM Plex Sans Bold 70036–48px · lh 1.25 · ls −2px
Section H2IBM Plex Sans Bold 70032–44px · lh 1.1 · ls −1.5px · one accent word · two home outliers 28–48px at −2px
Card titlesIBM Plex Sans Bold 70018px · ls −0.3px
Accent wordIBM Plex Serif Italicinherits size · emerald gradient · 6s drift
LedeInter 40016–20px · lh 1.4–1.65 · #525252 or #737373, by page
BodyInter 40015px · lh 1.625 · #737373
ButtonsInter SemiBold 60014px / 600 · same size for hero, header and floating menu
NavInter Medium 50013px · #525252
EyebrowInter SemiBold 60011px · uppercase · ls .15em · #a3a3a3
MonoIBM Plex Mono 4009.5–12px · IDs, hex, URLs
IBM Plex Sans400 · 500 · 600 · 700 · next/font/googleapp/layout.tsx--font-ibm-plex-sans
InterVariable · next/font/googleapp/layout.tsx--font-inter
IBM Plex Serif400 + 700 · roman and italic · next/font/googleapp/layout.tsx--font-ibm-plex-serif
IBM Plex Mono400 + 500 · next/font/google · this page onlyapp/brand/fonts.ts--font-ibm-plex-mono

04 · The gradient

One emerald texture, in five forms.

The gradients use #059669, #34D399 and #6EE7B7 with lighter and darker shades. Use white text on dark backgrounds and ink on pale ones. Download a finished gradient or the grain layer. Product auroras are reserved for product previews.

GrainientFooter · features menu card#059669 · #34D399 · #6EE7B7 · grain .12
JPG wideJPG tallJPG square
Hero washHome heroradial ellipse at 50% 20% · #FAFAFA 55% → #34D399
PNG widePNG tallPNG squareSVG
Emerald cardPricing · feature pages · home AI cardradial 130% 150% at 50% 20% · #0A0A0A → #059669
PNG widePNG tallPNG squareSVG
Emerald card, lightAI features page heroradial 130% 150% at 50% 20% · #FAFAFA → #059669
PNG widePNG tallPNG squareSVG
FallbackWhere WebGL2 is unavailablelinear 135° · #059669 → #34D399 → #6EE7B7
PNG widePNG tallPNG squareSVG
The grain aloneThe 2% grain layer. Add your own background.feTurbulence .65 · 3 octaves · multiply
SVG
  • Sizes: wide 2400×1500, tall 1200×2400 for phones, square 1600×1600. The three radial SVGs scale to any box; the fallback SVG is exact at 16:10.
  • In code: the parent is position: relative; overflow: hidden, the texture is absolute inset: 0, and content sits above it at z-index: 10.
  • One live grainient per view. It pauses off-screen and draws a single still frame under reduced motion.
  • Never place the emerald logo on any of these. Body type is white on the dark and grainy forms and ink on the pale ones. The page grain never goes above 2%.

The product aurora

A second surface, and it belongs to the product.
AssignedA booked card · the dispatch replicabg-blue-100 · 4 blobs · soft-light · grain .08
In ProgressA card while the shoot is livebg-violet-100 · 4 blobs · soft-light · grain .08
DeliveredA finished card · the analytics replicabg-emerald-100 · 4 blobs · soft-light · grain .08
  • Each pipeline status has its own colourway, using the colours in section 02. Match the background to the status shown in the product preview.
  • Product art only: a project card, a job-sheet header, a sidebar notification card, and the replicas of those on this site. Never a marketing band, and never behind marketing type.
  • No file to download: each surface is generated from its status and a seed, so the same card is drawn the same way every time. Place AuroraGradient, never a screenshot of one.
  • These backgrounds come from the app. Keep the website version in sync when the app changes.

05 · The mark

Two strokes and a slit. The V is never redrawn.

Use the box logo for app icons and avatars. The notched V belongs to Vremly Scan. Download the supplied files instead of redrawing either mark.

Vremly box logo: the white mark on an emerald rounded square
Box logoApp icon · avatar on any ground
SVGPNG
Vremly Scan mark in emerald
Scan · EmeraldOn light grounds
SVGPNG
Vremly Scan mark in white
Scan · WhiteOn ink
SVGPNG
Vremly Scan mark in black
Scan · BlackOn light
SVGPNG
  • A solid left stroke, then a thin stripe that turns into the right arm. The slit between them is what makes the V Vremly's.
  • The stripe is 3.3% as wide as the mark is tall, so it falls under a pixel below about 30px. The V still reads there; for favicons, use the box logo.
  • In the horizontal logo the mark is the V of VREMLY. In the wordmark the V is a plain letter. Never swap one for the other.
  • The V with nine ruler marks on its left stroke belongs to Vremly Scan. Use the plain V for Vremly.

06 · Components

Pills, windows, cards. Used as-is.

Use solid ink pills for primary actions and white pills for secondary actions. The examples use the site’s component styles. Put product previews in app windows and longer text on a white surface.

Buttons

Get started freeBook a demoGet started free

Button card · phone menu

Get started freeLog in

Chips

PhotosVideoFloor plansVirtual toursBrochures

Window

Project card · the app’s layout, with illustrative account data.

Dark pill

Scroll down

01

Agent books

A slot is only offered if someone can actually serve that package.

Dark card showing one step in a job

Vremly is built and run by a working real-estate media company.

Vremly

07 · Dashboards & consoles

Product lives in windows. Claude reads it in the console.

Build product graphics with the light or dark app window below. Use neutral chrome and the product’s status colours. The console shows Claude reading a Vremly account through the MCP connector. Writes require your permission.

App appearance

Dashboard · overview excerpt

Further down · Active Projects excerpt · after Schedule and Live Project Map

Illustrative account. The toggle changes these product excerpts only.

Prompt: Which of my invoices are still unpaid?

  1. vremly_search_endpoints "invoices"
  2. vremly_describe_endpoint GET /invoices
  3. vremly_request GET /invoices?status=SENT&status=OVERDUE
  • Customer: Marc Lefebvre, Amount: CA$612.15, Overdue: 21 days
  • Customer: Priya Sandhu, Amount: CA$389.00, Overdue: 9 days
  • Customer: Daniel Okafor, Amount: CA$489.00, Overdue: not yet due
  • Total: CA$1,490.15

Read only · nothing changed

App appearance.vb-theme-toggleLight and Dark switch only the product excerpts. Marketing chrome stays light.
App chrome.vb-appHeader and left sidebar in the app's neutral tokens; the sidebar is off-canvas on phones.
Metrics.vb-app-metricFour regular-weight figures and two rate cards. No chart, table, delta or sparkline: those are not the dashboard.
Active Projects.vb-app-jobA separate excerpt from further down the page, after Schedule and Live Project Map. Three flat JobCards preserve the app's payment badge, centered technician avatar, order/client hierarchy, status dot, media stack, address, service area, schedule and notes.
Status chipstatusChipStyleTheme-matched status text, 15% fill and 30% inset ring. Exact app hues, including the documented Editing contrast limitation.
Console.vb-termA fixed ink console with the product connector's read-only examples. Its appearance is independent of the preview toggle.
TypeThe prompt types at 45ms a character, the site's typewriter speed. The caret blinks for 300ms more, then goes.45ms
WorkThe first tool call lands 400ms later as a spinner that becomes an emerald dot after 650ms. The next call follows every 850ms.0.85s
Output350ms after the last dot, the answer panel: unpaid invoices, the week's shoots, one project, or what was delivered.0.35s
Done“✓ Read only · nothing changed” 600ms later, a 3s hold, then the next tab. The loop pauses offscreen. Select a tab to keep it open.3s
RulesIn windows: grey chrome, emerald data, status hues for state. The console marks progress in emerald and never writes unless the connection allows it. Windows never grow while they animate. Reduced motion gets the finished frame.LLM file · §9

08 · Motion

Replicas loop in windows. Sections rise once.

Entrances play once, as a section arrives. Product replicas loop through their steps only while they are on screen. The timings below are read from the site's code. This is a live replica from the home page, running.

app.vremly.com/booking
Self-serve booking. Agents select services, pick a date, and go.
Section riseSection heads rise 16px into place as they arrive, once; tiles follow in 0.4s0.6s
Hero cascadeHeadline lines enter first, followed by supporting text, the CTA and the product frame1.14s
HeaderThe nav pill fades in0.5s
DockThe floating Menu appears after the header scrolls awayspring
Features menuRises 8px and scales up from .960.2s
Accent wordThe gradient drifts across the word and back6s
MarqueeRole rows drift in opposite directions30s
Self-serve bookingPackage selection, available times and order total. Each step holds for 1.4 · 1.9 · 1.4 · 1.9 · 3s from its useLoop9.6s
EasingSection entrances ease on cubic-bezier(0.25, 0.4, 0.25, 1); the hero's badge, buttons and frame, and the header, on (0.25, 0.46, 0.45, 0.94). Under reduced motion, replicas pin their last step, the accent word and marquees freeze, and the grainient draws one frame.—

09 · For AI

The brand LLM file.

A Markdown file with our tokens, fonts, logos, gradients, component styles, motion timings and copy rules. Give it to your AI tools when building a Vremly page.

Download vremly-brand.mdOpen in the browser
https://vremly.com/vremly-brand.md