Refto
Integrated Biosciences

Integrated Biosciences

Aging is an intrinsically complex systems biology challenge. Our Integrated Platform is purpose-built to unravel its intricate networks.

InteractiveScrolling AnimationLarge TypeParallaxHealthTechnologyAnimationBig Background Video
5.0
10
Visits
Visit

Design Analysis

Integrated Biosciences Home design analysis

Build the first impression around one immersive rounded hero frame with biomorphic color motion frozen in a settled state. Let the rest of the system oscillate between pale laboratory calm and dark utility concentration....

Key Takeaways

  • Build the first impression around one immersive rounded hero frame with biomorphic color motion frozen in a settled state.
  • Let the rest of the system oscillate between pale laboratory calm and dark utility concentration.
  • Use chartreuse only as a spark for direction, arrows, or key action handoffs.
  • Use biomorphic, glassy, out-of-focus gradient imagery that feels cellular or material rather than illustrative.
  • Pair those fields with clean scientific typography and generous negative space.
  • Keep the base canvas clinical and pale outside the hero.

Overview

  • Build the first impression around one immersive rounded hero frame with biomorphic color motion frozen in a settled state.
  • Let the rest of the system oscillate between pale laboratory calm and dark utility concentration.
  • Use chartreuse only as a spark for direction, arrows, or key action handoffs.

Image Direction

  • Use biomorphic, glassy, out-of-focus gradient imagery that feels cellular or material rather than illustrative.
  • Pair those fields with clean scientific typography and generous negative space.

Colors

  • Keep the base canvas clinical and pale outside the hero.
  • Use charcoal for the main utility voice and chartreuse for precise activation moments.
  • Treat green and amber as atmospheric image colors, not UI fill defaults.

Typography

  • Use one scientific grotesk across display and body to keep the tone controlled.
  • Reserve mono for tiny utility moments or measured CTA labels.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Biologic Aurora Field

A biotechnology marketing language built from blurred aurora biomorphs, pale lab canvases, charcoal utility bars, chartreuse CTA sparks, and broad rounded frames.

Scientific, atmospheric, polished, and quietly speculative.

Primary mode: lightbiotechnology platform marketingcontent-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Scientific, atmospheric, polished, and quietly speculative.
Density
5
Variance
7
Motion
4
Signals
blurred green biomorphs · charcoal utility modules · chartreuse CTA sparks

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Lab Canvas
#F7F7F5
Biology Charcoal
#222F30
Sage Slab
#C6C7B8
Chartreuse Spark
#D6F57D
Aurora Green
#7DA38B
Amber Glint
#B78B63
Usage rules
Keep the base pale and clinical outside the immersive hero.
Use chartreuse as a controlled ignition point, never as the page default.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 7rem)
panel_padding
clamp(1.25rem, 3vw, 2rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
12px
md
18px
lg
24px
xl
32px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Aspekta
clean scientific grotesk with broad headlines
Body
Aspekta
technical but humane body voice
Accent
Aspekta
utility navigation and metadata voice
Mono
IBM Plex Mono
clinical micro-label support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.4rem, 7vw, 6.2rem)/—
Display
H2
clamp(2rem, 4vw, 3.2rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.7rem)/—
H3
Body
1rem/—
Body
Label
0.85rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep scientific headlines broad and calm rather than aggressive. · Use mono only for very small utility labels or measured CTA support.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-420ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration220ms-420ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Open with one immersive rounded stage before dropping into calmer slabs.
Use dark utility shells to concentrate action inside otherwise atmospheric sections.
Let pale laboratory modules restore legibility after image-heavy moments.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Stages aurora frame
Base Attributes
Background
#4F6C5C
Text
#FFFFFF
Border
none
Radius
32px
Padding
clamp(1.5rem, 4vw, 2rem)
Shadow
none
Stages pale slab
Base Attributes
Background
#F7F7F5
Text
#222F30
Border
1px solid rgba(34, 47, 48, 0.08)
Radius
24px
Padding
1.5rem
Shadow
none
Actions primary bar
Base Attributes
Background
#222F30
Text
#FFFFFF
Border
none
Radius
18px
Padding
0.9rem 1.2rem
Actions spark square
Base Attributes
Background
#D6F57D
Text
#222F30
Border
none
Radius
14px
Padding
0.9rem
Navigation utility shell
OverviewFeaturesDocs
Base Attributes
Background
rgba(247, 247, 245, 0.92)
Text
#222F30
Border
1px solid rgba(34, 47, 48, 0.08)
Radius
18px
Padding
0.4rem

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
load-bearing
Media types
  • -
    atmospheric biomorph
  • -
    scientific gradient field
  • -
    soft laboratory texture
Subject patterns
  • -
    blurred glass-like arcs
  • -
    green-to-charcoal fades
  • -
    warm amber light leaks
Composition logic
  • -
    Dedicate the hero to one large field image.
  • -
    Use image crops that feel cellular or material, not figurative.
Treatment rules
  • -
    Stay soft, blurred, and premium rather than literal.
  • -
    Keep text areas clear enough to support oversized white headlines.
Generation cues
  • -
    Ask for biomorphic gradient fields with glassy edges and scientific calm.
  • -
    Describe sage, charcoal, and amber transitions with controlled bloom.
Avoid
  • -
    No literal microscope montages.
  • -
    No neon sci-fi hologram overload.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not flatten the system into generic white biotech cards.
  • -
    Do not turn chartreuse into a dominant wash.
  • -
    Do not swap the soft biomorphic imagery for literal molecular clip art.