Aller au contenu
ALTIMETRIASTUDIO

Creative, Design & Template Catalogue

Every document comes out different depending on who made it. This is not a matter of taste: no system lets anyone produce quickly without someone going over it again.

A visual system is recognised before it is read — and can be extended without us.

Recognisable system
The catalogue of choices

Nine invented houses, nine identities held

An identity studio, a fit-out contractor, a health centre, a hotel-restaurant, a property developer, a software publisher, a manufacturer, a professional firm, a local authority: nine houses that do not exist, each with its public page, its palette, its written voice and its own way of saying what it does. They open for real and can be handled. Invented brands and data, stated as such — what is judged here is how they hold.

9 demonstrations, 9 trades — fictional data, real moves
Demos by tradeTrade demonstration — fictional data

An identity studio's website

It sells a discipline rather than a logo: three convictions that are expensive to hold, three pieces of work and the making constraint each had to absorb.

Who it is forCreative studios, image agencies, independents who sell a method rather than a moodboard.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

A fit-out contractor's website

It speaks the trade, not the brochure: six packages with their real trap, three sites with their difficulty, four commitments checkable during the works.

Who it is forContractors, trades and subcontractors who want to be judged on their method.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

A new-build scheme's page

It shows the scheme in isometric, the four layouts with their plans, the six dated milestones — and says that reserving starts with being able to walk away.

Who it is forDevelopers, land promoters and housing bodies marketing a scheme.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

The website of an eleven-room house

It sells three moments rather than a list of amenities, shows each room with its plan and its owned-up flaws, and displays the nights actually free.

Who it is forCharacter hotels, guest houses, restaurants and shops that sell an experience.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

A health centre's website

It shows the wait actually observed for each specialty, including the longest, presents the team by role without naming anyone, and writes down once and for all what people ask on the phone.

Who it is forHealth centres, group practices, care centres and grouped professionals.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

The “Projects & procurement” portal

Shows companies what the authority is about to build before the notice is published: ongoing projects, the next twelve months of tenders, and how to become a supplier.

Who it is forAn authority that wants local firms to bid, not only those who watch the notices.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

Welded fabrication, machining, assembly

Publishes its machine capabilities with their stated limits, and lets the visitor check for themselves whether their part fits the shop — or exceeds it.

Who it is forAn industrial subcontractor who wants to be asked about the right parts, and only those.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

Accountancy and company law

Sells a checkable promise rather than a posture: knowing what the rule said on the day of the transaction — and stating upfront the three engagements the firm turns down.

Who it is forAn independent firm that wants to be chosen on its method, without quoting fees.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Demos by tradeTrade demonstration — fictional data

Service commitment tracking

Puts the product in the hero: a drawn interface where the 70% alert threshold crosses every bar, and a trial offer that replays the visitor's own last three months.

Who it is forA publisher selling to support and operations teams, who must be understood in ten seconds.

HTML · CSS · SVG · JavaScript sans dépendance · bilingue · deux régimes

designed on 6 September 2026

Each piece opens full size, exactly as it runs; the live models are driven by hand.

The catalogue of choices

Art directions, chosen and set aside

A direction is chosen on evidence: the same screen in several palettes, the board that set ours, and the two tracks explored then dropped — they are here because they helped choose the other. Alongside, the same method applied to time: twelve breakdown frames and an edit of cards, to settle a film before producing it.

3 pieces from our design stock
Scenes & motionWorking mock-up, in reserve

The teaser animatic

“Hundreds of thousands of contracts. Every year.” — the opening film as an HTML animatic: cards, pacing, fades, before any image.

Who it is forA brand film to be approved on its edit before it is produced.

designed on 20 July 2026

Art directionsWorking mock-up, in reserve

Radar Premium — the chosen direction

The six layer colours, each on its dark ground, and the type treatments: the board that set the art direction.

Who it is forA team that needs a written direction before drawing a screen.

designed on 26 June 2026

Art directionsWorking mock-up, in reserve

The teaser storyboard

Twelve frames, one shot per frame: the beacon, the signal, the map, the counter, the decision. The film told before it exists.

Who it is forA brand film decided at the breakdown.

designed on 20 July 2026

Each piece opens full size, exactly as it runs; the live models are driven by hand.

The workshop where components are governed

A model is only worth what it holds outside the mock-up it was born in. This is where it is decided what enters the library, what stays out, and under which rule a screen drawn later, by someone else, still reads as yours.

System of components and stylesDesign system
Typography, colour, components, two governed themes. It is what makes an asset designed six months later still look like the house.

Decided on image: the programmes rendered in 3D

Villas, collective housing, a subdivision, a place of worship: for each, the same geometry rendered by day and by night, in base then validated variants. The client chooses on images, not on promises. No client name, no site name.

ARCHITECTURE & 3D

Six programmes, decided on image.

Villas, collective housing, a subdivision, a place of worship: for each, the same geometry rendered by day and by night, in base then validated variants — the client chooses on images, not on promises. Hover a card to switch to night.

150 affordable villas

Residential programme of 150 terraced villas on two and three levels, two façade treatments, roads and planted areas.

3D modelling of the programme, two façade variants, street and overall views, day and night versions — validated with the client on images, before any permit drawing.

183 affordable housing units

Collective housing on four levels around a courtyard, corner tower, ground-floor shops, parking at the heart of the block.

Aerial view, street-level views, detail of the corner tower, sky view of the site plan — the same geometry in day, night and texture versions, to settle materials and colours without waiting for the site.

78 high-end villas

Semi-detached villas on two levels, arcades and arched openings, aligned along a waterfront; forecourt, parking and gardens.

Aerial overall views by day and by night, main, rear and side façades, variants with garden and boundary wall — twenty views for a single programme, because a villa sells on every face.

Three private villas

Three single-family houses for private clients: two contemporary treatments, one in stone; exteriors and interiors.

Day and night façades, figures for scale, and the interiors — kitchens and living rooms in three wood tones — to choose on image what cannot be corrected afterwards.

Residential subdivision

Layout plan of a subdivision — plots, roads, green spaces, legend — and its five-level buildings seen from the street, by day, by night and at dusk.

From the layout plan to the mood image: the same project read by the developer, on the plan, and by the buyer, from the street.

Neighbourhood mosque

Minaret, prayer hall, crenellated enclosure and gate; planted forecourt.

Four viewpoints, in base then optimised versions, by day and by night — materials and lighting settled on image before the site opens.

Portfolio closed on 21/09/2026. Renders produced by the firm; references presented without client or site name, out of respect for confidentiality and GDPR.

Forms seen before they exist, told without the names

Six residential programmes rendered in three dimensions before the first ground was broken, an animated identity written in code, a configurator that shows the real rendering before development: what we designed, what it produced, and what was hard.

TRACK RECORD · REAL ASSIGNMENTS, NAMES WITHHELD

  1. 01

    Brand and product teams that settle a visual direction on screenshots, then discover in development that the real rendering does not match.

    When · Summer 2026, live.

    What we did

    We built a configurator that recomposes an entire interface live — typography, palette, density, corner radii, stroke weights — in the very code that ships to production. What is settled on screen is what is delivered: there is no translation step between the mock-up and the product.

    What it produced

    A single scene, mounted by the public page and by its reduced preview without being duplicated, and an exportable brief carrying the settings chosen.

    What was hard

    A configurator that lives beside the product ends up lying. This one shares its components with the site: the day a component changes, the demonstration changes with it — or it stops compiling, which is exactly the intended behaviour.

  2. 02

    Clients on residential programmes — a hundred and fifty terraced villas, a hundred and eighty-three collective housing units, a subdivision, private villas — and a place of worship.

    When · Programmes predating 2026; views republished under neutral names in September 2026.

    What we did

    We modelled the programmes from the drawings, produced two façade treatments where a choice had to be made, and delivered street views, overall views and sky views — each in a day and a night version — so that materials, colours and siting could be settled on image, before any permit drawing.

    What it produced

    Six programmes, sixty-eight published views, the same geometry in day, night and texture versions. The manifest linking each file to its source stays internal and is never served.

    What was hard

    A developer sells off-plan and has nothing to film. So they must be shown what does not exist yet, without flattery: the same light the site will have, a passer-by's eye height, and the night view — because it is the night view that exposes a badly proportioned façade.

  3. 03

    Our own house, then the same principle taken up for brands that apply their mark across screens of every size.

    When · 2026, in service on the site and in the films.

    What we did

    We drew the house's mark and animated it in code rather than in an image file: the outline is traced, the left face rises, then the right, then the ridge and the summit. The timing of that gesture is written once and replayed identically by the screen and by the film.

    What it produced

    An identity crisp at any size, from favicon to full page, animated without a video file, and a single timing sheet that governs both the screen and the end credits.

    What was hard

    An identity delivered as image files degrades at every size and, above all, it drifts: the site's version and the film's version end up not being the same brand. Written in code, the sheet is unique — when it changes, both change together.

No client name is published, with or without their consent. We publish no win rate: it is not measured, and an unmeasured figure is not a reference.

What we do

  • Art direction and full visual identity.
  • Design system: grid, typography, colour, components, usage rules.
  • Print, packaging, signage and commercial documents.
  • Decks and reference documents: submissions, presentations, dossiers.
  • A catalogue of templates your teams can adapt themselves.
  • Design tokens — colour, typography, spacing — defined in both regimes, light and dark. A colour that exists in only one regime disappears in the other, and nobody sees it until the first reader who changed their setting.
  • Contrast measured on screen, against the background actually painted, never assumed from the style guide: gold text that is perfect on black can be unreadable on paper.
  • Anything carrying readable text — logos, figures, titles, captions — is set in code, never rendered by an image generator, which produces shapes that merely look like letters.

What we deliver

Visual identity & application guidelines
Documented design system
Exportable design tokens, defined in light and dark
Catalogue of editable templates
Print & packaging materials
Deck & document templates
Measured contrast report, screen by screen
Brand kit delivered with its source files

The method

01

Explore

Several genuinely different directions, not three shades of one.

02

Commit

One direction owned and argued — the others set aside in writing.

03

Systematise

What is decided becomes a rule: grid, scale, usage. Fewer patterns, better held — luxury comes through restraint.

04

Hand over

Sources, templates and instructions: your teams extend it alone. And what we cannot produce at that level is said beforehand, never on delivery.

WHAT YOU WILL HAVE IN HAND · The Variant Factory

Change format, language or channel: the variant composes, retains lineage and blocks what rights do not allow.

One base, several variants held together.

We turn identity into a production system, not a collection of mock-ups. The master defines position, composition rules, variable elements, controls and rights that let the team produce without diluting the brand.

The executive sees what remains canonical, what may vary and what requires validation. Every adaptation retains its link to the master, language, channel and owner.

Produce a variant

Master → rules → components → variant → approval

The specialist opens the production graph: tokens, components, content, safe zones, export constraints, languages, rights and checks. An amended rule marks every potentially affected variant without silently rewriting it.

The factory separates authorised variation, exception requiring approval and blocked use. An asset without rights, date or territory remains N.F. and does not enter the export. The catalogue renders the rule before the effect.

Foundations and primitive tokens: colours, dimensions, font families, weights, radii, spacing, durations and curves — a value is named by its nature before it is assigned a use.

Semantic tokens: intent is expressed (text.primary, surface.emphasis, space.section) rather than medium, so a theme or context can change without rewriting components.

Aliases, references and resolution: a semantic token connects to a foundation; circular references are detected and the resolved value is displayed with its provenance.

Composite tokens: properties that travel together — typography, border, shadow, gradient, transition — stay documented rather than locked into an opaque style.

Grid, vertical rhythm and type scale: columns, gutters, margins, baseline, leading and hierarchy levels are tested against actual density, not an ideal specimen.

Component anatomy, slots and properties: mandatory structure, injected content, variants, sizes, densities and states are distinguished within a matrix of allowed combinations.

Interaction states: default, hover, visible focus, active, selected, loading, empty, error, disabled and success each keep a label or sign distinct from colour alone.

Responsive constraints and intrinsic layout: content-driven thresholds, reflow, min/max, stacking priorities, safe areas and truncation are tested against extremes before the median case.

Internationalisation and expansion: long copy, unbreakable words, reading direction, punctuation, number/date formats and editorial variants — no template relies on French copy happening to be the right length.

Design accessibility: text and component contrast, focus appearance, target size, text alternatives, reading order and keyboard equivalent, each criterion linked to its component.

Templates, regions and composition rules: locked regions, editable fields, conditional content, alignment rules, length limits, image ratios and channel variants stay separated.

Versioning, deprecation and migration: owner, draft/adopted/deprecated status, change log, dependents, replacement, migration window and regression control accompany every token.

Sources drawn on
W3C — WCAG 2.2Design Tokens Community Group — Design Tokens Format Module

The factory makes the rule, impact radius and rights status visible; it replaces neither expert review (contrast, accessibility) nor user testing, and cannot lift a block on an asset whose rights, date or territory remain N.F.

THE QUESTIONS THAT SET THE PRICE

What we will ask you before we start.

Four questions we ask on every file in this domain. Each comes from an incident someone paid for — us, or a client before us.

Does the system survive our departure?

We deliver tokens — colours, typefaces, spacing —, named components and their rules of use: a system your teams extend without us. Luxury through restraint: fewer patterns, better held.

If nobody asks it — A magnificent website on delivery day, unrecognisable six months later.

Is animated text coded, or generated?

Anything containing readable text goes through code, never through an image generator: an AI produces shapes that look like letters. Logos, figures, titles and captions are coded.

If nobody asks it — A fifteen-second spot with an unreadable slogan.

Does the visual hold in both modes, light and dark?

Every colour is defined in both regimes, the background is painted explicitly, and contrast is measured on screen — not assumed from the style guide.

If nobody asks it — Gold text perfect on black, unreadable on paper.

If excellence is out of reach, do we say so beforehand?

A mediocre visual delivered without warning costs more than no visual at all: it becomes the benchmark of what we can do. We say beforehand what we cannot produce at that level.

If nobody asks it — An average mock-up that becomes the brand's standard.

CAPABILITY SCENARIO — NOT A CLIENT REFERENCE

When we get the call

A sales team rebuilds every document by hand and the result changes from one contact to the next. We fix the system, then deliver a set of editable templates covering their real cases. Consistency no longer depends on one person paying attention.

Planning something in Creative, Design & Template Catalogue?

Write to us. We respond with an assessment, not a brochure.

Write to us