Elicit's design system layers a serif display face, condensed grotesque body, and mono uppercase labels over a deep teal and off-white canvas. Tokens for React, Next.js, and AI coding tools via DESIGN.md.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPAbout
Curated by Dov Azencot · Updated May 18, 2026 · Source elicit.com (opens in a new tab)
Elicit's marketing page is a library catalog before it is a product page. The hero presents a search field as the primary CTA — not a button, not a headline-led pitch, but a white input field with placeholder text ("e.g., Does zinc improve the duration of the common cold?") sitting in the center of an off-white canvas with institution logos (NASA, Stanford, Cornell, Harvard, Tulane) ranged below. The visual grammar quotes academic search rather than consumer software. Where Semantic Scholar, PubMed, and Google Scholar maintain either institutional austerity or consumer-web flatness, Elicit assembles the typography of a journal — display headlines in Martina Plantijn (a Dutch serif with old-style proportions), body text in Special Gothic Variable (a condensed grotesque that packs information at the column density of a printed abstract), and section labels in DM Mono uppercase (a fixed-width face that reads as archival notation).
The DESIGN.md file packages the system into 10 colors tokens, 12 typography tokens, 7 border-radius steps, 8 spacing values, and 15 components definitions. Color is spare: deep teal (#083d44) runs every surface that isn't the off-white canvas (#fcfcf8), and a single chartreuse accent (#e5ff97) appears as the primary CTA fill and as the "Search" interactive highlight — the only chromatic non-neutral in the system. The teal carries an unusual load: it functions simultaneously as the dark background for the hero band and the "Stand on the shoulders of giants" section, AND as the primary text and border color on the off-white sections below the fold. One hue, two roles.
Feed this file to an AI coding tool and it reproduces Elicit's specific moves: off-white parchment instead of pure white, deep teal as both text and background depending on section context, three-typeface stratification by semantic role, and chartreuse reserved for the single most important interactive moment on each section. The system rewards attention if you're building a research, documentation, or data-extraction product that needs to signal credibility through typographic precision rather than through gradient fills and illustration.
5
elicit.com
A snapshot of the brand in production. Scroll the frame to see the whole page.
Colors
Elicit's system anchors on #026370 (primary) as its primary color. Type is set in Special Gothic Variable across 12 tokens from 14.4px to 64px, weights 400–600. Shape language is mixed across 15 components, blending pills, soft rounds, and squarer corners.
Sparing, CTA-only voltage · 2
Page and card backgrounds · 3
Headlines, body, captions · 3
Dividers, outlines, rules · 2
Typography
Set in Special Gothic Variable across 12 tokens, from 14.4px to 64px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
Layout
7 corner radii and 8 spacing values. Shape language: mixed.
Components
Each rendered from its tokens (color, type, radius, padding) on Elicit's own canvas.
In use
Elicit's tokens on the kind of product it builds.
Build something people actually use.
A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.
The quiet collapse of an old idea
For decades the consensus held that the system would correct itself. Then it didn't. This is the inside story of what changed, told by the people who watched it unravel.
"Nobody noticed because the failure was indistinguishable from progress."
By Sam Reporter · Updated 2 hours ago
FAQ
Common questions about Elicit's tokens, components, and how to use this DESIGN.md in your project.
Read next
Specs, directories, and component libraries that pair with this design system.
Use it
One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of Elicit.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Elicit's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
Elicit's design surface does not read as a startup's marketing page — it reads as a scholarly journal's index page crossed with a library catalog. Archival stratification. Three typefaces occupy three non-overlapping semantic registers: Martina Plantijn (a Dutch serif with old-style proportions) for display headlines that frame the research proposition, Special Gothic Variable (a condensed grotesque that packs text at the density of academic abstracts) for all body reading, and DM Mono for section labels and timestamps in uppercase — archival notation rather than UI chrome. The combination has no parallel in the AI research-tools category, where Consensus, Semantic Scholar, and Perplexity reach for standard sans-serif stacks and consumer-web spacing.
Color operates with similar constraint. Deep teal (#083d44) carries a dual load: it is the primary text color on the off-white canvas AND the full-bleed section background for the hero band and the "Stand on the shoulders of giants" section. The only departure from teal-and-off-white is chartreuse (#e5ff97) — an acid lime that marks the primary search button and the single interactive highlight per section. Where most research tools use navy or blue as the brand color, Elicit's teal reads more as an aged verdigris than as a technology signal.
Key Characteristics:
#083d44 — frequency 281): Used as text (113), bg (55), border (113). The structural spine of the system — simultaneously the darkest background tone, the primary text color, and the hairline border. The extraction merged a near-match dark teal variant into this cluster. No other system in the design directory uses the same hex value for both dark-mode backgrounds and light-mode text.#fcfcf8 — frequency 160): Used as text (60), bg (39), border (60). The parchment-tinted off-white; merged from #ffffff and #f6f8f8 in extraction. The warm tint is the critical difference from pure white — it grounds the academic aesthetic.#000000 — frequency 1377): Used as text (685), border (685), shadow (7). The hairline and text color at maximum; appears at full opacity on borders and at near-full opacity on running text. The high frequency reflects the system's comprehensive border usage across card components.#0000ee — frequency 340): Used as text (170), border (170). Browser-default hyperlink blue, retained without override — an unusual choice that reinforces the academic document aesthetic, where link color is considered a navigational affordance rather than a brand opportunity.#09272b — frequency 1): The darkest teal variant; appears in one section background as a depth stop.#026370 — frequency 28): Used as text (7), bg (13), border (7), gradient (1). The mid-range teal between the structural deep teal and the lighter gradient stops. Appears in section backgrounds, feature card fills, and the gradient band transitioning between dark and light sections.#e5ff97 — frequency 8): Used as text (1), bg (5), border (1), gradient (1). The system's single chromatic accent — acid lime against the teal and off-white. The primary search button fill and the interactive highlight on the "Start for free" CTA section.#f3f6e4 — frequency 9): Used as bg (9). A warm sage-tinted off-white that differentiates certain card backgrounds from the main canvas without introducing a new hue register. Appears in the feature breakdown section.#e8eced — frequency 9): Used as bg (9). A slightly blue-gray off-white for cool-tinted card surfaces in the "Research takes many forms" section.Martina Plantijn Regular — a serif with Dutch old-style proportions — handles the display headline tier at 32-64px, weight 400. It carries the hero h1 and the major section feature headlines. This is the visual anchor that signals scholarly publishing over consumer tech. Special Gothic Variable (a condensed grotesque) runs all body text from 15.2-27.2px at weight 400. Its condensed x-height packs academic-density information into columns narrower than standard sans-serif systems. DM Mono at 14.4px weight 500 uppercase runs section labels, timestamps, and section category markers. Crimson Pro (a second serif) appears in one isolated decorative pull-quote element at 48px. Inter appears for exactly one button — the skip-to-content accessibility link — but is otherwise absent from the visible UI.
| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
display-xl | 64px | 400 | 76.8px | Hero h1 ("AI for Scientific Research") |
display-lg | 48px | 400 | 64.8px | Feature section display headlines |
display-md | 32px | 400 | 42.24px | Sub-section h3 display |
heading-lg | 27.2px | 400 | 34px | Card heading — h3 |
heading-md | 20.8px | 400 | 29.12px | Compact card heading |
body-lg | 20px | 400 | 29px | Hero sub-paragraph |
body-md | 17.6px | 400 | 26.4px | Default running text |
body-sm | 16px | 400 | 24px | Compact prose |
body-xs | 15.2px | 400 | 21.28px | Caption-level prose |
label-mono | 14.4px | 500 | 18.72px | Section labels, timestamps (uppercase) |
serif-accent | 48px | 400 | 33.6px | Decorative pull-quote element |
nav-label | 16px | 600 | 24px | Primary button label only |
The three-typeface system is the hardest element to replicate. Martina Plantijn is not freely licensed; EB Garamond from Google Fonts carries the closest old-style serif proportions at display sizes. Special Gothic Variable (from Google Fonts) is available but requires variable-font support; Barlow Condensed at weight 400 is a non-variable fallback. DM Mono is freely available on Google Fonts.
The page uses a centered editorial column (~1200px max width) with section-level alternation between teal dark bands and off-white light bands. Internal content switches between single-column text, two-column text-plus-interface-screenshot, and three-column feature card grids.
spacing.lg (16px) for standard cards; spacing.xl (24px) for dark-teal feature cards.spacing.3xl (48px) minimum between major sections.The section-alternation rhythm (off-white → teal dark → off-white → teal dark) creates a chapter-break effect that maps to academic document structure more than to standard SaaS landing-page flow. Each band change marks a thematic shift in the research capability being demonstrated.
No shadow tier exists in the system. Card separation on the off-white canvas uses 1px near-black hairlines at 8-12px radius. Cards on the teal dark sections use the same hairline but in the canvas off-white tone. The single elevation effect is the transition between the off-white canvas sections and the full-bleed teal bands — the abrupt color switch creates perceived depth through contrast rather than through any shadow or blur technique.
The radius scale runs from sharp (0px for the primary button) to pill (100px for category tags):
rounded.none (0px) — the primary CTA button. The accessibility skip-link button and the primary search call-to-action use fully squared corners — a deliberate anti-consumer-UI choice that reads as form-over-function.rounded.sm (6px) — minor UI elements, small chips.rounded.md (8px) — search input fields and standard interactive inputs.rounded.lg (12px) — default feature cards and content tiles.rounded.xl (16px) — larger surface cards.rounded.2xl (20px) — featured highlight cards.rounded.pill (100px) — category tag filters (full pill on short text elements).The 0px primary button is the system's most distinctive shape signal. At 44px height with squared corners, the chartreuse-filled search button reads closer to a database query submit button than to a consumer-app CTA. This is not a rounding omission — it is the archival aesthetic applied to interactive surfaces.
button-primary — Chartreuse (#e5ff97) fill, deep teal text in Inter 16px weight 600, squared corners (0px radius), 12x24 padding, 44px height. The primary search button in the hero. Squared corners on a bright accent fill inverts the category convention — most systems pair high-saturation fills with generous rounding.
button-secondary — Deep teal fill, canvas-white text, DM Mono uppercase, squared corners. The "Start for free" variant and dark-section secondary CTAs.
top-nav — Deep teal background, canvas-white text in Special Gothic Variable 16px, 32px horizontal padding, 48px height. The nav reverses the canvas-and-ink order immediately, setting the teal-dominant tone before the off-white hero begins.
nav-link — Transparent, canvas-white text at 16px, 6x10 padding. No hover state captured. Links in the teal nav have no underline treatment — they rely on position and color to signal navigability.
hero-heading — Martina Plantijn 64px weight 400, -1.28px tracking, deep teal on canvas. The single h1 instance on the page.
section-heading — Martina Plantijn 48px weight 400, -0.24px tracking. Used for major feature section headlines ("Research takes many forms," "Stand on the shoulders of giants").
body-paragraph — Special Gothic Variable 17.6px weight 400, 0.25px tracking, deep teal. The default running text throughout off-white sections.
section-label — DM Mono 14.4px weight 500 uppercase, 0.72px tracking, deep teal. Used for section category markers ("TRUSTED BY OVER 5 MILLION RESEARCHERS", feature category timestamps). The uppercase mono label is the system's archival notation signal.
search-input — Canvas off-white fill, deep teal text, 17.6px Special Gothic Variable, 8px radius, 14x16 padding, 48px height, 1px pure black border. The hero's central conversion element; sits in an off-white field against the off-white canvas so only the border defines its boundaries.
card — Canvas off-white fill, 1px deep teal hairline border, 12px radius, 16px internal padding. The default feature card on light sections.
card-teal — Deep teal fill, canvas-white text, 12px radius, 24px padding. Used for the "Research experts" interactive demo cards in the dark section band.
card-sage — Sage-tinted off-white (#f3f6e4) fill, deep teal text, 12px radius, 16px padding. Appears in the feature breakdown section to differentiate feature cards from the main canvas.
hero-band — Full-bleed deep teal background, canvas-white text, 48x32 padding. The "Stand on the shoulders of giants" section and the hero section band. Background depth tier 1.
timestamp — DM Mono 14.4px weight 500 uppercase, deep teal. Used for timestamps and archival date markers (e.g., "ESTABLISHED 2021").
institution-logo — Transparent background, native-color logo rendering, 5x10 padding. Institution marks (NASA, Stanford) are NOT flattened to monochrome — their native colors are retained as credibility signals.
Do maintain the three-typeface role stratification: Martina Plantijn only at display sizes (32px+), Special Gothic Variable for all body reading, DM Mono only for labels and timestamps in uppercase. Crossing these role boundaries — running Special Gothic Variable at 48px as a headline, or DM Mono as body text — breaks the archival grammar the system is built on.
Do retain the raw browser-default link blue (#0000ee) for inline hyperlinks. The system deliberately does not override it, because academic documents treat hyperlink color as a navigational convention rather than a brand opportunity. Replacing it with teal or chartreuse would import a startup-brand signal into the scholarly register.
Do use the full-bleed deep teal band format for major section transitions. The abrupt teal-to-off-white alternation is the page's chapter-break mechanism — it does the organizational work that a fintech system would do with numbered sections or ruled lines.
Do keep the primary CTA button at 0px border radius. The squared chartreuse button is the system's most distinctive shape signal. Rounding it to 8px or 12px imports a consumer-app vocabulary that conflicts with the archival precision of the rest of the system.
Don't use chartreuse (#e5ff97) as a section background or decorative fill. Its role is strictly as an interactive fill for the primary action on each section — one per section, not more. Used as a background, the acid lime competes with the teal and loses the scarcity that makes it function as a highlight.
Don't use deep teal (#083d44) as a button fill on the off-white canvas. Its 113 occurrences are all as text and hairline border — the secondary button is the only teal-filled interactive element, and it lives in teal-background sections where the contrast reversal reads correctly. On an off-white canvas, a teal button reads as a text block rather than as an action.
Don't introduce a shadow tier on card components. The 0-shadow constraint is deliberate — the system achieves separation through hairline borders and surface-color switching between off-white, sage, and cool-gray. Adding drop shadows would introduce a consumer-web softness that conflicts with the archival document aesthetic.
Don't flatten institution logos to monochrome. The design retains native logo colors (NASA's meatball, Harvard crimson, Cornell red) as an explicit credibility signal to academic users. Forcing monochrome white or teal treatment would register as brand suppression to the exact audience that recognizes these marks.
AI & LLM Platforms
More DESIGN.md files in AI & LLM Platforms.
Pricing
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.