A New REV Era — the brand system behind revexploration.com

A dark, mineral palette with a single sky-blue accent

The brand is dark-only — there is no light theme. Pages sit on a vertical gradient from near-black #080605 at the top of the hero into warm dark-earth #2A2624 at the foot of the page, over a base of #353534. All surfaces are translucent panels over this ground. One accent — sky blue #9DCEFF — carries every call-to-action, focus state, and highlight. Click any hex to copy it.

Ground

Text & strokes

Accent & semantic

Surfaces (translucent)

Logo-only colors

Two colors live inside the full-colour logo artwork and are reserved for the mark itself — they are not used as UI colors on the site.

One family, three weights, pixel-precise sizes

The entire site is set in Proxima Nova, served via Adobe Fonts (Typekit kit cud8jzw). Fallback stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif. This document renders in the fallback stack — mock-ups should use licensed Proxima Nova.

Only three weights are used, and almost nothing is set at regular weight: Extrabold 800 for headings, card titles and CTA labels; Bold 700 for body emphasis, labels, footer and most running UI text; Medium 500 for form input text. Long-form press-release body copy is the only regular-weight text, set with relaxed leading.

Rules of use

• Sizes are specified in exact pixels (14px is the workhorse body/UI size), stepping up at tablet (768px) and desktop (1024px) breakpoints.
• All-caps is a brand signature: dates, buttons, form placeholders, footer contact blocks and legal links are uppercase bold with slight letter-spacing.
• The two-line headline pattern — first line white, second line Sky Blue — is the standard way to add emphasis without introducing new colors.
• Numbers that align in columns (prices, volumes) use tabular figures.

One mark, five color variants

The mark is the REV letterform with a stars-and-stripes "V", set above an EXPLORATION wordmark — the X in EXPLORATION is the accent letter (red in the full-colour version). It ships as SVG and 1×/2×/4× PNG in five color treatments, plus stock-symbol lockups for investor materials. Usage notes below are from the official logo guide.

REVX - White.svgAll-white logo for dark backgrounds — the most-used variant, including video production. This is the site's primary header mark (105×32 → 140×42px).

REVX - #C7C7C7.svgLight grey #C7C7C7 — the "Brand Grey" of REVX. Used on the website and decks, often on darker grey backgrounds. The site footer uses this variant.

REVX - Black.svgAll-black logo for light backgrounds, or whenever a silhouette is needed.

REVX - #273446.svgSolid Logo Navy #273446 for a plain letterhead logo on white or light backgrounds. Same blue as the full-colour logo.

REVX - Full Colour.svgLetterhead logo for mainly white backgrounds (documents). Navy mark, red-striped flag, red X in EXPLORATION.

Stock-symbol lockups

White-only lockups pairing the mark with the tickers, for investor decks, video end-cards and the investors site.

REVX - White - With Stock Symbols under.svgFull mark with TSXV : REVX | OTC : REVFF beneath the wordmark.

small REVX - With Stock Symbols large.svgReduced mark, enlarged tickers — for contexts where the tickers are the message.

REV (only) - White - With Stock Symbols.svgREV mark alone with stacked tickers right of a vertical divider — compact horizontal lockup.

• Standalone ticker treatments also exist (Stock Symbols Alone.svg, stacked and left-aligned stacked variants) for use without the mark.
• Use only these supplied color treatments — never recolor the mark, and never place the white or Brand Grey versions on a light ground (or black/navy/full-colour on a dark one).
• On the website the mark always links home and is loaded with priority — it should be the first thing painted.

Glass panels on dark ground

Every interactive surface follows the same recipe: a translucent fill, a 1px Stroke Grey border, a 10–15px radius, and a color-only transition on hover. These specimens are live — hover and click them.

Buttons

Glass buttons compress to scale(0.95) on press and carry a subtle backdrop blur. Buttons go full-width on mobile, fixed-width (240–330px) on desktop.

Cards

Form inputs

Card Glass fill, Stroke Grey border, white Medium 500 text at 13–14px, uppercase Silver placeholder, 48–59px tall. Focus replaces the border with Sky Blue — no outline, no glow. Success and error messages are 13–14px Medium: success in Sky Blue, errors in a soft red.

Stock data

Positive change renders in Market Green #169001; negative and neutral render in Silver #C7C7C7. Red is never used for market data. The ticker refreshes every 30s in market hours, 5min after hours, and lives in the sticky header (mini variant on mobile, full on tablet+).

Header & footer

• Header: sticky, Header Blur fill (rgba(62,62,62,0.33) + 12px backdrop blur), 2px Stroke Grey bottom border. White logo left, stock ticker right.
• Footer: grey logo, all text Silver Bold at clamp(14px, 1.2vw, 18px), contact blocks in UPPERCASE, a 1px #414141 divider above a 12px legal row (copyright left, PRIVACY POLICY / TERMS OF USE / DISCLAIMER right, hover to white).

Soft radii, wide canvas, overlapping bands

Corner radius scale

The common responsive pattern is 10px on mobile stepping to 15px or 20px on desktop. Sharp corners are never used on interactive surfaces.

Layout system

Sections overlap rather than stack: the featured video panel pulls up into the hero by ~256px, sitting above the fading photograph. This layering — photography, gradient, glass panel — is the signature page architecture.

Quiet, staggered, and brief

Motion is limited to three moves. Nothing bounces, nothing parallaxes.

All entrance animation must be disabled under prefers-reduced-motion (content shown immediately at full opacity).

Dark prairie photography that dissolves into the page

• Hero imagery is dark, wide landscape photography of the Northern Great Plains — horizons, night skies, drilling infrastructure — never bright daylight stock imagery.
• Photographs are never hard-cropped at the bottom: a CSS mask fades the image to transparent over its last 30% (linear-gradient(to bottom, black 70%, transparent 100%)) so it dissolves into the Hero Black → Earth Brown page gradient.
• Video is self-hosted MP4 or a streaming provider (Mux / Cloudflare / Vimeo Pro) presented in a 20px-radius panel with an uppercase caption — never YouTube embeds.
• On mobile, hero art re-anchors toward the image's focal point (background-position 24–40% top) rather than center-cropping.

Confident, plainspoken, investor-grade

• Short declaratives. "A New REV Era." "American energy, born beneath us." Headlines are statements, not questions.
• Uppercase for action and identity. Buttons ("READ MORE", "SUBSCRIBE"), contact details, tickers and legal links are set in caps. Running copy is sentence case.
• Specific over promotional. Helium, natural hydrogen, the Northern Great Plains, TSXV: REVX — real nouns and numbers over adjectives. This is a public company site; every claim must hold up to a regulator.
• Plain promises. "No spam, only notifications about news, updates and announcements. You can unsubscribe at any time."

For designers working against the build

• The site is Next.js + Tailwind; colors and sizes above are used as exact values in the code, so mock-ups using these tokens translate 1:1.
• Design mobile-first at 320px minimum, with the md (768px) and lg (1024px) steps shown in the type and radius scales.
• Content (press releases, documents, hero copy) is editor-managed in Sanity; layouts are fixed in code. Design templates, not one-off pages.
• No new colors, no second accent, no light theme, no YouTube embeds, no red market data.