Background
--bg
#f6f4f1
Primary page background.
Branding
Huang Lab Brand Identity
The current visual identity is "Biotech Modern": a light, science-forward system with heme-crimson primary actions, a navy accent, rose highlights, crimson-to-navy gradients, and Fraunces + Inter typography. This page documents the tokens and treatments used across the website.
Core Palette
Color System
Deep Background
--bg-deep
#0f1b33
Footer and dark contrast panels.
Surface
--surface
#ffffff
Cards, header, panels, and form controls.
Surface Tint
--surface-tint
#f1efec
Alternating section bands and subtle fills.
Ink
--ink
#172a4d
Headings and primary text.
Ink Soft
--ink-soft
#5b6675
Body copy and supporting text.
Ink Faint
--ink-faint
#6c8487
Metadata, labels, and tertiary text.
Line
--line
#dbe7e2
Borders, dividers, and rules.
Primary
--primary
#c41e3a
Heme crimson primary: buttons, links, eyebrows, active states.
Primary Strong
--primary-strong
#9e1830
Hover states and emphasized links.
Accent
--accent
#172a4d
Navy accent: rules, markers, and gradient ends.
Accent On Dark
--accent-on-dark
#e59aa6
Rose accent text on dark panels (footer kickers, CTA eyebrows).
Typography
Fonts
Inter
Google Fonts
Primary sans-serif for body copy, card headings (H3), buttons, navigation, labels, and utility text.
View fontDisplay serif
Advancing discovery with translational rigor
Use Fraunces for H1 and H2 only. Headings stay dark ink on light surfaces.
Primary sans
The Huang Lab studies disease mechanisms and builds therapies with clinical relevance.
Use Inter for paragraphs, card headings, buttons, navigation, labels, forms, and metadata.
Logo Assets
Brand Marks and Placement
Main navigation
HL
Use the compact or icon-style logo in the sticky top navigation.
Footer
Huang Lab logo
Use the wider horizontal lockup in the footer and other wide layout contexts.
Favicon
HL
Use the icon mark for browser tabs, bookmarks, and compact digital placements.
UI Language
Components and Surfaces
Buttons and links
Text link
Primary actions are solid crimson. Secondary actions are bordered white. Navy is reserved for accents, never a button color.
Cards and containers
Cards are white with a 1px line border, 18px radius, and a soft shadow that deepens on hover with a 2px lift. Dark panels (footer, join-us CTA) use the deep navy background with soft crimson/rose radial glows.
Motion
- Use CSS transforms and opacity only; animations must stay GPU-friendly.
- Every effect respects prefers-reduced-motion and degrades gracefully without JavaScript.
- Page navigation uses the View Transitions API via Astro's ClientRouter.
- Scroll reveals, stat count-ups, and the hero tilt are wired in src/scripts/site.ts.
- The article reading-progress bar is a pure CSS scroll-driven animation.
Usage Notes
Brand Guidelines
Maintain strong contrast: dark ink on light surfaces, with crimson reserved for action and navy/rose for accents only. Gradients always run crimson to navy.
Use Fraunces sparingly for headlines and Inter everywhere else to keep the site crisp and academic.
Prefer generous spacing, restrained shadows, and purposeful motion. The system should feel institutional, rigorous, and modern — closer to a leading research institute than a marketing site.
For digital logo usage, use the compact mark in square spaces and the horizontal lockup in footer or sponsorship contexts.
Alternate Systems
Numbered Brand Directions
These alternate systems are numbered so they can be used as direct implementation briefs later. To apply one, ask for the system number to be implemented.
System 1
Midnight Translational (legacy)
A previous dark identity: deep navy surfaces, warm orange gradient CTAs, Fraunces + DM Sans. Retired in favor of Biotech Modern but kept here as a reference brief.
Background
Surface
Primary Text
Accent
Dark translucent cards, orange gradient buttons, grid-pattern backdrop. Best if the lab ever wants a moodier, startup-adjacent presence again.
System 2
Editorial Prestige
A publication-driven system leaning into scholarly authority and long-form reading.
Background
Surface
Primary Text
Accent
Warm paper tones, fine rules, restrained shadows, and a journal-like layout rhythm. Strongest for news and publications emphasis.
System 3
Biology in Motion
An expressive science-forward system inspired by microscopy, metabolism, and cell signaling.
Background
Surface
Primary Accent
Signal Accent
Layered organic gradients, subtle cellular patterns, and richer image treatments. Best if the site should feel unmistakably biomedical and visually distinctive.