Refto
Coding Bio

Coding Bio

Coding Bio unites a high throughput wet lab and ML platform to screen, build, and deliver fully-assembled modular therapies like CARs and BiTEs in only months.

Large TypeAgencyGradientHealthSingle PageClean
3.0
3
Visits
Visit

Categories

AgencyHealth

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Coding Bio Home design analysis

Clinical Modular Lattice is a precise scientific system that keeps the UI almost invisible while diagrams and statements carry the novelty. It should feel clean, serious, and quietly forward-looking rather than futuristi...

Key Takeaways

  • Primary ( 010A21): Main type, lines, and structural emphasis.
  • Secondary ( 6D7483): Supporting paragraphs and secondary nav tone.
  • Tertiary ( FFF35A): CTA fill and geometric highlight cells.
  • Use the display grotesk for large conceptual statements only.
  • Keep body copy calm and evenly spaced.
  • Avoid ornamental type choices that would dilute the scientific tone.

Overview

Clinical Modular Lattice is a precise scientific system that keeps the UI almost invisible while diagrams and statements carry the novelty. It should feel clean, serious, and quietly forward-looking rather than futuristic or overproduced.

Image Direction

Use modular geometric fields and straightforward portraiture. Diagrams should stay crisp and architectural, while photography should feel documentary and high trust.

Colors

  • Primary ( 010A21): Main type, lines, and structural emphasis.
  • Secondary ( 6D7483): Supporting paragraphs and secondary nav tone.
  • Tertiary ( FFF35A): CTA fill and geometric highlight cells.

Typography

  • Use the display grotesk for large conceptual statements only.
  • Keep body copy calm and evenly spaced.
  • Avoid ornamental type choices that would dilute the scientific tone.

Design.md

System Overview

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

Clinical Modular Lattice

A scientific landing language that pairs crisp navy typography, bright signal yellow, and modular lattice illustration.

Precise, scientific, and optimistic.

Primary mode: lightbiotech company marketingui-rich

Theme

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

Visual atmosphere
Summary
Precise, scientific, and optimistic.
Density
3
Variance
3
Motion
3
Signals
white lab field · deep navy type · isometric lattice pattern · signal-yellow cells

Colors

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

Palette colors
Lab White
#FFFFFF
Gene Navy
#010A21
Signal Yellow
#FFF35A
Soft Slate
#6D7483
Alert Red
#E31700
Usage rules
Keep most surfaces white.
Use yellow as a sharp but limited signal.
Reserve red for rare alert-level detail only.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
88px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
0px
card
0px
portrait
0px

Typography Families

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

Display
Gilroy
clean rounded grotesk
Body
Inter
clinical support text

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
3.75rem/—
Display
H2
2rem/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use display type with generous tracking compression only in major hero lines. · Keep body text measured and airy.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-300ms
Easing
cubic-bezier(.2,.75,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration220ms-300ms
easingcubic-bezier(.2,.75,.2,1)

Layout Principles

Use one large diagram or lattice field beside each major statement.
Keep sections clean and horizontal, not stacked into startup cards.
Let portraits and diagrams occupy full rectangles with minimal chrome.

Component Preview

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

Buttons primary
Base Attributes
Background
#FFF35A
Text
#010A21
Border
1px solid #FFF35A
Radius
{tokens.radii.control}->0px
Padding
14px 20px
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#010A21
Border
1px solid #010A21
Radius
{tokens.radii.control}->0px
Padding
14px 20px
Min height
48px
Shadow
none
Typography
label
Cards portrait
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#010A21
Border
0px solid transparent
Radius
{tokens.radii.portrait}->0px
Padding
0px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#6D7483
Height
68px
Active text
#010A21
Item padding
0px
Item radius
{tokens.radii.control}->0px

Scroll motion

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

Role
supportive
Scroll driver
native
Cadence
measured
Patterns
  • -
    section reveal
  • -
    diagram progression
Page logic
  • -
    As the page advances, diagrams and section anchors should reveal in a deliberate order.
  • -
    Motion should help explain modularity, not distract from it.
Constraints
  • -
    Keep the static final state fully legible.
  • -
    Favor translate and opacity over theatrics.
Reduced motion
Show each section in its final arranged state without staged transitions.

Image direction

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

Role
supportive
Media types
  • -
    diagram field
  • -
    portrait photography
Subject patterns
  • -
    modular cell lattice
  • -
    straightforward scientist portraits
Composition logic
  • -
    Anchor one side of the hero with a geometric field.
  • -
    Keep portraits documentary and high-trust.
Treatment rules
  • -
    Use yellow only inside diagram cells or CTA cuts.
  • -
    Keep photography neutral and true to life.
Generation cues
  • -
    Describe isometric line cells with a few yellow planes.
  • -
    Use clean portrait photography with minimal retouching.
Avoid
  • -
    No stock-lab clichés.
  • -
    No cartoon biotech iconography.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No biotech neon gradients.
  • -
    No soft blob illustrations that weaken the scientific structure.
  • -
    No thick filled UI shells competing with the diagrams.