System overview
- Hero
- type-led · left
- Surface
- dark
- Density
- sparse
- Content width
- 1440px
- Confidence
- medium
- Primary action
- None detected
Color system
Dark surfaces use 7 repeated semantic colors; hierarchy is carried mainly by tonal contrast.
Page canvas
Dominant rendered page background.Surface
Repeated container or section fill; relative occurrence score 112.Surface
Repeated container or section fill; relative occurrence score 100.Surface
Repeated container or section fill; relative occurrence score 55.Primary text
Observed display foreground with 14.8:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 11.3:1.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns Archivo to display, heading text; Inter to body, body-small text; JetBrains Mono to label text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Run them anywhere. Leave them running.
Archivo · 105.6px/92.928px · weight 900 · tracking -5.808px · color rgb(234, 232, 238) · preview scaledGive them somewhere to live.
Archivo · 70px/65.1px · weight 900 · tracking -3.5px · color rgb(234, 232, 238)Herdr isn't an app you keep open. It's a server running in the background, and the terminals live…
Inter · 14.5px/24.65px · weight 400 · tracking 0px · color rgb(205, 204, 210)Three workspaces, four agents, two of them mid-task. Nobody is attached to any of it right now.
Inter · 13.5px/22.95px · weight 400 · tracking 0px · color rgb(176, 175, 182)ink
JetBrains Mono · 10px/16.5px · weight 400 · tracking 1.6px · color rgb(23, 23, 26)Spacing & shape
Spacing
- Base unit
- Irregular / not reliably detected
- Section gap
- 34px
- Container
- 34px
9px14px11px34px13px7px7.5px26px15px6pxShape
Rounded geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Pills
- 50px
- Buttons
- 0px
Inspect borders & shadows · 3
1px solid rgb(53, 53, 61)1px solid rgb(49, 50, 68)rgb(166, 227, 161) 0px 0px 0px 2px insetComponent grammar
Hero
Opening proposition
Type led, left-aligned opening anchored by the primary message.
Inspect 4 properties
- Pattern
- type-led
- Alignment
- left
- Heading
- Archivo · 105.6px / 900
- Media
- minimal
Navigation
Global wayfinding
Static navigation with 10 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #eae8ee
- Border
- none
- Radius
- 0px
- Padding
- 0px 34px 0px 34px
- Type
- Inter · 14.5px / 400
- Position
- static
- Height
- 60px
Badge or tag
Compact status or category label
1 style-matched badge or tag instance was found among 1 candidates; properties describe the dominant observed cluster.
Inspect 7 properties
- Background
- #a6e3a1
- Text
- #11111b
- Border
- none
- Radius
- 0px
- Padding
- 1.6px 7.2px 1.6px 7.2px
- Type
- JetBrains Mono · 12.5856px / 800
- Candidate pool
- 1
Footer
Closing navigation
7 visible actions close the page on a transparent surface.
Inspect 6 properties
- Text
- #b0afb6
- Border
- 1px solid rgb(53, 53, 61)
- Radius
- 0px
- Padding
- 22px 34px 22px 34px
- Type
- JetBrains Mono · 11.5px / 400
- Links
- 7
Layout & narrative
The homepage continues through 5 observed sections, moving from the opening proposition into Give them somewhere to live, Always running. →, You never hunt for the stuck one. →.
- Structure
- Editorial product narrative
- Hero pattern
- Type-led hero: display copy is the primary graphic
- Grid
- 2 columns
- Closing
- Utility footer with 7 actions
Full section sequence · 5
- Give them somewhere to live.
- Always running. →
- You never hunt for the stuck one. →
- All your machines. One Herdr. →
- Same machines. No SSH setup.
Imagery, motion & responsive
Imagery
Typography and surface contrast carry the page; rendered imagery is minimal.
intrinsic sizing · square-edged framesInspect imagery inventory
- Composition
- The first viewport is type-led.
- Inventory
- 0 images/canvas elements and 0 videos across the analyzed homepage.
Motion
7 declared keyframes and 5 active animations were inspectable at capture; observed timing uses 0.12s, 3.6s, 2.2s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- theme-hint-pulse, theme-hint-dot, mock-attach, mock-swap, site-pulse, site-caret, pf-frame
- Durations
- 0.12s, 3.6s, 2.2s, 0.15s, 180ms
- Easings
- ease, ease, ease, ease, ease, ease, ease-in-out, steps(1), linear
- States
- hover, focus, transition-all, active
Mobile
Desktop navigation reduces from 10 visible actions to 4. Hero alignment changes from left to center; mobile heading size is 38px.
Observed multi-column desktop regions collapse to a single-column mobile flow.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #16161b canvas with #eae8ee primary copy before adding secondary surfaces.
- Use Archivo at 105.6px/92.928px, weight 900, for the primary display moment.
- Let the left-aligned type-led hero establish hierarchy before secondary content.
- Typography and surface contrast carry the page; rendered imagery is minimal.
Don’t
- Do not mix in arbitrary radii; 50px is the repeated treatment on pills.
- Do not introduce an accent hue that is absent from the captured palette.
- Do not introduce extra type families beyond Archivo and Inter and JetBrains Mono.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.