Better Design
Back to library

TareBio

Healthcare · YC Summer 2026

Visit website

Automated design study · full homepage

Dark, left-aligned type-led product story with rounded geometry and restrained visual proof.

TareBio | Vaccines for any cancer or infection opens with “TareBio” in a left-aligned type-led hero.
Evidence & method · 1 capture note
Source
https://tarebio.com/
Captured
2026-09-08
Extractor
2.5.0
Evidence
hero, mobile
  • Automated interpretation; editorial review is pending.
  • The hero heading was read from semantic heading markup.
  • No same-origin breakpoint declarations were inspectable; mobile behavior was measured directly.
  • 2 stylesheets were inspectable; 0 cross-origin stylesheets were unavailable to rule inspection.
  • Computed styles describe the captured render; source design tokens and proprietary font files were not copied.

Captured screens

2026-09-08 · source viewport 1600 × 1000

TareBio hero homepage design evidence. Visible section: TareBio
Hero1600 × 1000
TareBio mobile homepage design evidence. Visible section: TareBio
Mobile390 × 844

System overview

Hero
type-led · left
Surface
dark
Density
sparse
Content width
1152px
Confidence
low
Primary action
None detected

Color system

Dark surfaces use 3 repeated semantic colors; hierarchy is carried mainly by tonal contrast.

Canvas

Page canvas

Dominant rendered page background.
Primary text

Primary text

Observed display foreground with 12.9:1 contrast against the captured canvas.
Secondary text

Secondary text

Observed reading foreground; measured canvas-reference contrast is 4.9:1.

Typography

The observed type system assigns Newsreader Variable to display, body text; Inter Variable to label text.

Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.
display

TareBio

Newsreader Variable · 72px/72px · weight 550 · tracking -1.44px · color rgb(239, 237, 251)
body

Vaccines for any cancer or infection.

Newsreader Variable · 28px/36.4px · weight 420 · tracking -0.28px · color rgb(237, 109, 45)
label

contact@tarebio.com

Inter Variable · 17px/normal · weight 400 · tracking 0px · color rgb(157, 153, 196)

Spacing & shape

Spacing

Base unit
4px
Section gap
48px
Container
20px
48px80px20px36px

Shape

Rounded geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.

Containers
50px
Inspect borders & shadows · 2
Borders
No repeated border treatment detected
Shadows
None observed

Component grammar

Token-based examples, not original components. Source fonts may fall back locally.

Hero

Opening proposition

1 observed

Type led, left-aligned opening anchored by the primary message.

Inspect 4 properties
Pattern
type-led
Alignment
left
Heading
Newsreader Variable · 72px / 550
Media
minimal

Layout & narrative

The experience remains a single composed scene rather than a multi-section narrative.

Structure
Single-scene landing
Hero pattern
Type-led hero: display copy is the primary graphic
Grid
Single-column flow
Closing
No footer detected

Imagery, motion & responsive

Imagery

Typography and surface contrast carry the page; rendered imagery is minimal.

intrinsic sizing · square-edged frames
Inspect imagery inventory
Composition
The first viewport is type-led.
Inventory
0 images/canvas elements and 0 videos across the analyzed homepage.

Motion

3 declared keyframes and 5 active animations were inspectable at capture; observed timing uses 22s, 28s, 0.6s.

Reduced-motion rules detected
Inspect motion inventory
Libraries
CSS / browser-native or bundled source not identifiable
Keyframes
drift-a, drift-b, rise
Durations
22s, 28s, 0.6s, 22000ms, 28000ms, 600ms
Easings
ease-in-out, ease, ease, cubic-bezier(0.2, 0.7, 0.3, 1), linear
States
focus, hover

Mobile

The same 0 visible navigation actions remain at mobile width. Hero alignment changes from left to center; mobile heading size is 48px.

Primary content reads as a single-column mobile flow.
Inspect responsive test
Viewport
390 × 844
Overflow
No horizontal overflow detected

Reproduction guidance

Do

  • Pair the observed #27243d canvas with #efedfb primary copy before adding secondary surfaces.
  • Use Newsreader Variable at 72px/72px, weight 550, 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 containers.
  • Do not introduce an accent hue that is absent from the captured palette.
  • Do not introduce extra type families beyond Newsreader Variable and Inter Variable.
  • Do not add card shadows; the source separates content without repeated elevation.