alpbio-com

Clinical scientific precision balanced by warm, sensory food photography. Fine structural gridlines and soft blue pill actions give the layout an engineered biotech clarity, while warm tones and a saturated yellow footer bring grounded food appeal.

clinical quiet warm bold

Visit site

Rated

6.4/ 10

From 7 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged: 8.7
Systemmeasured: 4.8
Distinctionmeasured: 3.7

on the grid: 16%
vertical rhythm: 62%
type on a scale: 56%
contrast passing AA: 60%
unlike the library: 0.21
model craft: 7.6/10
model deviation: 4.0/10

Colour

Background#f5f5f5

Text#000000

Accent#8ec7e2

Surface#ffffff

Muted#1e1e1f

Typefaces

Display: Geist
Body: Geist
Mono: PT Mono
Source: google
Scale: 13 · 15 · 18 · 20 · 22 · 32

Layout

Grid: —
Container: —
Spacing base: 8px
Radius: 4px · 9999px

Capture

Category: food
Sections: 7
Captured: 2026-08-30
Rhythm: mixed → dark → light x5

Type rules

display headlines tracked tightly at negative 0.05em in sentence case
section labels and navigation anchors set in uppercase mono
body measure stays constrained to approximately 61 characters per line

Colour rules

accent sky blue (#8ec7e2) is reserved exclusively for interactive pill buttons and tags
warm yellow (#f7ca50) appears solely on the closing footer surface

Voice rules

use scientific formulation vocabulary without corporate fluff
lead with functional specifications

Holds it together

pair primary action pills with detached circular arrow badges in matching sky blue
overlay full-bleed hero and media sections with thin vertical hairline gridlines
render ingredient diagrams and icons using coarse pixelated bitmap glyphs

Contrast

text on background19.3:1 AAA

muted text on background15.3:1 AAA

text on surface21.0:1 AAA

accent on background1.7:1 fail

background on accent1.7:1 fail

Type, measured

Body: 18px / 1.35
Measure: 61 characters
Display: 48px / 1.1
Tracking: -0.05em display
Scale ratio: 1.28

Voice

Tone: technical, precise, confident
Sentences: medium
Person: second
Vocabulary: technical
Calls to action: request, learn, explore, view, get

Built with

Builder: framer
Framework: —
Motion: —
WebGL: —
Nav: top_bar, 4 items
Length: 4.6 screens

Sections in page order

3 marked strong · 7

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
nav
A floating white capsule navigation bar hovering cleanly over a warm, atmospheric photography background.
Mood
clinical + quiet
Layout
1 col · split · airy
Open section →
01
hero
A subtle, clinical hero featuring precise centered typography over a warm, hazy texture overlaid with delicate structural grid lines.
Mood
clinical + quiet
Layout
1 col · centered · balanced
Open section →
02
statement
Strong
A clean, typography-led introductory statement with an airy layout, quiet confidence, and a soft blue pill callout.
Mood
quiet + clinical
Layout
8 col · stacked · airy
Open section →
03
showcase
Strong
A sterile, minimalist scientific ingredients showcase with pixelated geometric glyphs and restrained grey-toned cards.
Mood
clinical + quiet
Layout
3 col · grid · airy
Open section →
04
showcase
A clean, warm product showcase slider pairing rich overhead food photography with translucent floating action pills.
Mood
warm + quiet
Layout
1 col · grid · airy
Open section →
05
cta
An airy, minimalist call to action on a soft warm cream background with subtle mono tagging and a pastel blue pill button.
Mood
quiet + warm
Layout
1 col · centered · airy
Open section →
06
footer
Strong
A vibrant warm yellow footer combining clean CTA copy and navigation columns with a distinctive bitmap logo mark.
Mood
bold + raw
Layout
1 col · split · airy
Open section →