Refto
AiBion

AiBion

At AiBion, we bring together isolated streams of diverse diagnostic data to build seamless therapeutic processes, and apply AI algorithms to improve patient outcomes.

SaasHorizontal ScrollingCustom CursorParallaxAiHealthGlassBig Background ImageLightClean
4.0
5
Visits
Visit

Categories

SaasAiHealth

Available Pages

Home

Version History

Design Analysis

AiBion Home design analysis

Keep the system quiet, pale, and card-led. Use serif headlines to give the otherwise technical page a measured editorial center. Let compact black CTAs punctuate the flow without making the whole page feel promotional. M...

Key Takeaways

  • Keep the system quiet, pale, and card-led.
  • Use serif headlines to give the otherwise technical page a measured editorial center.
  • Let compact black CTAs punctuate the flow without making the whole page feel promotional.
  • Most of the page should be pale gray and white.
  • Black belongs to the main CTA and the strongest text.
  • Blue should stay as a contained data accent rather than a primary brand fill.

Overview

  • Keep the system quiet, pale, and card-led.
  • Use serif headlines to give the otherwise technical page a measured editorial center.
  • Let compact black CTAs punctuate the flow without making the whole page feel promotional.

Colors

  • Most of the page should be pale gray and white.
  • Black belongs to the main CTA and the strongest text.
  • Blue should stay as a contained data accent rather than a primary brand fill.

Typography

  • Use IBM Plex Serif for major story anchors.
  • Keep all supporting UI in a quiet neutral sans.
  • Avoid loud medical futurism in the type system.

Layout

  • Use stacked white cards as the dominant module.
  • Allow large neutral gaps between sections so the content feels measured and trustworthy.
  • Keep the contact area simple and direct.

Design.md

System Overview

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

Minimal Medical Data Cards

A light medical technology system built from pale gray space, IBM Plex Serif headlines, white case-study cards, and compact black CTAs.

Quiet, clinical, and card-led.

Primary mode: lightmedical data AI servicescontent-rich

Theme

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

Visual atmosphere
Summary
Quiet, clinical, and card-led.
Density
3
Variance
2
Motion
1
Signals
pale gray shell · white data cards · IBM Plex serif headline · compact black CTA

Colors

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

Palette colors
Pale Clinical Gray
#F4F4F2
Medical Ink
#1B1E1F
Data Blue
#4CA6F5
Card White
#FFFFFF
Quiet Border
#D7DADB
Usage rules
Keep the page mostly pale and white.
Use blue only as a contained data motif or small accent.

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
12px
card
18px
panel
20px
full
999px

Typography Families

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

Display
IBM Plex Serif
measured editorial serif
Body
Inter
quiet medical sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.4rem, 4.8vw, 4rem)/—
Display
H2
clamp(1.8rem, 3.4vw, 2.6rem)/—
H2
Body
1rem/—
Body
Label
0.85rem/—
Label

Typography Rules

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

Rules
Use the serif only for major narrative anchors. · Keep the rest of the page calm and factual.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Use white cards as the primary information unit.
Allow large pale-gray fields between service stacks so the page never feels rushed.

Component Preview

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

Buttons primary
Base Attributes
Background
#1B1E1F
Text
#FFFFFF
Border
none
Radius
12px
Padding
0.7rem 1rem
Min height
40px
Shadow
none
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#1B1E1F
Border
1px solid #D7DADB
Radius
12px
Padding
0.7rem 1rem
Min height
40px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1B1E1F
Border
1px solid #D7DADB
Radius
18px
Padding
1.25rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#1B1E1F
Border
1px solid #D7DADB
Radius
12px
Padding
0.8rem 1rem
Min height
44px
Placeholder
rgba(27,30,31,0.45)

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No neon biotech palette.
  • -
    No loud promotional gradients.
  • -
    No heavy shadows or luxury editorial flourish.