Every mark in this document is supplied as artwork in brand-2027/. Nothing here is rebuilt by hand — if a shape is needed at a size or colour the pack doesn't cover, it is generated from the source files, not redrawn.
One brand, three renditions of the same letter. The wordmark is the default everywhere. The flowing m speaks for the design side; the pixel m speaks for the AI side. They never appear together in a single lockup, and none of them is ever redrawn, stretched or re-coloured outside these rules.
The identity works like the studio: separate parts, each with one job. The wordmark is the default. The flowing m speaks for design. The pixel m speaks for AI. They never share a lockup. They take turns, like modules.
Default everywhere: site, documents, proposals, product UI.
The design voice. Used on the Design & Motion side of the studio.
The AI voice. Used on Advanced Software and everything intelligent.
The icon: favicon, app icon and avatar. The dot becomes the whole mark.
The m pulled apart along the interlock cut. For merchandise, stamps and title cards.
The master logo — custom-drawn, never set in a font. Use on everything formal: site header, documents, proposals, invoicing, product UI.
The creative signature — custom-drawn, the m sweeping into a swash that cradles the dot. Like the wordmark it is a fixed artwork: never traced, reweighted or rebuilt. Use for design-led contexts: portfolio covers, social avatar, motion intros, merch.
The official m resolved onto a 14-row grid — the letterform switches the modules on, nothing is drawn by hand. Use for AI products, technical decks and lab-style content.
Clearspace on all sides = the dot's diameter. Minimum width: 110 px digital / 28 mm print. Below that, use the small mark J (section 02).
Two states of one mark. Full resolution (left) is the default: every module the letterform covers is on, at full size. Resolving (right) scales each module by how much of it the letterform covers, so the curves return as a soft edge — use it for motion, loading states and large format.
The grid. Fourteen rows from the m's top to the baseline. Module = height ÷ 14; gap = 13% of the module. The grid is fixed — never re-sample the m at another resolution, and never nudge a module off it.
The dot. One module at double scale, sitting on the baseline. It is never rasterised into smaller squares and never rounded — in the AI voice the full stop is the module. It takes Coral or another sector colour; the m never does.
Minimum 48 px · below that use the small mark J
When the full wordmark won't fit, the m and the dot travel alone. Four constructions, one rule: the m is the official letterform — cut, masked or outlined, never redrawn — and the dot is the only part that may change colour (the primary mark carries the brand gradient). They never appear in the same lockup as the wordmark.
The full stop becomes the whole mark and the m is cut out of it, so it takes whatever surface it sits on. This is the icon: favicon, app icon, social avatar, anywhere Modulo appears as a single square. Nothing else takes that job. It is always the brand gradient disc — purple, coral, teal — and the m never takes a colour; a white or ink single-colour version is for one-colour print only.
A round bite out of the last shoulder with the dot sitting inside it, like a live notification. Use in product chrome, status and loading states, and anywhere the mark needs to feel switched on. The dot may change colour to signal state.
The m pulled apart along the same stepped cut as the interlock graphic, with the dot parked in the notch. Use for merchandise, stamps, title cards and print. Never below 32 px — the cut closes up.
The m outlined on its construction guides with the dot filled solid — the first frame of the brand intro. Use for the animation opener, technical drawings and this document. Not a general-purpose mark.
The wordmark's dot changes colour with the sector — Coral by default. The primary small mark does not: it is the brand gradient (purple → coral → teal, the colouring of the “You could be next” button) with the m cut out (first tile). Full rules in section 03.
Below these widths drop to J, which holds up to 16 px. Blueprint (H) has no minimum because it is never used small.
Every mark has an ink-on-paper version. J needs no variant — the cut-out takes the surface behind it.
The dot is the brand's constant — the full stop of confidence and the remainder of the modulo operation. Its home colour is Coral #EC6A4C — sector 01. In sector-specific contexts it may take that sector's colour — one dot, one colour, never a gradient.
Sectors 02 through 06 run teal → blue → indigo → violet → purple. For the most common form of colour blindness that is four steps of nearly the same hue. The colour is a flourish; the number is the identifier. Any legend, chart, tab or label that uses sector colour carries its number too.
This is also why the dot is one colour at a time. Six dots in six colours would be a palette swatch, not a signature.
A quiet base lets the six sector colours do the talking. One red only. Coral is sector 01, the dot’s home colour and the interface accent — the same value everywhere, so there is nothing to confuse it with.
Roughly eight parts ink and surface to one part colour. The base does the work; the sector colour is a punctuation mark, not a wash. A layout where colour covers more than it punctuates has stopped being Modulo.
The one exception is the cascade, where all six appear at once — that is the point of it, and it is why the cascade is used sparingly.
Sector colours are for graphics, the dot and data — never for body copy, and never for a heading that has to be read. The measured contrast below is why: half the palette fails on one background or the other.
AA = safe for text · LARGE = 18 px bold and above only · FAIL = graphics only.
The wordmark is drawn, never typed. Everything else is set in Inter — Black for display, Bold for headings, Regular for body — with a monospace for labels, indices and technical captions.
Inter Regular carries long-form copy across the site, proposals and documents in both English and Spanish. Generous line-height, 60–70 characters per line, left-aligned, never justified.
font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
Both faces are open-licensed (SIL OFL) and can be installed and embedded freely — in documents, in apps, and in client deliverables. There is no reason for a Modulo file to be set in anything else.
Everything is bilingual. Spanish runs roughly 15–25 % longer than English, so every button, nav item, label and lockup is designed against the Spanish length first and allowed to breathe in English — never the other way round.
Never letterspace or condense to make a translation fit; let it wrap to two lines. And the wordmark is never translated — Modulo is the name in both languages.
Layout furniture, never logos. They mark sections, carry moments of meaning, and keep the modular story visible: a module shifted, a seam engraved, two pieces made to re-fit, six sectors cascading.
A module displaced one register — the operation itself. Section markers, loading states, divider moments.
The quiet mono voice — the shear as negative space. Footers, stamps, embossing, premium print.
Two pieces pulled apart along a stepped cut, made to re-fit. Partnership and contact moments — "we fit into your system". Its top piece carries the closing gradient (see below); the bottom piece stays Ink.
Coral → Indigo → Violet at 120°: #EC6A4C → #6A57D0 → #9B55C4 (sectors 01, 05 and 06), a straight three-stop blend with the stops evenly spaced. It is used on exactly two things, always together, in the closing “Let's build” section: the accent words of the headline (“need built.”) and the interlock mark above it, where the gradient fills the top piece only and the bottom piece stays Ink. Nowhere else — not the wordmark, not the dot, not backgrounds, buttons or icons. Like every sector colour, it is for graphics and one large headline accent, never body copy. Light and dark are identical; the gradient does not change with the theme.
Six slices, six sector colours, stepping one register at a time — the whole studio in one graphic. Used for the system strip on the site, report covers and celebration moments. Order and colours are fixed: 01 → 06, top to bottom, and the step always runs left to right.
Four renditions of the same six slices. All of them keep the sector order, the step direction and the corner radius; what changes is depth. Flat is the default in layout. The dimensional treatments are for launch screens, covers, title cards and section tiles — on a dark tile only, never on paper and never behind text. They are not the app icon or the favicon; that job belongs to the small mark J (section 02).
Depth. Isometric at 2:1 — one unit right is one across and a half down. Every slice carries the same extrusion depth, and the side face is its own colour at 50 % brightness. No perspective, no rotation off the iso axes, no drop shadows on the floor.
Glow. Each slice glows in its own colour, never white and never a shared wash. It exists to separate the slices on a dark tile — if the artwork is going on paper or a light surface, the glow comes off and the flat cascade is used instead.
Halftone. On the site, the cascade bars (the system strip and the menu modules) carry a subtle dot screen: 6 px grid (5 px on phones), fine dots in the bar's own text colour, about 13 % opacity, fading in from the middle of the bar and rising to about 20 % on hover. It is texture, never pattern: the label must stay fully legible, and the dots never change colour or size per bar. Print and light-surface artwork stays flat.
The tile. Ink #141416, corner radius 22 % of the width, with the construction grid at 5 % opacity. The grid is part of the artwork — it is what makes these read as built rather than decorated — but it is never used on its own.
TECH-STACK TILES · SECTOR PAGES
When a page has to show the tools behind the work, it shows them as a grid of tiles — never as borrowed vendor logos. Each tile is a typographic monogram in the page's sector colour, a category label and the technology's name. Sector pages (one per discipline) pin the logo dot to the discipline's colour.
Ratio 1 : 1.04, radius 22, 1 px line, surface fill. Monogram in JetBrains Mono Bold in the sector colour; name in Inter ExtraBold; category in a mono label, uppercase. A halftone sits in the top-right corner only — pitch 12, 50 % opacity, masked to fade — so it never runs behind the name. Hover lifts 4 px and raises the halftone.
ANNOTATED WIREFRAME · LANDING-PAGE ANATOMY
When a sector page has to explain how something is built, it shows a schematic of it, not a screenshot: a quiet wireframe on a Surface card with numbered pins, paired with a list of the same numbers. The E-commerce page uses it for the eight patterns of a high-selling landing page.
CLIENTS · TRUSTED-BY MARQUEE
Clients are shown as names, never as borrowed logos: two rows set in Inter Black drifting in opposite directions, both solid, with a small dot between names that walks the six sector colours. Everything is black and white except those dots, so no client's colours compete with ours. A real logo, when we have one, replaces the name and is shown in pure black or white.
NAVIGATION · THE ROTATING MARK ON PHONES
On phones the header drops the full wordmark and the small marks take turns in the same spot. It is the one place the guidelines let marks rotate, because the header is the single mark in view and each mark is shown alone.
SERVICE PAGES · THE SECTOR LINE
Each discipline page closes its introduction with one plain line in that discipline's sector colour. It replaces the small cascade used before, which competed with the headline on phones.
SERVICE PAGES · THE AI MARK ON ADVANCED SOFTWARE
The Advanced Software page opens with the pixel m, the AI voice of the logo, above its eyebrow. It tells the visitor straight away that this is the software and AI side of the studio. The standard wordmark stays in the header.
SERVICE PAGES · THE DESIGN MARK ON DESIGN & MOTION
The Design & Motion page opens with the flowing m, the design voice of the logo, above its eyebrow. It is the counterpart of the pixel m on Advanced Software: the same position and size, a different voice. The standard wordmark stays in the header.
HEADER · THE LIGHT / DARK SWITCH
The theme switch is a two-part pill in the header, between the language switch and the menu button. Both modes are always visible, so nobody has to guess what a tap will do. The active mode is filled in the text colour.
CONTACT · THE VISUAL BRIEF
Every “Start a project”, “You could be next” and Contact link goes to one page: a short visual brief. Five questions, in this order, each tagged with its own sector colour: modules (Coral), what they want (Teal), the problems they face (Blue), who and when (Indigo), and a 15-minute call (Violet).
SERVICE PAGES · ONE PAGE PER MODULE
Each of the six modules is its own page, built on the Advanced Software layout: back link, eyebrow, headline, lede and scope pills, then what we do, toolkit, in practice, process, the other five modules, and a closing call to start a project. Each page is set in its module's sector colour (Coral, Teal, Blue, Indigo, Violet) and carries the same construction layer in the hero.
SERVICE PAGES · TOOLKIT ON ADS & PUBLICITY
The toolkit block now runs on Ads & Publicity too, in four groups: ad platforms, social and messaging, email, and CRM and automation, plus measurement. Tiles follow the same rules as the stack tiles on Advanced Software: a short glyph, the tool's real name, and the last tile in a row stretches so every row ends flush.
VOICE · HOW MODULO SOUNDS IN WORDS
Direct, bold, honest, transparent. Creative in the ideas, clinical in the language. Precise and commercial. Serious design, serious software. The copy should sound like Ben speaking, never like a brochure and never like a chatbot.
SITE STRUCTURE · THE CLIENTS SECTION AND THE MENU ON EVERY PAGE
The home page has a Clients section after Selected work. Case studies live there: each client with a case study gets a card with the problem, solution and result, and a link to its own page. The trusted-by marquee sits underneath. The burger and full-screen menu appear on every page of the site, including the case-study pages and the discipline pages, where the burger sits in the top bar beside the discipline symbol and the menu opens over the page.
CLIENTS · CASE STUDY TEMPLATES
Every case study uses one of three templates, chosen by the kind of work. All three are bilingual, follow the site theme and carry the standard menu. The templates live in case-templates/, with a chooser page that shows them side by side.
Icons are built from the same rounded module as the cascade and the shift — orthogonal, solid, one corner radius. They are not a stock set with the colours changed: anything added later follows the construction below, so the set can grow without drifting.
The same skeletons at 3 px stroke with round caps. Used inline — in tables, menus, body text and dense UI — where a solid icon would shout. The two sets are never mixed in one view.
Beyond the six sectors, the set covers everything the site and the decks ask for. Process, service and story icons are display icons — solid only, used on cards at 28 px and above. The interface icons are monoline only.
PROCESS · THE FIVE STEPS
ADVANCED SOFTWARE · SERVICES (9)
STORY · THE STUDIO PROMISES
INTERFACE · MONOLINE ONLY
The one exception to the no-diagonal rule. Interface controls — close, check, arrow, send — cannot be built from orthogonal modules and stay legible at 20 px. They are drawn in the monoline set, where a stroke may run diagonally. That licence belongs to interface icons only: no brand or content icon ever carries a diagonal.
Nothing is drawn twice. Case studies borrow from the set rather than growing it: Brand Identity, Campaign & Motion and Product & Web take sector icons 01–03; Custom Software, Automation and IoT take their service icons; Creative × Technology takes the story icon. Applied AI takes 06 rather than a second AI mark. If an idea already has an icon, it uses that one.
Artboard 48 × 48, live area 36 × 36 — a 6 px margin on every side that nothing crosses.
Shapes are rounded rectangles only. The single curve is the corner radius: 30 % of the module's shorter side, to the nearest 0.5, capped at 6.5. No diagonals, no circles, no strokes. The one exception is 04, which uses the same 2:1 isometric projection as the cascade.
Minimums 3 px module, 3 px gap between modules.
Depth is opacity, never a second colour — 100 % / 62 % / 34 %, three steps at most. Where modules overlap, the one behind is knocked back by a 2.4 px gap so the shapes never merge.
The solid set is drawn at 48 and used at 48, 32, 24 and 20. Below 20 px it loses its gaps — use the monoline set, which holds to 16 px.
Underneath the logo and the modules sits a drawing: halftones, grids, dotted rules, measurement marks and flat blocks of colour. It is what makes a Modulo page look built and measured rather than decorated — the studio showing its working. It is a layer, never a subject, and it is always the thing that gives way when something has to be read.
THE LAYER IN USE — GRID, HALFTONE, BLOCKS, MARKS, THEN TYPE
Angles. 0°, 45° and 90°. Nothing else, ever — the one angle in the brand is the one the stepped cut already uses.
Weight. 1 px for rules, grids and marks; 1.4 px for emphasis. The layer is never heavier than the lightest thing it sits behind.
Halftone. Dot pitch 10–14 px, maximum radius 46 % of the pitch, one ramp direction per field. Two halftone fields in a view at most.
Colour. Ink, Paper and the six sectors. No new hues, no gradients beyond the closing gradient (section 06) — a halftone is the gradient. Two sector colours per composition, three at the absolute most.
Each part of the layer has a band it stays inside. Together they keep the drawing quieter than everything drawn on top of it.
Order, back to front: grid → halftone → colour blocks → geometric shapes → marks and rules → type. Type is always last and always at full strength.
Everything moves with the same gesture: things load whole, shift one register, and hold. The brand intro follows the film — the wordmark appears on its construction guides, flows into the flowing m, and the dot lands last. Cascades stagger top-to-bottom; nothing bounces, nothing spins; respect reduced-motion preferences always.
The one thing on a Modulo page that never stops. Rings leave the dot and fade out — the signal the studio is on. Over time the dot walks the six sector colours, one at a time, and returns to Coral.
Dot and rings always share one colour at any instant — rings already in flight take the new colour with the dot. The colours are the six sector tokens only; nothing in between is ever held, and the blend is the only moment a mixed hue appears.
The stroke does not scale with the ring — it stays a hairline the whole way out, so the pulse never thickens into a halo.
MOTION · THE AI FLOW
The five-step flow on the site (Brief, Intelligence, Create, Curate, Deliver) plays once as it scrolls into view: a single signal moves node to node and each step lights as it arrives. Then it rests, fully lit.
MOTION · THE HERO LOGO CAROUSEL
On desktop, the empty top-right of the home hero carries a quiet logo carousel: the five Modulo marks take turns, each melting into the next. It is the logo system shown in motion, one voice at a time.
The same morph runs in the mobile header, using the four small marks. The marks are the supplied SVGs, never redrawn for the animation.
A package card sells one fixed scope at one price. Four cards sit side by side, from the smallest scope to the open one, so the buyer reads the ladder at a glance. First used on the Website in a Week page.
Four columns on desktop, two on tablet, one on phone. The Spanish edition shows the same USD figure with a dot as the thousands separator: US$2.990.
A package's payment plan is drawn as one bar per package, split in proportion to each instalment, with the share, the amount and the milestone under each segment. Segments step up in sector-colour strength from first to last payment, so the eye reads the money moving toward delivery. A separate band shows the pay-in-full offer with the old and new price.
One question per screen, four large answer cards, a progress bar of three segments, and a live size ladder beside the card that lights the level as answers come in. The result shows the level, a plain explanation, the answers given and a button that carries the result to the contact form. First used on the Business Size page.
Selected answer takes the sector colour at 14 % fill with a solid border. The ladder steps lit levels up in strength and shifts the current level 8 px right. Reduced motion removes the transitions.