Color modes, typography, logo usage, and component patterns that govern every WedgeRock surface.
The Descent is a scroll-linked color engine. Four modes -- DESCENT, DRILL, SUBSEA, SPEC -- each carry a distinct environment and palette. The mode toggle cycles all surfaces simultaneously via CSS custom properties.
Engineering spec sheets and surface-facing documentation. High contrast, maximum legibility.
Scroll journey from surface to abyss. Palette transitions from coastal blues to deep ocean black over ~1.15 viewport heights.
Scroll journey through strata formations. Earth tones step through topsoil, sandstone, shale, reservoir, and pay zone.
Fixed deep-ocean state. No scroll palette transitions -- the page holds at full depth. Used as the default mode on first visit.
BG.1.1 -- Mode cards rendered with forced inline styles. Live pages apply these values via CSS custom properties on :root.
All colors are expressed as CSS custom properties interpolated at runtime by the scroll engine. Never hard-code hex values in component CSS -- use the tokens.
| Token | Role | Spec value | Notes |
|---|---|---|---|
--accent | Brand gold | #FFC400 | Constant -- never interpolated |
--accent-ink | Text on accent | #0E1F66 | Navy on gold |
--bg-deep | Page background | #F5F7FB | Interpolated by engine |
--bg-base | Bars and bands | #EDF0F6 | Interpolated by engine |
--surface-2 | Cards and panels | #E9EDF5 | Interpolated by engine |
--text-primary | Headlines, labels | #0E1F66 | Interpolated by engine |
--text-secondary | Body, captions | #55617E | Interpolated by engine |
--line | Borders | rgba(14,31,102,.18) | Derived from tx channel |
--nav-bg | Nav backdrop | rgba(bg-deep,.92) | Derived |
BG.2.1 -- Token values are always the Spec (surface) state. The scroll engine overwrites them at runtime via element.style.setProperty().
Three families, each with a strict role. Never swap them -- the roles encode information hierarchy.
Every engineering number, measurement, or quantity uses IBM Plex Mono. No exceptions. Inter numbers in a spec context are wrong.
Archivo is reserved for H1, H2, and hero text. It does not appear in body copy, labels, or UI elements.
Headlines use clamp(min, vw, max) for fluid type. Never set a fixed px value on H1 or H2 without a clamp guard.
Display: -0.015em. Body: 0. Mono labels: +0.08em to +0.14em. Uppercase mono: +0.10em minimum.
BG.3.1 -- Google Fonts URL: Archivo wght 600-800, Inter wght 400-600, IBM Plex Mono wght 400-500. All loaded in the <head> preconnect block.
Three logo states serve three surface conditions. Each is a separate <img> element; CSS visibility rules swap between them based on mode and scroll class.
Always include all three logo images (logo-light, logo-dark, logo-drill) in nav and footer. CSS toggles visibility -- never JS.
Nav logo renders at 38px height. Footer logo renders at 32px. Width is always auto to preserve aspect ratio.
When Drill mode is deep (past waterline), the standard dark invert applies. Drill surface chrome uses the dedicated logo-drill asset.
The logo mark is self-contained. Never place a text "WedgeRock" wordmark adjacent to or below the SVG mark.
All components use CSS custom properties. They adapt automatically to the active mode -- no component-level dark/light variants.
Introductory paragraph in Inter 16px using --text-secondary. Maximum 62 characters wide. Ends without a period when it leads into a grid or table.
Rated to 1,200,000 Nm. Sealed to IP68 for subsea and buried service.
High-ratio compact actuation for multi-turn rising stem valves in demanding process environments.
Fail-safe actuation to a defined position on loss of supply pressure or power.
| Model | Series | Max Torque | Temp Range | IP Rating | SIL |
|---|---|---|---|---|---|
| RW-1200 | Worm Gear | 1,200,000 Nm | -60 C / +200 C | IP68 | SIL 3 |
| RP-400 | Planetary | 400,000 Nm | -40 C / +180 C | IP66 | SIL 2 |
| RS-250 | Spring Return | 250,000 Nm | -20 C / +160 C | IP65 | SIL 3 |
The depth ribbon is a fixed vertical gauge on the right edge. In descent mode it tracks scroll position in meters (0 -- 3,000 m). In drill mode it reads feet (0 -- 12,000 ft). It is hidden below 768px viewport width.
WedgeRock copy reads like a specification sheet, not a marketing deck. Four rules govern every sentence that ships with the product.
Lead with the engineering claim. Follow with the spec that proves it. Never open with context-setting prose.
Wrong: "With decades of experience, WedgeRock..."
Right: "Rated to 1,200,000 Nm. Sealed to IP68."
Every measurement, rating, temperature, or quantity is expressed with the IBM Plex Mono font -- in the HTML as a <span class="mono"> or as a table cell with class="num".
-60 C to +200 C 3,000 m SIL 3 IP68
Avoid "best," "leading," "world-class," and "cutting-edge." These are opinion. Replace every instance with the specific number or qualification that earns the claim.
Wrong: "Industry-leading torque."
Right: "1,200,000 Nm rated output."
Copy is written in the present tense with active voice. The product does the work -- not "is designed to" or "can be used for."
Wrong: "Can be used in subsea applications."
Right: "Operates to 3,000 m water depth."
BG.6.1 -- These rules apply to all surface copy: product pages, news, datasheets, and UI labels. Section codes (BG.1, APP / RW-SERIES) are always uppercase mono.