COLOUR KIT · RAVOTEQ
The whole site is built from these.
White ground, plum for text and structure, brass for the one thing that matters on a screen, violet for anything that signals a system running. Warm greys carry the rest. Tap any swatch to copy its hex.
CORE
TEXT AND GROUND
Near-identical variants exist in older pages and collapse into these: #F5F3F0 and #FBFAF8 into warm tint #FAF8F4, #5F594F and #5B564E into body #55504A.
PALE VIOLET AND RAIL GREYS
LINES, EDGES AND THE DARK FOOT
Older pages also carry near-identical variants. Use the canonical value: #E2DED8 and #DCD7D0 collapse into card edge #DDD9D3, #F0EEEB into row rule #F2F0ED, and #ECE8E2 into #E9E7E3.
ON THE DARK PANEL
GRADIENTS AND SELECTION
Brass to violet
Progress rails, chosen states, the primary CTA. Horizontal only.
Vertical spine
The hero rule and any measuring line that runs down a page.
Selection
#E6D9F3 behind selected text, with plum ink on top.
DESIGN SYSTEM · RAVOTEQ
How the pieces are made and moved.
One typeface carrying every weight, a small kit of parts, instruments that read like measuring equipment, and motion that only ever states a fact. The rules below hold every page together.
TYPEFACE
Poppins
One family, four weights, no monospace anywhere. Weight does the work that a second typeface would do: 200 for display, 300 for everything read, 400 for the one thing being named.
200Display and statements
300Body, labels, most headings
400Venture names, selected rows
500The wordmark only
THE SCALE
PAGE TITLE
One statement, never two lines of hedging
25 to 44px · 200 · -.042em
SECTION HEADING
What the section is actually about
21 to 31px · 300 · -.03em
VENTURE NAME
RavoLink
23 to 31px · 400 · -.03em
CARD HEADING
The claim this card is making
17 to 21px · 300 · -.026em
BODY
Paragraphs run at 15.2 over 1.62, in body grey, and never wider than about 34em so a line stays readable.
15.2px · 300 · 1.62
SECONDARY
Notes under a claim, row descriptions, and anything the reader can skip.
12.9 to 13.5px · 300
EYEBROW
SECTION LABEL · IN CAPS
9.5 to 11px · .16 to .2em
LAYOUT AND SPACE
MEASURE
1180px, centred
Every section shares one container with clamp(18px, 3vw, 36px) side padding. Nothing is full bleed except the contact panel and the footer.
SECTION RHYTHM
Rule, eyebrow, content
Sections open with a 1px #E9E7E3 rule and a caps eyebrow, then clamp(22px, 2.6vw, 32px) of air. Between sections: clamp(46px, 6vw, 88px).
COLUMNS
Flex with gap, never margins
Two columns at roughly 1.3 to 1, wrapping at 300 to 340px. Gaps clamp(22px, 3.5vw, 56px). Grids use auto-fit minmax.
RADII
pill
999px for anything you press. 16px for cards, 14px for small cards, 12px for an inset panel inside one, 10px for a chip, 18px for a wrapper that holds other cards. 50% for dots and the mark, 2 to 3px for thin strips. Asymmetric radii only where a shape meets an edge, as in 14px 14px 14px 0. One shadow exists on the whole site: a 1px hairline at .04 alpha under the inset question card. Nothing else casts.
THE PARTS
Buttons and links
One primary per screen. Text links carry an arrow and no underline. Hover lifts 2px or turns brass, never both.
Pills and eyebrows
RUNNING NOWYour sector
SECTION EYEBROW
Status pills are caps and brass. Attribute chips are sentence case and grey. Eyebrows label a section and never a paragraph.
Cards
Ordinary card
White, #E9E7E3 edge.
The one that matters
Warm tint, darker edge. One per screen.
Padding clamp(16px, 2.2vw, 32px). Cards never stretch to match a neighbour: align to flex-start.
Rows instead of bullets
A claim, plainly statedIts qualifier, if it needs one.
The next oneOr nothing at all.
Where a list should feel lighter, drop the rules and use brass dots
—Or a violet em dash, for facts stacked under a paragraph
No disc bullets anywhere. Hairline rows for structure, brass dots when the list should read quickly, and a violet em dash where a short list of facts sits under a paragraph. In caps instrument labels the em dash is a separator, not punctuation: 243 °C — CHOSEN.
Fields
Underline only, brass on focus. The label says what it wants in plain words, never a placeholder doing that job.
THE INSTRUMENTS
The one thing that makes the site look engineered. A dashed measuring rail, a brass datum that travels or points, and rules that draw themselves in. Use one per section, never two competing.
Travelling datum
Reads a list top to bottom
Or points at a selected row
When it points, measure the row. Never guess with percentages.
Clauses that build
one rule each
and the payoff in plum.
Grey clauses, brass rules drawing in sequence at .35s apart, then the sentence lands in plum. One per page.
MEASURED VALUE
CHOSEN
Bars read as readings, not charts: pale violet for context, full violet for the chosen one, caps caption underneath.
MOTION
Loops
7 to 9 seconds, cubic-bezier(.4,0,.2,1), always with a rest at each end. Nothing loops faster than a heartbeat.
State changes
Colour .3s ease. Position .45 to .55s cubic-bezier(.4,0,.2,1). Entry .45s fade and 10px rise, cascading .08s apart.
What may move
Instruments, and whatever the reader just chose. Text does not slide in on scroll for decoration.
Always
A prefers-reduced-motion block that stops every loop. The page must read the same standing still.
HOW WE WRITE
Short sentences. No em dashes in prose: a full stop, a comma or a colon instead.
We, not RavoTeq. You, not the client.
Say the plain fact before the benefit.
Name what we will not do. It is what makes the rest believable.
Product names keep their own case: RavoLink, RavoEd, RavoShield. Never in caps mid-sentence.
NOT THIS
Empowering organisations to unlock value
A shared vocabulary and a clear sense of where the line is
Cutting-edge, seamless, end to end
If a line could appear on any competitor's site, it is not ours.
THE ONE RULE
White ground, plum type, one brass accent, violet only where something is running. One family, four weights. If a screen needs a second accent or a fifth weight, the screen is doing too much.
THE TEST
White ground, one brass accent, one instrument, one primary action, one claim per element. If a screen has two of anything on that list, cut one.