ResearchGuide

Overview

ResearchGuide is an enterprise R&D matchmaking platform that connects innovation-driven companies with vetted PhD researchers and specialized science teams. The design system embodies 'Technical Minimalism with Accent Vitality'—a sophisticated aesthetic that pairs a deep, scientific color foundation (dark purples and near-blacks in hero sections) with a vibrant orange accent (#f05a26) that signals energy, urgency, and breakthrough innovation. The brand personality is authoritative yet approachable: precise, data-driven, and confident without arrogance. The UI transforms complex researcher-to-project matching into a seamless, trustworthy experience. Voice example: 'Find your ideal research partner in minutes, not months—vetted expertise, delivered on demand.'

Colors

The color system is anchored by a warm, energetic primary orange (#f05a26, RGB 240, 100, 38) used exclusively for call-to-action buttons, interactive highlights, and brand moments. This accent sits against a sophisticated neutral palette: the surface stack ranges from near-white (#fbfaf8) for body backgrounds to deeper grays (#e5e2dd) for container separation, with on-surface text at #151c28 (near-black with slight warmth). Secondary grays (#505050, #666666) provide hierarchy for disabled or muted states. The tertiary blue (#3b82f6) is reserved for informational badges and secondary interactive elements. Error states use a clinical red (#dc2626) with a soft container background (#fee2e2). The hero section employs a dark purple-black (#2a1f3d) as a dramatic backdrop, layered with subtle rad

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys both technical precision and modern accessibility. Display (72px, 800 weight, -0.04em tracking) anchors hero headlines with maximum impact; headline-lg (40px, 700 weight) structures section breaks; headline-md (28px, 600 weight) introduces subsections. Body text operates at 16px (400 weight, 24px line-height) for comfortable reading at any screen size, with 18px variants for emphasis. Labels use 14px at 600 weight with 0.01em tracking to add subtle visual distinction to buttons and form fields. All display and headline levels employ negative letter-spacing (-0.02em to -0.04em) to tighten the visual rhythm and convey sophistication. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered on desktop with 24px gutters. The spacing scale uses semantic tokens: 8px as the base unit, with sm (12px) for tight component spacing, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section spans full-width with 80px vertical padding and a minimum height of 600px, creating breathing room for the 72px headline. Cards use 24px padding (md spacing) with 16px border-radius (xl rounded token), maintaining visual hierarchy through subtle elevation (box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)). Form inputs and buttons maintain consistent 48px heights with 12px vertical padding, ensuring touch-friendly targets. White-space is generous but pu

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered elevation. Level 1 (Base): flat surfaces at surface-bright (#ffffff) with no shadow. Level 2 (Standard Card): 0 4px 12px rgba(0, 0, 0, 0.08) with 1px border at outline-variant (#d0d0d0), creating a soft lift. Level 3 (Elevated/Hover): 0 16px 40px rgba(0, 0, 0, 0.12) on card-hover states, signaling interactivity. The header uses a frosted-glass approach: backdrop-filter: blur(8px) with background: rgba(255, 255, 255, 0.7) and a 1px bottom border at outline-variant, creating visual sep

Shapes

The shape philosophy is 'Precision Softness'—rounded corners are applied with intention, never arbitrary. Buttons use 10px border-radius (lg rounded token, 1rem) to feel modern and approachable while maintaining a professional edge. Cards and containers use 16px (xl rounded token, 1.5rem) for a more generous, breathing quality. Form inputs use 12px (md rounded token, 0.75rem) to signal their functional role without excessive softness. The full-rounded token (9999px) is reserved for badges and small accent elements. This graduated approach creates visual hierarchy: the softer the corner, the mo

Components

Action Elements Buttons are the primary interaction driver. The button-primary component uses background: {colors.primary} (#f05a26), text-color: white, padding: 12px 32px, height: 48px, and border-radius: 10px. On hover, the background shifts to {colors.primary-fixed} (#f97316) with a smooth transition: all 200ms ease-out. The active state darkens further to {colors.primary-fixed-dim} (#ea580c). Button-secondary uses a transparent background with a 1px border at {colors.outline-variant} (#d0d0d0), text-color: {colors.on-surface} (#151c28), and the same padding and height. On hover, the background becomes {colors.surface-container-high} (#e5e2dd) without a border change, creating a subtle fill effect. Both button variants use label-md typography (14px, 600 weight) and apply a box-shado

Do's and Don'ts

**Do**

• Do use the primary orange (#f05a26) exclusively for high-priority CTAs and interactive moments—it's the brand's signature accent and should never be diluted or overused.
• Do maintain 48px minimum heights for all interactive elements (buttons, inputs) to ensure touch-friendly targets and accessibility compliance.
• Do apply the full rounded token (9999px) only to badges and small accent elements; use graduated radii (10px for buttons, 16px for cards) to maintain visual hierarchy.
• Do layer shadows subtly: use 0 4px 12px rgba(0, 0, 0, 0.08) for standard elevation and 0 16px 40px rgba(0, 0, 0, 0.12) only for hover/elevated states to avoid visual noise.
• Do use Inter at 600+ weight for all labels and headlines to convey authority; reserve 400 weight for body text to maintain readability.

**Don't**

• Don't use the primary orange for backgrounds or large surface areas—it's an accent color, not a dominant surface. Reserve it for buttons, links, and interactive highlights.
• Don't apply border-radius smaller than 4px (sm rounded) to any component; the system's minimum is 0.25rem to maintain the 'Precision Softness' philosophy.
• Don't mix rounded tokens arbitrarily—buttons must use 10px, cards 16px, inputs 12px. Consistency across component types is essential for visual coherence.
• Don't use heavy shadows (> 0.12 opacity) on standard cards; reserve the lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) for hover states and modals only.
• Don't apply negative letter-spacing to body text—use -0.02em to -0.04em only on display and headline levels to maintain readability at smaller sizes.