Frontend Style Guide · Handoff Document
Tarsier® Pharma — IR Site Style Guide
Accurate visual language reference extracted via live browser audit of tarsierpharma.com. All colors, fonts, and values are pulled directly from computed styles on the live site.
01
Color System
Primary Brand Colors — Extracted from live site CSS
Brand Orange
#f6921e
rgb(246, 146, 30)
Logo "Tarsier" wordmark, H4 sub-headings, second word in split H2 pattern (e.g. "ABOUT US"), icon accent fills, Send button background, orange horizontal divider line
Primary Accent
Brand Purple
#753f98
rgb(117, 63, 152)
Primary CTA buttons ("Learn More", "Read More →"), H3 card headings, all inline links ("Read more >>"), active nav link state, footer nav links
Primary CTA
Purple Dark
#491b6f
rgb(73, 27, 111)
Social sidebar icons (LinkedIn, Twitter fixed sidebar), icon circle backgrounds, scroll-to-top button, button hover state (darkens from brand purple)
Dark / Hover
Hero Gradient
~#481b6e → #9a55c0
Purple spectrum gradient
Page hero banner background — eye close-up photo with purple gradient overlay. All interior pages share this hero treatment.
Hero BG
Neutral Palette
Heading Dark
#3a3a3a
rgb(58, 58, 58)
H2 headings on white backgrounds — the dark word in the split heading pattern (e.g. "ABOUT US")
H2 Color
Body Text
#4d4d4d
rgb(77, 77, 77)
All body copy paragraphs, navigation links (default state), card body text, contact section labels
Body Text
Footer BG
#515151
rgb(81, 81, 81)
Footer section background. Also the background of the "CONTACT US" footer area upper band. Not black — warm dark gray.
Footer BG
Section Gray
#f2f2f2
rgb(242, 242, 242)
Contact form section background. Also the general section alternating background on some pages.
Section BG
Split H2 Heading Pattern: Section headings consistently split across two words — first word in dark gray (#3a3a3a) or white (on dark bg), second word in orange (#f6921e). Examples: ABOUT US · FEATURED NEWS · INVESTOR RELATIONS · CONTACT US
02
Typography
Font Family — Single Font System
Titillium Web
'Titillium Web', sans-serif · Google Fonts
The only font used across the entire site. Every element — headings, body, nav, buttons, forms — uses Titillium Web, differentiated by weight only.
200 ExtraLight
300 Light ← Body & buttons
400 Regular
600 SemiBold ← Card headings
700 Bold ← Section headings
Import:
https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swapType Scale — Live Rendered Examples
CHANGING LIVES
BY SAVING SIGHT
BY SAVING SIGHT
Investor Relations
ABOUT US
FEATURED NEWS
CONTACT US:
Science & Technology
Corporate Profile
We are a late clinical-stage company dedicated to developing disruptive bio-inspired medical solutions for the treatment and cure of autoimmune and inflammatory ocular diseases.
Dazdotuftide (TRS), the Tarsier breakthrough platform technology, approaches inflammatory diseases from within the immune system. Tarsier® Pharma implements a patented, proprietary new molecule developed to 're-engineer' the immune system.
Home
Investor Relations
Pipeline
Contact
...the potential to effectively control a range of autoimmune and inflammatory ocular diseases. Read more >>
03
Spacing & Layout
Spacing Scale
4px — Micro: icon inner padding
8px — XS: tight item gaps
10px — Button vertical padding (actual extracted value)
16px — Standard gap, internal padding
20px — Card internal, news card body
28px — Button horizontal padding
40px — Column gap, section padding
60–80px — Full section top/bottom padding
Layout System
Page max-width
~1200px (Elementor default)Content padding
~40px each side3-col card grid
33.3% · ~20px gutterNav height
~72pxHero min-height
~600pxSection vertical pad
60–80pxButton border-radius
3px (very tight, not pill)Card border-radius
4pxRadius Examples
3px Btn
4px Card
50% Icon
04
Buttons & CTAs
Purple CTA Button — News / IR "Learn More", "Read More →" actions
/* Extracted from .elementor-button on tarsierpharma.com */
background-color: #753f98; /* rgb(117, 63, 152) */
color: #ffffff;
border-radius: 3px;
padding: 10px 28px;
font-family: 'Titillium Web', sans-serif;
font-size: 14px;
font-weight: 300;
text-transform: none; /* NOT uppercase */
letter-spacing: normal; /* no tracking */
/* Hover: */
background-color: #491b6f; /* darken to dark purple */
Orange Submit Button — Contact form "Send" (full-width)
/* Form submit / Send button */
background-color: #f6921e;
color: #ffffff;
border-radius: 3px;
width: 100%;
padding: 12px;
font-weight: 300;
Text Links / Read More CTA
Button Notes: The site uses only 2 button styles — (1) purple square-ish button for CTAs and (2) orange full-width for form submit. Border-radius is 3px — tight square corners, NOT pill-shaped. Font weight is 300 (Light) — not bold. No uppercase, no letter-spacing. No ghost/outline buttons exist on the current site.
05
UI Components
Hero / Page Banner
Background: full-bleed close-up eye photograph (bg-size: cover, bg-position: center). Purple gradient overlay sits on top. H1 title (Titillium 400, 35px, white) + subtitle (Titillium 300, 16px, white 75% opacity). No CTA button on interior page heroes.
Feature Cards — 3-Column Grid (Science / Pipeline / For Patients)
🔬
Science & Technology
Dazdotuftide (TRS), the Tarsier breakthrough platform technology, approaches inflammatory diseases from within the immune system.
📊
Pipeline
Our pipeline includes two administration routes of eye drops and intravitreal injections.
DA
ZDOT
UFTIDE
ZDOT
UFTIDE
For Patients
TRS01 is in clinical development for non-infectious anterior uveitis including uveitic glaucoma.
Cards float on top of a desaturated/grayscale eye photo background. White cards, no border, subtle drop shadow. Centered content inside cards. Card icons are outline-style in purple/orange. The third card uses the "DAZDOTUFTIDE" eye-chart typographic treatment as its icon.
IR News Cards
January 07, 2025
Tarsier Pharma Appoints Ashley Kline as Chief Commercial Officer
Expanding its U.S. commercial leadership presence ahead of Phase 3 trial readout.
Read More →
January 16, 2024
Tarsier Pharma Receives FDA Agreement Under SPA for Phase 3 Trial
Special Protocol Assessment agreement covers TRS01 Phase 3 trial for non-infectious uveitis.
Read More →
August 23, 2023
Tarsier Pharma Announces Phase 3 Clinical Trial Results
Results from TRS4Vision trial in subjects with noninfectious anterior uveitis.
Read More →
Event Items
December 01, 2025
BTIG 5th Annual Ophthalmology Day
Investor Conference · New York
July 30, 2025
Cantor Fitzgerald Webinar — Uveitis Big Data
Webinar · Virtual
07
Forms & Inputs
Contact / IR Inquiry Form
By clicking I Agree, you indicate that you accept the Privacy Policy
Form sits on light gray (#f2f2f2) section background. 3-column layout on desktop: (1) contact icons, (2) this form, (3) footer nav links.
Form Input Specs
Border color
#c8b8d8 (light purple tint)Border width
1pxBorder radius
2pxBackground
#ffffffPadding
10px 14pxFont
Titillium Web 300 · 14pxText color
#555555Placeholder
#bbbbbbFocus border
#753f98 (purple)Submit button
Orange #f6921e · full width08
IR Page — Section Map
| # | Section | Content & Notes | Background |
|---|---|---|---|
| 01 | Page Hero Banner | Full-bleed eye photo (cover) + purple gradient overlay. H1: "Investor Relations" — Titillium 400, 35px, white. Sub-headline in Titillium 300, 16px, white 75%. No button. Matches all interior pages. | Purple Photo |
| 02 | Section Divider | 3px orange line (#f6921e) + centered circular Tarsier eye icon. Repeated between every major section throughout page. | White |
| 03 | Corporate Profile | H4 "Corporate Profile" (orange, 18px). Centered body text Titillium 300, 18px describing dazdotuftide, TRS01/TRS02, FDA SPA. Featured Video: YouTube embed of CEO NYSE Floor Talk (16:9, black BG before play). | White |
| 04 | Section Divider | Repeated orange line + eye icon. | White |
| 05 | NEWS Section | H2 split: "NEWS" or "FEATURED NEWS". 3-column card grid: orange date stamp, dark heading, gray Titillium 300 excerpt, purple "Read More →" link. Full archive — paginated list back to 2019. Use UAEL Posts widget pattern. | White |
| 06 | Section Divider | Repeated orange line + eye icon. | White |
| 07 | EVENTS Section | H2 "EVENTS" in orange. Same card format as news. Date in orange, title in dark, "Read More →" in purple. List of past and upcoming conferences (Oppenheimer, Cantor, BTIG, H.C. Wainwright, ARVO, OIS, etc.) | White |
| 08 | Contact Section | H2 "CONTACT US:" 3-column: (1) Orange icon circles for email, address, LinkedIn, Twitter with purple link text; (2) Form (Name, Company, Email, Message + privacy checkbox + orange Send btn); (3) Footer nav links in purple (Home, About, Science & Technology, Pipeline, Patients, Investor Relations) | Light Gray #f2f2f2 |
| 09 | Section Divider | Final orange eye icon divider before footer. | #515151 |
| 10 | Footer | Dark gray (#515151) background. Large ghosted "Tarsier" logo text watermark (near-transparent white, 48px+). EU Horizon 2020 flag + grant text (small, white, bottom). © copyright line. | #515151 Dark Gray |
09
CSS Design Tokens — Complete Reference
/* ═══════════════════════════════════════════════════
Tarsier® Pharma · IR Site Design Tokens
Source: live browser computed style audit
tarsierpharma.com · March 2026
═══════════════════════════════════════════════════ */
:root {
/* ── Brand Colors ── */
--orange: #f6921e; /* rgb(246,146,30) — Logo, H4, icon fills, Send btn, divider */
--purple-brand: #753f98; /* rgb(117,63,152) — CTA buttons, H3, all links, active nav */
--purple-dark: #491b6f; /* rgb(73,27,111) — Social sidebar, icon bg, btn hover state */
--purple-overlay: rgba(51,19,72,0.66); /* Modal/popup overlay */
/* ── Neutrals ── */
--text-heading: #3a3a3a; /* rgb(58,58,58) — H2 on white backgrounds */
--text-body: #4d4d4d; /* rgb(77,77,77) — All body copy, nav links */
--text-muted: #888888; /* Captions, event meta, placeholder adjacent */
--border-input: #c8b8d8; /* Form input border — light purple tint */
--white: #ffffff;
--bg-section-gray: #f2f2f2; /* Contact form section background */
--bg-footer: #515151; /* Footer dark gray */
/* ── Typography ── */
--font: 'Titillium Web', sans-serif; /* Only font used on site */
--fw-light: 300; /* Body copy, buttons, nav links, form text */
--fw-regular: 400; /* H1 on hero, some subheadings */
--fw-semibold: 600; /* Card headings, news titles */
--fw-bold: 700; /* H2, hero title, section headings */
/* ── Type Scale ── */
--fs-hero: 52px; /* Hero banner UPPERCASE title */
--fs-h1: 35px; /* Page title on hero (fw-regular) */
--fs-h2: 30px; /* Section headings — split orange/dark pattern */
--fs-h3: 20px; /* Card headings — purple */
--fs-h4: 18px; /* Sub-labels — orange, fw-regular */
--fs-body-lead: 18px; /* Main paragraphs, centered sections */
--fs-body: 16px; /* Nav links, standard body */
--fs-btn: 14px; /* Button labels */
--fs-meta: 12px; /* Date stamps, event type, caption */
/* ── Border Radius ── */
--radius-btn: 3px; /* Buttons — tight, NOT pill */
--radius-card: 4px; /* Cards, panels */
--radius-input: 2px; /* Form inputs */
--radius-circle: 50%; /* Social icons, divider eye circle */
/* ── Shadows ── */
--shadow-card: 0 2px 12px rgba(0,0,0,0.06);
--shadow-card-hover: 0 4px 20px rgba(0,0,0,0.10);
/* ── Layout ── */
--max-width: 1200px;
--page-padding: 40px;
--section-padding-v: 70px;
--nav-height: 72px;
/* ── Transitions ── */
--transition: 0.2s ease;
}
10
Footer Component
Footer background: #515151 (warm dark gray — not pure black). Large ghosted "Tarsier" wordmark watermark at ~10% opacity white (decorative only). Two rows of nav links repeated in #753f98 purple. EU Horizon 2020 flag badge displayed with grant text. The orange divider eye icon appears above the footer before transitioning to dark gray.