otto-SR

Overview

otto-SR is an enterprise AI platform designed for scientific research teams to accelerate evidence synthesis and literature review workflows. The brand embodies "Institutional Modernism"—a design philosophy that combines the gravitas and credibility of academic institutions with contemporary digital clarity. The interface evokes precision, rigor, and trustworthiness through a restrained palette of deep forest green (#1c5438) paired with clean white surfaces, evoking the authority of peer-reviewed research while remaining approachable and navigable. The emotional response is one of competence and partnership: users feel supported by a system that respects the complexity of scientific inquiry.

The brand voice is precise, measured, and evidence-driven. Vocabulary favors specificity over marketing hyperbole: "extract verifiable evidence" rather than "unlock insights," "synthesize findings" rather than "generate summaries." The tone is professional yet collaborative, acknowledging that AI augments human expertise rather than replacing it. Example sentence in brand voice: "otto-SR helps your team search 50,000 papers in minutes, then flags the evidence that matters most—so you can focus on interpretation."

Colors

The color system reflects the institutional context of academic research. Primary (#1c5438, a deep forest green) is reserved exclusively for actionable elements: call-to-action buttons, navigation links, and interactive highlights. This color signals agency and trust—it appears on the "Sign up" button (rgb(28, 84, 56)) and the "PUBLICATIONS" link, making it the visual anchor for user intent. Secondary (#0a192f, a near-black navy) provides structural contrast and is used for body text and secondary headings, ensuring legibility at 16px on white backgrounds (color: rgb(15, 23, 42)). The surface stack is deliberately minimal: white (#ffffff) as the primary canvas, with subtle grays (surface-container-low: #eef2f5, outline: #94a3b8) for dividers and disabled states. The accent green (#41c282)

Typography

The type system pairs Playfair Display (a high-contrast serif with classical proportions) for headlines with system fonts (-apple-system, BlinkMacSystemFont, Segoe UI) for body and UI text. This pairing communicates "established authority meets modern efficiency." Display (96px, 600 weight, -0.02em letter-spacing) is used for the hero headline "AI for Scientific Research," where the serif's elegant serifs reinforce credibility. Headline-lg (56px, 600 weight) anchors section titles. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text, set at a comfortable 1.5 line-height ratio for readability on screens. Labels (14px, 500 weight) are used for button text and form labels, with 0.01em letter-spacing to add subtle emphasis. On small labels over busy backgrounds (e.

Layout

The layout uses a 12-column grid with a max-width of 1400px, maintaining a fluid layout on mobile (6-column) and tablet (8-column) before expanding to full width on desktop. The hero section spans the full viewport height with a left-aligned text column (max-width: 3xl, ~48rem) and a right-aligned decorative illustration (opacity: 10% on mobile, 100% on xl breakpoints). Section spacing follows the lg token (40px) for vertical rhythm between major sections, with md (24px) for internal card spacing. The gutter (24px) is applied consistently to all horizontal padding, creating a breathing room that prevents content from feeling cramped. Container max-width of 1400px ensures that on ultra-wide displays, content remains scannable and not stretched. White-space is treated as a design element: th

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering rather than dramatic elevation. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) uses elevation.md: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px vertical offset and 8px blur, creating a gentle lift from the surface. Level 3 (modals, popovers, dropdown panels) uses elevation.lg: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and vertical offset (8px) to create clear separation. The custom select dropdown uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), m

Shapes

The shape philosophy is "Architectural Clarity"—rounded corners are used sparingly and consistently to signal function rather than decoration. Buttons and inputs use rounded.DEFAULT (0.5rem, 8px), a subtle rounding that softens the geometry without appearing playful or casual. Cards use rounded.lg (1rem, 16px), a slightly more generous radius that distinguishes them from interactive elements. The logo uses a hard square (border-radius: 0px) with a 4px stroke, reinforcing the brand's institutional identity and creating a visual anchor. Badges use rounded.full (9999px) to create pill shapes, a c

Components

Action Elements Buttons follow a two-tier system: primary (bg: #1c5438, fg: white, 18px, 500 weight, padding: 14px 28px) for main CTAs like "Sign up," and secondary (bg: white, fg: #1c5438, border: 1px #94a3b8, 14px, 500 weight, padding: 8px 16px) for tertiary actions. Primary buttons transition to #2b8659 (primary-fixed-dim) on hover over 200ms, creating a visual feedback loop. Links within body copy use color: #1c5438 with text-decoration: none by default, then add underline on hover with text-decoration-thickness: 2px and text-underline-offset: 4px. The "PUBLICATIONS" and "NEWS" links in the header use the same primary color but with font-size: 18px (sm: 12px) and font-weight: 600, creating a visual distinction from body links.

Containers & Surfaces Cards use background: white,

Do's and Don'ts

**Do**

• Do use primary green (#1c5438) exclusively for interactive elements—buttons, links, and focus states—to maintain clear visual hierarchy and signal user agency.
• Do pair Playfair Display serif headlines with system-font body text to balance institutional credibility with modern usability; never use serif for UI controls or body copy.
• Do apply the lg spacing token (40px) between major sections and md (24px) between cards to create breathing room that reflects the rigor of scientific research.
• Do transition hover states over 200ms (e.g., button color, card shadow) to provide smooth feedback without feeling sluggish or jarring.
• Do use the full surface stack (surface, surface-container-low, surface-container-high) for subtle visual separation; avoid pure black or pure white for secondary surfaces.

**Don't**

• Don't use primary green on non-interactive elements like headings or decorative accents; reserve it exclusively for buttons, links, and focus indicators.
• Don't apply rounded corners larger than 1rem (16px) to buttons or inputs; this dilutes the Institutional Modernism aesthetic and reads as playful rather than professional.
• Don't set body text smaller than 16px or with line-height less than 1.5; scientific content requires high legibility, and cramped text undermines credibility.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12); excessive shadow depth creates visual noise and conflicts with the clean, institutional aesthetic.
• Don't mix serif and sans-serif fonts within the same component (e.g., serif button text); maintain clear functional separation between headline and UI typography.