Brand

The logo is one word: VATRA·HOMES, and it is drawn rather than typed. Every letter in it is an outlined vector path, so there is no face to resolve, nothing to reflow and no second version of the lockup for a machine that is missing a font. The V at the front is the first letter of the name rather than a badge propped in front of it, and the coral disc lifted above it is the full stop in vatra.homes — the same disc, at the same diameter and in the same coral, sits on the baseline between VATRA and HOMES.

The V is asymmetric, and that is the whole of what makes it a drawn letter rather than a capital lifted out of a typeface. The short arm drops in from below the cap line; the long arm rises past it, 0.133 cap clear, before it turns down to the vertex. What holds the two together is weight: both arms are cut to the same width — 0.148 cap, measured across the terminals — and that is the width that matches the letter to the capitals after it. Nothing is heavier than anything else here, and there is no second weight anywhere in the lockup.

Both terminals are round caps — half-circles of 0.074 cap radius, exactly half the arm’s width, so the cap is a semicircle and not a corner softened afterwards — and the vertex is the same radius turned into a join. The lifted disc floats clear of all of it: its underside stands 0.433 cap above the cap line, and it is centred 0.994 cap from the V’s left ink edge — over the join between the V and the A rather than belonging to either one. Its right edge crosses the A’s by 0.091 cap, which at that height is air.

The mark alone is the same two paths cut from the same file — the V and its disc, padded into a square box — and not a second, heavier drawing of them. It is for the favicon, the app icon and places too tight for the lockup; never for a surface that has room for the whole name.

Everything is measured in cap heights. One cap height is the height of the capitals the word is set in — not a number of pixels, and not a font-size. The artwork is drawn on its own 532 × 100 grid, on which the cap line sits at y 34.85 and the baseline at y 66; one cap height is the 31.15 units between them, and every figure below is that grid measured and divided by it. The Logo component scales the whole drawing so that one cap height comes out at 0.4824 × its size, which is the only place a pixel is named.

Cap height

Cap line to baseline: 31.15 units of the artwork's grid, and the height of the capitals the V sits among. The ink box LOGO_ART declares around the whole lockup is taller — 1.709 cap — because the lifted disc stands above the cap line and the round letters drop below the baseline.

The V

Asymmetric. A short arm dropping in from below the cap line, and a long arm rising 0.133 cap past it before it turns down to the vertex. 0.857 cap of ink wide, one filled path, no stroke.

Arm width

0.148 cap, measured across either terminal — each is a half-circle whose chord spans its own arm square-on, and the two agree to within 0.002 units of the grid. This is the figure that matches the letter to the capitals beside it; there is no second weight in the lockup.

Terminals and vertex

Rounded at a 0.074 cap radius (2.3 units), the same at both tips and at the vertex.

The discs

0.233 cap across — 4.29 of them to a cap height — and there are two, both in the artwork's own coral. One is lifted above the V, the other sits on the baseline between VATRA and HOMES as the full stop in vatra.homes. They are the same size and the same colour, because they are the same punctuation mark twice.

The lifted disc

Centred 0.994 cap from the V's left ink edge, over the join between the V and the A rather than on either of them. Its underside clears the cap line by 0.433 cap, so nothing it passes over can touch it.

Overshoot

The drawing carries the overshoots a cut face carries: the A's apex stands 0.039 cap above the cap line, the S drops 0.015 cap below the baseline, and the V's vertex drops 0.026 cap below it. None of them reads short beside the flat-topped letters.

The fit against the A.

The V is not spaced by a font’s metrics — there are none — so the fit is drawn in. Between the V’s right ink edge and the A’s left there is 0.162 cap, tight for a pair of diagonals leaning away from one another, and it can be tight because the wedge between them is empty — nothing sits down in the line between the two diagonals. Up where the disc is instead, its right edge crosses the A’s left by 0.091 cap. That overlap costs nothing, since the A has no ink that high — its apex stops 0.394 cap short of the disc’s underside.

The same measurements, in grid units and in pixels.

size is the prop on the Logo component: one cap height is 0.4824 × it, and the artwork is scaled by that and nothing else. The navbar uses 30, the footer 33, and this page 120. These columns hold at any size and on any machine — the lockup is vector, so there is no face to resolve and no hinting to round it off.

Nothing comes within one cap height of the lockup’s ink on any side — a little over 4 disc diameters, and 0.4824 of the size prop. At the navbar’s 30 that is 14.5 px; on this page’s 120 it is 57.9 px. The measure is taken from the ink, and with this logo the ink is all there is: the component renders one SVG whose box is the ink box the artwork declares, with no padding and no leading of its own.

• The grey rule is the ink box. The coral dashed rule is the minimum clear space: one cap height out from it on all four sides.
• Clear space is a minimum, not a target. The navbar and the footer both give it more.
• No rule, border, photograph edge, caption or neighbouring logo enters that band — including the page's own coral accent line.

The floor is set by the discs and the arms, not by legibility of the word. A disc under about two device pixels stops reading as a circle and starts reading as a smudge, and an arm under one greys out unevenly against the letters beside it, which makes the lockup look like two weights when it only has one. At size 27 the lockup is 179 px wide, each disc is 3.0 px and each arm 1.9 px. That is the floor; under it the mark takes over.

Lockup, screen

Minimum 179 px wide — size 27, which holds each disc at 3.0 px and each arm at 1.9 px. Below that, use the mark alone.

Lockup, print

Minimum 25 mm wide, which puts the arms at 0.27 mm and the discs at 0.42 mm — inside what any commercial press will hold cleanly.

Mark alone, screen

Minimum 18 px square. The ink fills 84% of the box, so an 18 px tile draws a 8.9 px cap with a 2.1 px disc lifted over it.

Mark alone, print

Minimum 6 mm square — a 3.0 mm cap, a 0.69 mm disc.

Favicon

public/favicon.svg — a 32-unit rounded square in coral with the same two paths in white, the ink's long side set to 23 of the 32 units. At 16 px that draws the arms at 1.0 px: thinner than the floor above allows anywhere else, and licensed here because the coral ground carries the shape where a hairline on white would not.

Two colours do the work and they never swap jobs. Coral is the accent — eyebrow labels, rules, chapter numbers, icons and section tints, and the two discs in the logo. It says "this is Vatra Homes" and it says nothing else. Green is the action — every button that asks for something. A visitor should never have to work out which coral thing is clickable, because none of them are.

• The discs are #e58a67, the coral the artwork itself is drawn in — a shade softer than the interface accent, and the only place it appears. Not the green, not white, not a tint of either coral.
• Coral is never set as body text on white — 2.53:1 is below any accessible threshold. It carries labels, rules and marks, at sizes where it is a shape rather than a passage.
• Every call to action is #2A7F3A with white text, #216A2F when pressed. No green anywhere else.
• The three tints are grounds only. Nothing is typed in them.

Titles are set in Rexton Light, uppercase, at weight 300. It is a locally installed face and it is deliberately not bundled with the site: src/index.css declares it with src: local("Rexton Light") only, so a machine that has it uses it and every other machine falls through to Manrope. That is an honest trade rather than an oversight: no licence for web distribution is held in this repository. The wordmark is outside that trade altogether — it is drawn artwork, not type — so the one thing on the site that has to be exactly right on every machine is the one thing that does not depend on a font being there.

Body copy is Manrope at weight 300. The type scale has an 18 px floor and there is nothing below it anywhere on the site — hierarchy is carried by weight and colour instead, which is why a muted eyebrow label and a paragraph are the same size.

Titles

Rexton Light → Manrope, uppercase, weight 300, letter-spacing −0.01 em.

The wordmark

Not type. Outlined vector artwork, drawn once and scaled; the title face is never used to set the name, and the lockup has no letter-spacing to lose.

Body

Manrope, weight 300, 18 px, line-height 1.8.

Eyebrow labels

Manrope, weight 300, 18 px, uppercase, letter-spacing 0.072 em.

Measured against

Every figure in chapters 02 to 04 is measured off the logo artwork itself, in its own grid, and converted to cap heights. None of it depends on which face a visitor resolves; the type scale above is the only thing on this page that does.

Both columns below render the real logo component. The right-hand column is the same component with the mistake applied to it, not a picture of a mistake.

There is no asset pack, because there is nothing to pack. The logo is one SVG file, re-exported as a React component with its paths in one object, and the favicon is two of those paths on a coral ground. Anything else would be a copy that can go out of date.

The artwork

public/vatra-homes-logo.svg — the outlined wordmark as supplied, on a 532 x 100 grid. Every path on this page came out of this file.

The component

src/marketing/Brand.jsx — Logo, LogoMark, and the LOGO_ART object holding those paths and the grid they are measured on. Every number on this page is computed from it.

The favicon

/favicon.svg — 32-unit rounded square, coral ground, the V and its disc in white.

This page

src/marketing/pages/BrandPage.jsx — the diagrams place the artwork's own paths in their coordinate space, so they cannot disagree with the logo.