Refto
Cradle

Cradle

Leverage AI to generate protein candidates and improve their properties. More breakthroughs in fewer experiments — guided by your own experimental data.

Scrolling AnimationSaasCustom CursorBento GridAiScienceBig Background ImageClean
4.0
2
Visits
Visit

Categories

SaasAiScience

Available Pages

Home

Version History

Design Analysis

Cradle Home design analysis

Start with technical confidence: dark hero, strong software proof, and one bright action color. Resolve quickly into clean white sections so the brand still feels usable and scientific. Let the product window do the heav...

Key Takeaways

  • Start with technical confidence: dark hero, strong software proof, and one bright action color.
  • Resolve quickly into clean white sections so the brand still feels usable and scientific.
  • Let the product window do the heavy lifting in the hero.
  • Use a large software window as the main hero object.
  • Support with clean lab photography or restrained scientific motifs.
  • Keep white proof sections uncluttered and operational.

Overview

  • Start with technical confidence: dark hero, strong software proof, and one bright action color.
  • Resolve quickly into clean white sections so the brand still feels usable and scientific.
  • Let the product window do the heavy lifting in the hero.

Image Direction

  • Use a large software window as the main hero object.
  • Support with clean lab photography or restrained scientific motifs.
  • Keep white proof sections uncluttered and operational.

Colors

  • Navy and electric blue should establish the technical tone.
  • Use white generously after the hero to keep the brand approachable.
  • Reserve green for small scientific support only.

Typography

  • Use a large modern sans with crisp spacing.
  • Avoid ornamental scientific typography.
  • Keep supporting text straightforward and product-focused.

Design.md

System Overview

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

Dark Scientific Product Window

A scientific SaaS system that pairs a dark navy hero, electric blue action, white product-window cards, and soft lab imagery for technical confidence.

Scientific, bright, and technically confident.

Primary mode: darkAI protein engineering softwareui-rich

Theme

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

Visual atmosphere
Summary
Scientific, bright, and technically confident.
Density
4
Variance
3
Motion
2
Signals
dark navy hero · electric blue CTA · white product windows · clean lab imagery

Colors

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

Palette colors
Navy Core
#050A18
Electric Blue
#224EEE
Clean White
#FFFFFF
Cloud Surface
#F4F7FF
Lab Green
#84D76B
Usage rules
Use blue as the active decision color.
Keep the rest of the system crisp and light rather than noisy.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.25rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
8px
card
17px
panel
20px
full
999px

Typography Families

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

Display
Rethink Sans
modern scientific sans
Body
Rethink Sans
clean technical sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.9rem, 5.4vw, 4.8rem)/—
Display
H2
clamp(2rem, 3.8vw, 3rem)/—
H2
Body
1rem/—
Body
Label
0.86rem/—
Label

Typography Rules

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

Rules
Use large modern sans headlines and clear product-friendly copy. · Do not overcomplicate the supporting UI voice.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
170ms-230ms
Easing
cubic-bezier(.25,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration170ms-230ms
easingcubic-bezier(.25,0,.2,1)

Layout Principles

Start in a dark scientific hero and resolve into bright proof sections.
Use large product windows and clean card groupings rather than dense labs of content.

Component Preview

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

Buttons primary
Base Attributes
Background
#224EEE
Text
#FFFFFF
Border
none
Radius
8px
Padding
0.75rem 1rem
Min height
36px
Shadow
none
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#050A18
Border
1px solid rgba(5,10,24,0.08)
Radius
8px
Padding
0.75rem 1rem
Min height
36px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0A1124
Border
1px solid rgba(10,17,36,0.08)
Radius
17px
Padding
1.25rem
Shadow
none
Cards dark
Feature Card
Component preview content
Base Attributes
Background
#0D1222
Text
#FFFFFF
Border
none
Radius
17px
Padding
1.25rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#C8D4FF
Height
36px
Active text
#FFFFFF
Item padding
0.35rem 0.65rem
Item radius
8px

Hero stage

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

Summary
A large product window floats over a dark navy field with one bright action pulse.

Image direction

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

Role
supportive
Media types
  • -
    product window
  • -
    lab photography
  • -
    scientific bubble illustration
Subject patterns
  • -
    one large software window
  • -
    one lab photo or scientific motif per chapter
Composition logic
  • -
    Lead with software proof.
  • -
    Use scientific imagery to support, not replace, product clarity.
Treatment rules
  • -
    Keep UI crisp and bright.
  • -
    Use lab imagery in a clean editorial frame rather than as raw stock.
Generation cues
  • -
    Prompt for dark scientific hero, bright software window, clean white proof sections, and restrained blue accent.
Avoid
  • -
    No neon gaming biotech.
  • -
    No overly decorative molecular rendering as the main content surface.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No fuzzy biotech glow overload.
  • -
    No soft-beige lifestyle palette.
  • -
    No gratuitous enterprise table density in the hero.