North star · Let spacious editorial typography and a disciplined warm-neutral palette lead, using lime only as a small signal of action or discovery.
The visual system balances a warm off-white canvas (#f7f7f5) with deep green-black typography (#222f30), keeping the long-form scientific story calm and legible. A pale lime (#cef79e) appears sparingly as a discovery cue: a small arrow control, card surface, or tiny section marker, rather than a broad page wash. Oversized Aspekta headlines carry the editorial hierarchy, while Roboto Mono uppercase labels make navigation, badges, and metadata feel precise and technical. The layout uses a wide content frame and generous open intervals; two-column narrative sections alternate with a compact three-card platform row and a more structured newsroom band. The opening hero is full-bleed abstract imagery with rounded outer corners, white headline and supporting copy over the image, and a compact pill-shaped navigation panel. Most other sections remain flat and restrained, allowing the image-led hero and dark footer to punctuate the pale page.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Warm Ivory表层 · Footer Black表层 2 · Newsroom Mist表层 3 · Clean White表层 4 · Deep Bio Ink主文字 · Deep Bio Ink次要文字 · Clean White弱文字 · Muted Slate描边 · Newsroom Mist强调 · Discovery Lime
Display and editorial sans-serif for headlines, body copy, and most page text.
Aa 设计
Roboto Mono
网络字体 · 字重 400 · 占比 14%
免费替代：IBM Plex Mono
Monospaced utility type for navigation, captions, badges, and uppercase labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized moving or marquee-style brand statement across the page.
Integrated Biosciences
160px
400
1
-0.001em
一级标题
Hero headline introducing the future of aging medicine.
Integrated Biosciences
112px
400
1
-0.03em
二级标题
Major platform, newsroom, and editorial section headings.
Integrated Biosciences
76px
400
1.1
-0.02em
三级标题
Subsection headlines and prominent company statements.
Integrated Biosciences
58px
400
1.1
-0.02em
四级标题
Platform cards and smaller feature or newsroom titles.
Integrated Biosciences
42px
400
1.2
-0.02em
正文
Supporting descriptions, company narrative, and article summaries.
The quick brown fox 敏捷的狐狸
19px
400
1.3
-0.02em
辅助文字
Uppercase section labels, publication metadata, and small annotations.
The quick brown fox 敏捷的狐狸
14px
400
1
0
导航
Compact uppercase navigation and utility actions.
The quick brown fox 敏捷的狐狸
14px
400
1
0
代码
Technical-looking micro-labels and compact system metadata.
const style = 1;
14px
400
1
0
间距与布局
基准单位 4px · 密度：适中
48px版块间距
20px元素间距
40px卡片内边距
1344px内容最大宽度
4px
8px
10px
12px
16px
17px
20px
24px
26px
32px
40px
44px
48px
60px
A wide, centered content frame supports a deliberately sparse editorial composition, with measured max width of 1344px. The opening is a full-bleed visual inset within rounded page edges; later content returns to the warm canvas. Narrative sections use two-column alignment, followed by a three-column platform card row. Long vertical pauses are part of the rhythm, not unused space. The newsroom shifts into a light gray band with a more compact multi-column feed, before a full-width dark footer closes the page.
圆角与层次
按钮 · 8px
徽标 · 8px
导航 · 8px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is mostly flat: sections rely on open canvas and tonal changes rather than shadows or layered cards. Borders are subtle hairlines, especially around the pill-like navigation surface and section boundaries. Use the measured 8px button and badge radius and 12px nav radius; the platform cards themselves are square-edged.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Floating navigation
Compact light pill panel with company and newsroom links plus a deep-ink WORK WITH US action; use uppercase Roboto Mono for utility labels.
Hero CTA
Deep-ink DISCOVER OUR COMPANY button with white monospaced uppercase text, paired with a separate lime arrow control.
Section badge
Small uppercase Roboto Mono label on white or canvas, with a restrained lime marker and an 8px radius.
Platform cards
Three square-edged cards for datasets, drug design, and AI; alternate lime, deep ink, and muted light surfaces with simple line motifs.
Newsroom feed
Editorial articles arranged within a #eeeeee band, with publication labels, dates, titles, and image-led content.
Closing footer
Full-bleed black section with abstract dark imagery and prominent white IntegratedBio wordmark treatment.
Imagery · The hero uses full-bleed abstract imagery with fluid, organic forms and subdued green, cream, and near-black tones. Treat it as atmospheric background rather than literal scientific documentation, preserving strong contrast behind white headline text. Platform cards include restrained line-based scientific motifs, while the company area has a supporting image. The closing footer reprises dark abstract imagery and oversized white wordmark-like typography.
Reserve #cef79e for small, meaningful discovery cues.
Use Aspekta for editorial text and Roboto Mono for utility labels.
Give major sections generous breathing room.
Keep platform cards square-edged and visually distinct by surface colour.
✕ 不该做
Do not spread the lime accent across large page areas.
Do not add drop shadows to otherwise flat sections.
Do not turn the page into a dense dashboard or conventional product grid.
Do not use mono type for long descriptions.
Do not compete with the hero image using extra decorative effects.
Do not round the square platform cards.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new biotechnology company page in this visual language. Use #f7f7f5 Warm Ivory as the main canvas and #222f30 Deep Bio Ink for text and dark controls. Keep #cef79e Discovery Lime rare: a small arrow, marker, or one highlighted card surface. Use large, regular-weight Aspekta-style sans-serif headlines with tight tracking, and Roboto Mono-style uppercase labels for navigation and metadata. Compose content as spacious two-column editorial sections, then use a concise three-card feature row and a light #eeeeee newsroom band. Frame the hero with abstract, organic imagery and readable white copy; finish with a dark full-bleed footer. Keep surfaces flat, borders quiet, spacing generous, and rounded corners limited to navigation, badges, and buttons.
