The Region System identity.
A working extract of the brand book: the mark, its construction, the colour system, the typographic scale, the motion principles and the rules that keep them intact.
Brand idea
The Datum
In surveying, a datum is the fixed reference from which every other measurement is taken. It is never the subject of the drawing, and nothing in the drawing is correct without it. Region System is the datum of the national digital economy — invisible in the picture, and the reason the picture holds together.
The mark
Four right-angle brackets, rotationally symmetric about an open centre. The outer silhouette is a stable square: permanence. The arms are deliberately unequal: a network has direction. The centre is void: the node is defined by what converges on it, not by what fills it.
Construction
Drawn on a 48-unit grid. Stroke weight 6 units, corner chamfer 8 units, arm lengths 16 and 10 units, aperture 6 units from each edge. Every dimension is a whole number of grid units so the mark stays crisp at any raster size and can be reproduced by anyone with a straight edge — including a fabricator cutting it into steel.
Clear space equals the stroke weight of the mark, measured from the outer silhouette on all four sides. Minimum reproduction size is 16 px on screen and 8 mm in print. Below 24 px the mark is used without the wordmark.
Clear space & minimum size
Clear space & minimum size
Lockups
Three approved configurations: horizontal lockup for headers and documents, stacked lockup for signage and vehicles, and the isolated mark for favicons, helmets, fibre drums and equipment plates.
Incorrect usage
Never do this
Rotate, skew or mirror the mark
Recolour outside the approved palette
Add gradients, shadows, bevels or outlines
Redraw the arms at equal length
Fill the central aperture
Place the mark on a busy photograph without a solid field
Colour
A graphite ground, a concrete neutral ramp and one accent. The accent is Signal — the 650 nanometre red of a visual fault locator, the only light in fibre optics a human eye is meant to see. It is used for state, direction and emphasis, never for decoration.
Graphite
Void
#08090B
--color-void
Graphite 900
#0C0E11
--color-graphite-900
Graphite 800
#111419
--color-graphite-800
Graphite 700
#171B22
--color-graphite-700
Graphite 600
#1F242D
--color-graphite-600
Concrete
Steel 500
#2C333E
--color-steel-500
Steel 400
#414957
--color-steel-400
Concrete 300
#6B7484
--color-concrete-300
Concrete 200
#98A1AF
--color-concrete-200
Concrete 100
#C3C9D3
--color-concrete-100
Chalk
Chalk 50
#E7EAEF
--color-chalk-50
Chalk 0
#F7F8FA
--color-chalk-0
Signal · 650 nm
Signal
#FF3D2E
--color-signal
Signal Strong
#D42B18
--color-signal-strong
Signal Soft
#FF8B7C
--color-signal-soft
Operational
Nominal
#3FCF8E
--color-nominal
Caution
#F5A524
--color-caution
Typography
One family, used with discipline. Display sizes are set tight and optically corrected; body copy is set at a comfortable measure; technical values are set in the monospace face so that a loss budget and a route length always look like measurements.
Infrastructure is a promise with a very long expiry date.
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ · ӘҒҚҢӨҰҮҺІ · ABCDEFGHIJKLMNOPQRSTUVWXYZ · 0123456789 · ≤ ≥ ± × ÷ ° Ø λ Ω · dB nm km Tbps
Design tokens
The design system is expressed as CSS custom properties and consumed by Tailwind through a single theme layer. There are no hard-coded colours in the application.
:root {
--surface-base: var(--color-void);
--surface-raised: var(--color-graphite-800);
--text-primary: var(--color-chalk-0);
--text-secondary: var(--color-concrete-200);
--line-hairline: color-mix(in oklab,
var(--color-steel-400) 42%, transparent);
--accent: var(--color-signal);
--measure-max: 88rem;
--gutter: clamp(1.25rem, 4vw, 4.5rem);
--section-y: clamp(5.5rem, 11vw, 11rem);
}Grid
A twelve-column grid with a fluid gutter, a fixed maximum measure and an 8-pixel spacing scale. Editorial sections break the grid deliberately and never accidentally.
Motion
Motion communicates structure: what is arriving, what is connected, what is being measured. Durations are short, easing is asymmetric, and everything obeys prefers-reduced-motion. If an animation does not explain something, it is removed.
Out expo
--ease-out-expo
cubic-bezier(0.16, 1, 0.3, 1)
Arrivals. Fast departure, long settle.
In-out quint
--ease-in-out-quint
cubic-bezier(0.83, 0, 0.17, 1)
Overlays and wipes.
Signal
--ease-signal
cubic-bezier(0.2, 0.85, 0.15, 1)
Indicators and pulses.
Tone of voice
Declarative. Technical. Unhurried. We state numbers with their units and tolerances with their conditions. We never use “solutions”, “synergy”, “cutting-edge” or “world-class”. A sentence that would embarrass an engineer does not ship.
Do
Do not
Splice loss ≤ 0.05 dB, measured bidirectionally.
Industry-leading splice quality.
Two paths that share no trench, bridge or power feed.
Fully redundant, best-in-class resilience.
Restoration target: eight hours on backbone spans.
Rapid response guaranteed.
Applications
The identity is built to survive contact with reality: stencilled on a helmet, etched into a fibre drum flange, printed on an A4 contract, embossed on a building, rendered at 16 pixels in a browser tab.
Safety helmet
Fibre drum flange
Vehicle livery
Site hoarding
Business card
Application icon
The complete brand book is maintained in the repository under docs/brand.
Tell us what you need to build.
A route, a capacity, a deadline, a regulatory constraint. We will tell you what it takes — in engineering terms, before commercial ones.