SSTR
Stark industrial engineering meets precision Swiss data design. Massive uppercase grotesque headings, architectural dot-matrix grids, and photorealistic CAD renders convey high-rigor mechanical science, punctuated by high-visibility safety orange callouts.
Visit siteColour
Typefaces
- Display
- Abc Monument Grotesk
- Body
- Abc Monument Grotesk
- Mono
- ABC Monument Grotesk Cyrillic Mono Variable
- Source
- self_hosted
- Scale
- 10 · 12 · 14 · 16 · 20 · 24
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 0px
Capture
- Category
- tools
- Sections
- 8
- Captured
- 2026-08-29
- Rhythm
- dark x3 → light x3 → dark x2
Type rules
- headlines and section tags set in all-caps grotesque with tight tracking
- technical specs and metric labels prefixed with brackets or double slashes in monospaced type
- body text runs at approximately 78 characters per line
Colour rules
- deep charcoal and stark cool-white define alternating macro zones
- vibrant safety orange reserved exclusively for interactive CTA blocks and live metric indicators
- hardware renders rendered in neutral metallic tones against strict monochrome grids
Voice rules
- lead with quantifiable engineering metrics and percentages
- use industry-standard downhole drilling terminology without oversimplification
Holds it together
- every product section begins with a double slash prefix and a numbered specification list
- isolate primary 3D hardware visualizations on technical hairline-bordered cards
- use high-contrast orange buttons for actionable transitions against monochrome surfaces
Contrast
Type, measured
- Body
- 14px / 1.43
- Measure
- 78 characters
- Display
- 96px / 1
- Tracking
- -0.035em display
- Scale ratio
- 1.62
Voice
- Tone
- technical, declarative, authoritative
- Sentences
- short
- Person
- first
- Vocabulary
- specialized
- Calls to action
- view, learn, contact
Built with
- Builder
- —
- Framework
- —
- Motion
- gsap, barba
- WebGL
- yes
- Nav
- sticky_top_bar, 15 items, sticky
- Length
- 15.7 screens
Sections in page order
3 marked strong · 8- 00
hero
Austere industrial engineering presentation with strict Swiss gridlines, heavy grotesque typography, and wireframe technical motifs.
- Mood
- clinical + bold
- Layout
- 11 col · stacked · balanced
- 01
stats
StrongAn austere, precision-engineered data section with technical plot charts, monospaced metrics, and fine wireframe grid lines on deep charcoal.
- Mood
- clinical + raw
- Layout
- 12 col · grid · airy
- 02
feature
StrongTechnical engineering deep-dive with precise wireframe schematics, dark data overlays, and detailed 3D drilling hardware visualization.
- Mood
- clinical + bold
- Layout
- 6 col · grid · balanced
- 03
showcase
Technical industrial product showcase with precise grid dividers, heavy 3D mechanical renderings, and high-contrast Swiss typography.
- Mood
- clinical + raw
- Layout
- 12 col · grid · dense
- 04
showcase
StrongHigh-precision industrial engineering showcase with strict technical typography, numbered mechanical spec lists, and photorealistic 3D hardware components.
- Mood
- clinical + raw
- Layout
- 14 col · stacked · dense
- 05
showcase
Stark, precision-engineered case study grid with minimalist typography, fine structural line work, and high-impact orange callout buttons.
- Mood
- clinical + raw
- Layout
- 2 col · grid · balanced
- 06
showcase
Dark, clinical proof section combining a quiet row of industrial logo tiles with a floating technical drilling case study card.
- Mood
- clinical + quiet
- Layout
- 15 col · asymmetric · airy
- 07
cta
A solemn, clinical dark lead-capture section pairing a black-and-white portrait with a precise engineering inquiry form.
- Mood
- clinical + quiet
- Layout
- 13 col · split · balanced
