System overview
- Hero
- type-led · left
- Surface
- light
- Density
- sparse
- Content width
- 1600px full-width canvas
- Confidence
- medium
- Primary action
- Get in touch
Color system
Light surfaces use 8 repeated semantic colors; the primary action carries the strongest interactive emphasis.
Page canvas
Dominant rendered page background.Surface
Repeated container or section fill; relative occurrence score 39.Surface
Repeated container or section fill; relative occurrence score 6.Surface
Repeated container or section fill; relative occurrence score 1.Primary text
Observed display foreground with 9.2:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 16.9:1.Primary action
Fill used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns IBM Plex Sans to display, heading, label text; Manrope to body text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Scaling intelligence with light.
IBM Plex Sans · 72px/74.88px · weight 600 · tracking -1.44px · color rgb(31, 77, 58)A new backbone for AI and Quantum.
IBM Plex Sans · 36px/39.6px · weight 600 · tracking -0.72px · color rgb(31, 77, 58)Dipole Labs was founded in 2026 and is backed by Y Combinator, with headquarters in Boston and a…
Manrope · 18px/29.25px · weight 400 · tracking 0px · color rgb(15, 27, 22)Home
IBM Plex Sans · 14px/20px · weight 400 · tracking 1.12px · color rgb(31, 77, 58)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 32px
- Container
- 32px
32px24px40px14px28px16px64px12px20px48pxShape
Sharp geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Media
- 0px
- Buttons
- 0px
Inspect borders & shadows · 2
1px solid rgb(226, 232, 227)None observedComponent grammar
Hero
Opening proposition
Type led, left-aligned opening anchored by “Get in touch”.
Inspect 4 properties
- Pattern
- type-led
- Alignment
- left
- Heading
- IBM Plex Sans · 72px / 600
- Media
- image-led
Navigation
Global wayfinding
Persistent navigation with 5 visible actions in the desktop opening.
Inspect 8 properties
- Background
- rgba(250, 250, 247, 0.851)
- Text
- #0f1b16
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Manrope · 16px / 400
- Position
- fixed
- Height
- 81px
Primary action
Conversion
“Get in touch” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #1f4d3a
- Text
- #fafaf7
- Border
- none
- Radius
- 0px
- Padding
- 14px 28px 14px 28px
- Type
- IBM Plex Sans · 14px / 600
Media frame
Visual proof
2 style-matched media elements were found among 3 rendered candidates; fill fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- fill
- Ratios
- 4.74, 1.31
- Radius
- 0px
- Candidate pool
- 3
Footer
Closing navigation
5 visible actions close the page on a #fafaf7 surface.
Inspect 7 properties
- Background
- #fafaf7
- Text
- #0f1b16
- Border
- 1px solid rgb(226, 232, 227)
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Manrope · 16px / 400
- Links
- 5
Layout & narrative
The homepage continues through 2 observed sections, moving from the opening proposition into A new backbone for AI and Quantum, About.
- Structure
- Editorial product narrative
- Hero pattern
- Type-led hero: display copy is the primary graphic
- Grid
- 12 columns
- Closing
- Utility footer with 5 actions
Full section sequence · 2
- A new backbone for AI and Quantum.
- About
Imagery, motion & responsive
Imagery
Image led media acts as the page’s primary visual proof rather than decoration.
fill fitting · square-edged framesInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 3 images/canvas elements and 0 videos across the analyzed homepage.
Motion
12 declared keyframes and 0 active animations were inspectable at capture; observed timing uses 0.2s, 0.3s, 0.4s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- pulse, enter, exit, accordion-down, accordion-up, caret-blink, swipe-out-left, swipe-out-right, swipe-out-up, swipe-out-down, sonner-fade-in, sonner-fade-out
- Durations
- 0.2s, 0.3s, 0.4s, 1.25s, 0.7s, 1s
- Easings
- ease, ease, ease, ease-out, linear, ease, ease, ease, ease, ease, ease, ease
- States
- focus, transition-all, hover, disabled, active
Mobile
Desktop navigation reduces from 5 visible actions to 2. Hero alignment changes from left to center; mobile heading size is 36px.
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 #fafaf7 canvas with #1f4d3a primary copy before adding secondary surfaces.
- Use IBM Plex Sans at 72px/74.88px, weight 600, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Get in touch” within the left-aligned type-led hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 0px is the repeated treatment on media.
- Do not reuse the #1f4d3a action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond IBM Plex Sans and Manrope.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.