The language, written down.
Every colour, size, component and rule of tone this template is built from — shown as the real thing, not described.
- 38Cities
- 24 128Listings
- 1 940Agents
01 / Colour
01 / Colour
every value used on the site, and where
- Background #100f0c The page. Also the text colour on gold buttons.
- Ink #ece5d8 Primary text, on panels and on the page.
- Accent #d9a04a Labels, active state, figures that matter, primary buttons.
- Positive #7ea36a Verified, complete, cheaper, on time.
- Warning #c8763f Overdue, missing, above market, restricted.
- Footer #0a0908 The footer band. Fixed on every page.
- Panel rgba(24,22,18,0.92) Standard bordered panel.
- Panel solid rgba(24,22,18,0.96) Cards inside a 1px-gap grid.
- Panel hover rgba(34,31,25,0.98) A card under the pointer.
- Field rgba(16,15,12,0.5) Inputs and textareas.
- Accent hover #e8b563 Gold button under the pointer.
- Negative #c4573c Costs more, sign out, close account.
The ink ladderrgba(236,229,216, α)
- 0.09 Table row dividers
- 0.14 Section rules, inner panel rules
- 0.16 Grid gaps, note-box borders
- 0.2 Panel borders, input borders
- 0.28 Outline buttons
- 0.4 Micro labels, sheet codes
- 0.5 Secondary meta, sub-labels
- 0.6 Table cells, body values
- 0.72 List labels, quiet body
Use these steps and no others. An in-between value is always a mistake — nine steps cover everything on the site.
Accent washesrgba(217,160,74, α)
- 0.06 Table row hover
- 0.08 Selected row in a picker
- 0.10 Callout panel, the one that matters
- 0.14 Active chip fill
- 0.55 Active chip border
- 0.92 Badge fill over a photograph
What the three signal colours mean
Green is always better for the person reading.Gold is the thing to look at.Orange is a cost, a delay or a gap. Never colour something green because it is large.
02 / Typography
02 / Typography
three families, no others
- Headings and figures Instrument Serif Weight 400 only. Every heading, and every number presented as data — prices, areas, counts, days.
- Everything else Manrope 300 for body, 400 for labels and values, 500 for nav, 600 for buttons. No 700.
- The wordmark only AVAVA Outline, never filled. -webkit-text-stroke: 1.2px #d9a04a in the header, 1px at 0.09 ink for the watermark.
-
Page heading — h1
Land, with the
zoning attached. - The payoff figure €1 225 112
- Stat value €28.4M
- Section h2 What a two-bed costs where
- Card title Rua do Século 118, 3rd
- Table figure €985 000
- Section label 01 / Register
- Field label Monthly ceiling
- Badge Zoning certified
- Button Open the file
- Body Ninety-six square metres measured on site — four under the previous listing and eight under the deed.
- Note Released to any buyer who asks — before an offer, not after.
Nothing goes below 8px, and 8px is reserved for uppercase tracked labels. Body copy never below 11px. Uppercase always carries tracking — 0.1em at the tightest, 0.22em for labels. The 5 rows marked "floor" ship at 12px rather than the 8 and 10 named here: Envato rejects type below 12, so the template raised its floor and this guide follows the template.
03 / Spacing and geometry
03 / Spacing and geometry
the rules that make pages feel the same
The measurements
- Page gutterclamp(28px, 3.2vw, 56px)
- Between sectionsclamp(26px, 3.4vh, 38px)
- Panel padding22–28px
- Table row14–15px 20px
- Table header12px 20px
- Column gapclamp(20px, 2.2vw, 30px)
- Dashboard rail236px
Border radius: 0
Square, everywhere. The only round things on the site are avatars, status dots and the timeline dots — where roundness means "a person" or "a point in time", never decoration.
No shadows
One exception on the whole site: the nav dropdown. Depth comes from hairlines and panel tints, not blur.
Motion
0.2s ease on hovers and state changes. 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) for anything that changes size, like the gallery accordion.
Nothing animates on entry. No fades, no slide-ins, no counting numbers. A page is either drawn or it is not.
Reduced motion
prefers-reduced-motion drops every transition to 0s. Behaviour stays, animation goes.
04 / The drawing-sheet motifs
04 / The drawing-sheet motifs
what makes it look like AVAVA and not a portal
- Blueprint grid rgba(236,229,216,0.045) hairlines at 26–36px. Behind drawings and card photographs, never behind text.
- Crop marks Four 16px corner brackets, 1px gold at 0.6, inset 14px. Only on hero drawings and featured sheets.
- The veil hatch Means "nobody has been inside" or "not published yet". Data-driven — never decorative.
- Plot and footprint Dashed boundary, gold hatch fill. The block is sized by sqrt(coverage) — it is a plan, not a bar.
The sheet strip
Riba Nova · Phase IIRender 1:200EU · Off-planThree items under a drawing, hairline above, last one gold. Identity, scale, status — in that order.
The shared hairline
Card grids never border their cards. The grid gets gap: 1px over a 0.16 background inside a matching border, and the cards paint solid. One hairline per edge, none doubled at the intersections.
05 / Buttons
05 / Buttons
four kinds, and that is all
- Primary Hover → #e8b563
- Outline Hover → gold border and text
- Small, in a row Inside table rows and lists
- Destructive Never filled, never the default focus
- Done state An action that has been taken
- Text link Always ends with →, always gold
One primary button per view. If two things look equally important, neither is. Labels say what happens — "Book a viewing", not "Submit"; "Send the owner this case", not "Confirm".
06 / Chips, badges and pills
06 / Chips, badges and pills
the same shape doing three different jobs
Filter chipsselectable
Counts derive from the data, never authored. Chips carrying numbers drop to 0.08em tracking and sentence case.
Status pillsread-only
Clear
Condition
Restricted
Registered
Border and text share one colour. Pills are never filled — a filled pill is a badge.
Badgesover photographs
Available now
Ready
Furnished
Flush to the top-left corner with no inset, or inset 10px at the top-right. Dark text on the coloured fills.
07 / Form controls
07 / Form controls
inputs, switches, sliders
Focus turns the border gold. Every field carries an 8px uppercase label above it with an 8px gap. Errors go under the field at 11px in orange, one sentence, saying what to do.
Toggle
A square knob in a square track. 40×21 standard, 30×17 inside a matrix. No pill, no radius.
Segmented
One box, inner dividers at 0.14. Two to four options; more than four is a chip row.
Range
Asking−12%
accent-color: #d9a04a, native track. Always labelled at both ends, and always paired with the figure it produces at 26–42px above it.
Radio row
08 / Panels, cards and tables
08 / Panels, cards and tables
the three containers everything lives in
| District | Two bed | Per m² | Supply |
|---|---|---|---|
| AlcântaraLisbon | €1 320 | €17.4 | Good |
| EstrelaLisbon · row hover | €1 480 | €19.8 | Tight |
| RuzafaValencia | €960 | €11.8 | Very tight |
Median asking rent · service charges excludedMarket report →
Header and rows share one grid-template-columns string. The last column is right-aligned. Every table closes with a footer strip: what the numbers mean on the left, one gold link on the right.
Note boxinside a panel
Priced above the roomTwo thousand people looked and three came to see it. At this price the buyers who could afford it have already decided.
2px coloured left border, 1px border in the same hue at 0.5, one shade darker background. The colour carries the verdict.
Empty state
Nothing on Mon 05 in confirmed viewings. Click the day again to clear it, or pick another status.
Keep the border and the height. One sentence that names the active filters and says how to get out. Never an illustration.
09 / Data display
09 / Data display
bars, sparklines, timelines — drawn in divs, never a chart library
- Progress 3px inside cards, 5px in panels, 8px when it is the point. Track always 0.12.
- Sparkline — falling Last three bars carry the trend colour: gold rising, orange falling. Earlier bars stay at 0.22.
- Distribution — in range Gold means "reaches it", 0.16 means "does not". Selection by colour, never by opacity of the same hue.
- Stacked mix Running well 17Needs a word 8
Timeline
- GroundworksComplete
- StructureComplete
- FaçadeIn progress
- HandoverScheduled
Base rule at 0.18 with a gold rule over it to the current step. Dots: filled behind, hollow gold at the current step, hollow grey ahead.
Funnel cells
- Views2 210
- Enquiries140.6%
- Viewings321%
- Offers0none
Value plus its conversion rate beside it. The rate carries the judgement colour, not the value.
10 / Page furniture
10 / Page furniture
the parts every page repeats
Section rulethe page's spine
03 / Available noweight homes
true monthly under every rent
Number and name in gold, a 28px gold dash, then a derived count in ink 0.5. On the right, one line of context — never a second heading. Sections number from 01 down the page.
Dashboard rail item
- Enquiries6
- Viewings4
- Performancesoon
Active: 2px gold left border, 0.08 wash, gold text. A badge turns orange only when it means work owed. An unbuilt screen sits at ink 0.4 and is not a link.
11 / Writing
11 / Writing
the part most systems leave out
- Say the consequence "You will find out about a price cut when you next open the site — which is usually too late." Not "notifications disabled". Every setting explains what happens, not what it is called.
- Admit what is unknown "Nobody has been inside. Budget for the worst room you cannot see." A gap in the data is content, not an omission. The hatch, the "unseen" rows and the exterior-only labels all exist for this.
- Argue against yourself "This cut costs the owner €31 000 and reaches nobody new. Walk away." The design is allowed to talk a user out of something. That is what makes the rest of it believable.
Numbers
Thousands separated by a space Thousands separated by a space — €1 225 112, 24 128 listings. Never a comma, never a dot. One formatter for money and counts alike, or the two drift apart. Whole units unless the decimal carries meaning.
Sentences
Sentence case everywhere except tracked labels. No exclamation marks, no emoji, no "Oops". Numbers written out when they are prose ("nine files"), as figures when they are data. British spelling.
12 / A form, in full
12 / A form, in full
the layout every settings and intake page uses
Three columns for identity, four for an address, one field per row on mobile. Related fields are separated by a 0.14 rule and a one-line heading, never by a card. The save footer carries a status dot on the left and never more than two buttons on the right.
13 / The money block
13 / The money block
every calculator on the site is this shape
Land, tax, build and feesstandard build
- The plotPLOT-0128 · Setúbal €55 / m² €132 000
- Purchase tax and notaryIMT, stamp duty and the deed 8.1% of land €10 692
- ConstructionArchitect-drawn, insulated to class A €1 580 / m² €948 000
- ConnectionsFour services to bring in site specific €23 900
All in, keys in hand600 m² finished at €2 042 per m² €1 225 112
Against buying it built
Works out 10% below buying the same house finished — and you choose the plan.
Rows carry label, note, basis, amount — the basis column is what makes the number checkable, and it is why nobody has to ask where a figure came from. The total sits at 42px in gold with its per-unit line beneath, and the comparison always states what the alternative costs rather than implying it.
14 / The rest of the parts
14 / The rest of the parts
everything else the pages are assembled from
- Stat tile 33+2 this monthTwo new files in Alcântara since the first.
- Person row ABAnna BertinAgent · Príncipe Real Monogram, never a photograph placeholder. Gold ring when active.
- Checklist row Measured survey132 m² against 140 on the deedPermitsTerrace enclosure unconsented
- Document row Survey and floor plan1.8 MB A lettered square, never a file-type icon. One letter, 17px, ink 0.28 border.
- Message bubbles Thursday at eleven is confirmed. Booked. Could you send the accounts? Theirs gold-edged and bright, yours grey-edged and quiet. Never a coloured balloon.
- Slot picker Thu 10:00Thu 17:30Fri 12:00Sat 11:00 Selecting one rewrites the button below it: "Book Thu 10:00 with Anna".
- Step header 01Your home02The rooms 2px gold top border on the current step, a green tick when done.
- Tabs with counts Everything7Owners2 Counts sum to the "everything" total, always. A tab that lies is worse than no tab.
15 / Header, footer and overlays
15 / Header, footer and overlays
the fixed furniture, for reference
The nav dropdownthe only shadow on the site
By status Homes for sale New builds Recently soldGold top border at 0.7, everything else at 0.14. Rises 24px on open over 0.22s. Column headings in Instrument Serif gold with a hairline under them.
The utility bar and the watermark
24 128 listings live·EN · USDYour brief, in your own words.
The watermark sits behind the heading on purpose, outline only at 0.09, and is never moved out of the way. The gold dot pulses 0.35 → 1 over 1.8s, and it is the only looping animation on the site.
16 / Marks
16 / Marks
there is no icon set — this is the whole vocabulary
- →Onward link
- ·Separator
- /Breadcrumb
- —Not applicable
- ✓On file
- !Missing
- Status dot
- Service squares
- Account
- Nav chevron
Two inline SVGs and eight characters. If a new idea seems to need an icon, it almost always needs a word instead — the site is a set of documents, and documents are read, not scanned for symbols.