Deep-science UI with Bloomberg-grade clarity.
This design language is dark, modern, technical, and high-trust. It should feel like a live research terminal rather than a generic biotech marketing site: serious, luminous, data-first, and quietly ambitious.
Dense enough to feel powerful, clean enough for foundations, clinicians, and serious technical partners.
Blend science credibility, modern systems design, and subtle cinematic polish without clutter.
Terminal preview
Example of the site language in component form
Use compact cards with strong labels, dense copy, and sharp hierarchy.
Every panel should look like it belongs to the same intelligence system.
What the style should communicate.
The site should feel like a serious instrument for reading scientific terrain. Every visual choice should reinforce trust, structure, and the sense that the platform is surfacing patterns hidden inside a very large body of research.
1. Scientific credibility
Avoid loud consumer-health visuals. Use disciplined spacing, strong typography, subtle gradients, and restrained motion.
2. Data-rich confidence
The interface should imply ranking, comparison, and live intelligence. Cards and chips should feel modular and machine-assisted.
3. Public-minded mission
The tone is not luxury biotech or speculative VC theater. It is high-end, but in service of clarity and medicine.
A midnight research palette with luminous accents.
The background stays in deep navy and near-black ranges. Accent color carries meaning, not decoration. Use the brightest tones sparingly so the interface keeps its authority.
Big, compressed headlines. Calm, readable body text.
Use a clean sans like Inter or a similarly neutral modern grotesk. Headlines should be large, tightly tracked, and slightly compressed through spacing, not novelty fonts.
The reusable pieces that define the system.
Cards should feel like modules inside a single operating system. The border, radius, background, spacing, and text hierarchy should remain consistent across sections.
Primary buttons use luminous blue fill. Secondary buttons stay transparent and rely on border contrast.
Use chips for state, signal quality, or layer descriptions. Keep them compact and meaning-rich.
Read at scale
Numbered process cards use a compact icon block on the left and text on the right. This reinforces method and flow.
Detect convergence
Cards can be repeated vertically or in two-column rows. Keep internal spacing consistent to preserve the terminal rhythm.
Starter CSS for the full site.
This block is meant to be lifted directly into your project as a shared design foundation. It keeps the look coherent across landing pages, dashboard panels, and long-form info sections.
:root {
--bg-0: #020814;
--bg-1: #071324;
--bg-2: #0b1c31;
--bg-3: #102742;
--panel: rgba(8, 23, 43, 0.9);
--panel-strong: rgba(10, 28, 51, 0.96);
--line: rgba(121, 180, 255, 0.18);
--text: #eef4ff;
--muted: #9bb2cf;
--blue: #5ab6ff;
--cyan: #6ae8ff;
--green: #29d3a2;
--gold: #f5cc67;
--radius-xl: 24px;
--radius-lg: 18px;
--radius-md: 14px;
}
body {
margin: 0;
font-family: Inter, system-ui, sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left,
rgba(84, 166, 255, 0.14), transparent 34%),
linear-gradient(180deg,
var(--bg-0) 0%, var(--bg-1) 28%, var(--bg-0) 100%);
}
.panel {
background: linear-gradient(180deg,
var(--panel) 0%, var(--panel-strong) 100%);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
}
h1 {
font-size: clamp(44px, 7vw, 82px);
line-height: 0.95;
letter-spacing: -0.06em;
}
.section-title {
font-size: clamp(28px, 4vw, 52px);
line-height: 1.02;
letter-spacing: -0.05em;
}
p, li {
color: var(--muted);
line-height: 1.7;
}
.btn-primary {
color: white;
border-radius: 999px;
border: 1px solid rgba(90, 182, 255, 0.65);
background: linear-gradient(135deg,
rgba(90,182,255,0.95), rgba(58,133,255,0.92));
}
.pill-green {
background: rgba(41, 211, 162, 0.13);
border: 1px solid rgba(41, 211, 162, 0.22);
color: #cbffef;
}