Everything you need to represent us accurately — the logo files, the colour and type tokens the site is actually built from, the interface material, and the way we write. Take what you need; ask before you co-brand.
One signal colour, one anchor, and a rotation of accents that never repeat inside a single grid.
The signal and the anchor. Orange is the only colour that ever means “act here”; charcoal carries every dark section and the footer.
The identity colour. Marks, eyebrows, accent rules, and any orange sitting on a dark surface.
The accessible orange for light surfaces — orange text on parchment, and the primary button fill under white labels.
Pressed and hover partner for Burnt Signal, and the bottom stop of the primary button gradient.
Headings on light surfaces, dark section grounds, the footer, and the one-colour mark.
The parchment page shell. Never pure white — the warmth is what keeps the site off-SaaS.
The rotation multi-card sections walk so no two cards in one grid repeat a hue. Decorative by default — none of these is a text colour on parchment.
Warm secondary in gradients, glows, and card accents. Pairs with Brand Orange, never replaces it.
The consulting accent. Light enough that it only ever carries charcoal text, never white.
The infrastructure accent — dot grids, topology lines, and the digital-infrastructure pillar.
The quiet counterweight to orange. Secondary accents and atmospheric washes.
Mint atmosphere: the hero radial, instructional surfaces, and soft tinted fills.
Body copy and structure. Blue Slate is the default text colour of the entire site — not grey, slightly blue.
Default body text, captions, and low-emphasis links.
The Apple-business accent, plus secondary metadata on light surfaces.
Text on dark surfaces and glass fills. Reserve flat white for the material, not the page.
Ratios above are measured, not asserted — they're computed from the hex values at render time.
Brand Orange is the identity colour, but it clears AA only against charcoal. On the parchment shell — and under white button labels — use Burnt Signal instead. Everything marked decorative above is a fill, a rule, a glow, or a card accent; none of it is a text colour on a light surface.
Three faces, six weights between them, and a scale that stays readable from 375px up.
Loaded once, in the root layout, with only the weights the site actually uses. Adding a weight is a payload decision, not a styling one.
700 Bold · 800 ExtraBold
Infrastructure that holds
Every heading, the wordmark, and the mark itself. Only two weights ship — if a design needs a third, it needs a different idea.
400 Regular · 600 SemiBold
We build the systems a business actually runs on, then stay to operate them.
Body copy, buttons, labels, eyebrows, navigation. 400 for prose, 600 for anything that carries an action.
500 Italic only
quietly
One or two words per page, inside a Manrope headline. Loading a second style would cost ~80KB for an effect that works precisely because it is rare.
Five steps carry every page. Each row below is rendered with the exact classes it documents.
Digital infrastructure
Display
Hero headline, one per page
Manrope 800 · clamp 2.5–4.5rem · leading-[1.05] · tracking-tight
How we approach the work
Section
Section headings inside a page
Manrope 800 · 1.5rem → 2.25rem · leading-tight · tracking-tight
Architecture
Card title
Bento cards, list headers
Manrope 700 · 1.125rem · leading-snug
Right-sized systems that match the team and the workload, reviewed every quarter.
Body
Paragraphs and card copy
Inter 400 · 1rem · leading-relaxed
What's inside
Eyebrow
Section labels above a heading
Inter 600 · 0.75rem · uppercase · tracking-[0.18em]
A line wrap must never leave a single word alone on its own line, at any viewport. Headings get text-wrap: balance, body copy gets pretty, and display headings additionally bind their last two words with a non-breaking space so the guarantee doesn’t depend on browser support. The end-to-end suite measures rendered geometry at 375, 768, and 1280px and fails on an orphan.
The mark, the wordmark, and the lockups — with the files, the clear space, and the lines you shouldn't cross.
Every file is vector-first: the letterforms are outlined Manrope ExtraBold, so nothing depends on the font being installed. Reach for the SVG unless the medium can't take one.
Clear space equals the height of the tile, on all four sides. Nothing enters it — not type, not a rule, not another logo.
Below the lockup minimum, drop the wordmark and use the mark alone rather than shrinking the pair.
Fixed-size and single-ink files that are easier to hand over than to re-render.
The interface material itself: buttons, labels, glass surfaces, and the dark anchor — rendered live from production code.
Four variants, one material. The hover is always the same: a 2px lift, a deepening shadow, and a brightening specular edge — never a scale, never a bounce.
One per screen. The conversion action, and nothing else.
High-contrast alternative where orange would fight the artwork.
The companion action beside a primary CTA.
Lowest emphasis — navigation that shouldn't compete.
Three weights, derived from what the site had already converged on. Each is a gradient, a blur, and a layered shadow — tuned in one module, never per component.
light
Inline panels and quiet callouts.
regular
Standard cards over an atmospheric ground.
heavy
Floating tiles, modals, anything that must lift clear.
The two non-white surfaces, plus the accent-tinted material the navigation and section chips use.
Mint
Instructional and “we’ll handle this” states.
Parchment
Summary surfaces that echo the page shell.
Accent panel
Mega-menu panels, tinted to the section’s own colour.
Accent chip
Small solid-ish tiles: menu icons and nav pills.
Eyebrows sit above a heading, never alone. Charcoal sections are the site's punctuation — use them to break a run of light surfaces, not to decorate one.
Inter 600, uppercase, tracked to 0.18em. Coloured with the section’s accent — Burnt Signal on light surfaces so it clears AA.
On charcoal, the full-strength orange clears AA and does the work it was chosen for. Dark glass takes more blur and a deeper drop than light glass to read as a surface at all.
Calm, infrastructural, and always optional. One easing curve carries the whole site.
One easing curve carries every choreographed reveal on the site.
cubic-bezier(0.22, 1, 0.36, 1) — most of the distance is covered immediately, then the element takes its time arriving. That asymmetry is what makes the site feel unhurried without feeling slow.The house curve. Every choreographed reveal, drawer, and headline cascade uses it — fast out of the gate, long calm settle.
Headline words, paragraph fade-ups, badge entrances. Long enough to read as deliberate, short enough not to gate the content.
Cascade interval for a container revealing its children. Anything faster reads as a flicker.
Tab indicators, sliding pills, and quick state swaps that must feel instant.
Hero collages and floating glass — slow, heavy, atmospheric.
The entire hover vocabulary for buttons and cards. Depth deepens with it; nothing scales, nothing bounces.
How the brand sounds when it writes, and the claims it refuses to make.
Each pair is a line, not a slider. The word on the left is the target; the word on the right is the failure mode it turns into when overdone.
The difference is almost always specificity. Vague copy reads as a firm with nothing to point at.
We build the systems a business runs on, then stay to operate them.
We're a leading provider of best-in-class digital transformation solutions.
Say the work. Superlatives are unverifiable, so they read as filler.
Operating in Denver since 1993.
Trusted by hundreds of businesses nationwide.
Every number on this site is derived from a verified fact. If we can't source it, it doesn't appear.
Here's what we'd fix first, and what it costs.
Let's hop on a quick call to explore synergies!
Respect the reader's time and give them something usable before asking for theirs.
This won't work for you. Here's what would.
Absolutely — we can do that.
Being the firm that says no is the whole positioning.
What you can use without asking, what needs a look first, and how to get one.
Two marks share a lockup as equals. Neither one gets to be the host.
Cap heights matched, 1px rule between, equal clear space either side.
Email the draft — a flat export is fine — to hello@theravengroup.com with where it will run and when. We’ll either approve it or tell you exactly what to change.
If something on this page is missing, ambiguous, or doesn’t cover your case, ask rather than guessing — that’s a gap in the kit, and we’d rather fix it.