Sophon

Overview

Sophon is an AI research discovery platform that transforms the overwhelming landscape of academic papers into a navigable, structured catalog. The design system embodies 'Minimalist Clarity'—a philosophy that prioritizes information hierarchy, scanability, and purposeful restraint. Every visual element serves a function: the clean white canvas (rgb(255, 255, 255)) provides breathing room, the cool blue accent (primary: #2383e2) guides attention to actionable research, and the warm secondary accent (#9f2319) highlights critical metadata. The brand personality is precise, authoritative, and approachable—speaking to researchers who value speed and accuracy. Voice: direct, data-driven, never flowery. Example: 'SkillOpt introduces a self-evolving agent framework—see the 11 benchmarks it uses.'

Colors

The color system balances a neutral, light foundation with strategic accent colors that guide user attention. Primary (#2383e2) is the signature accent used on CTAs, active navigation states, and interactive elements—it conveys trust and intellectual rigor. Secondary (#9f2319) is a warm, earthy accent reserved for critical metadata, error states, and secondary emphasis; it creates visual tension against the cool primary. Tertiary (#f99c00) is a vibrant, energetic accent used for badges, tags, and highlights that denote trending or featured content. The surface stack is anchored in pure white (#ffffff) for the main canvas, with carefully calibrated grays for containers and hover states: surface-container (#e9ecef) for interactive backgrounds, surface-container-high (#e0e0dd) for elevated su

Typography

The type system uses Inter exclusively, a humanist sans-serif that balances precision with warmth—essential for a research platform where clarity is non-negotiable. Display (56px, 700 weight, -0.02em tracking) is reserved for page titles and hero moments; Headline-lg (32px, 700 weight) anchors major sections like 'Papers'; Headline-md (28px, 600 weight) breaks up content zones. Body-lg (16px, 400 weight, 24px line-height) is the primary reading size for paper descriptions and metadata; Body-md (14px, 400 weight, 20px line-height) is the default UI text size. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons and interactive labels to ensure they stand out; Label-sm (12px, 500 weight, 0.02em tracking) is applied to badges, tags, and secondary metadata. All headings use -0.01em

Layout

The layout uses a fixed 12-column grid with a 248px left sidebar (collapsible on mobile) and a 1280px max-width container for the main content area. The sidebar provides persistent navigation and context; the main rail uses 12px gutter spacing between columns. Page sections are separated by 16px (lg spacing) vertically, creating a rhythm that feels spacious without being wasteful. The Papers page uses a two-column layout: the left column (8 columns) displays the paper list with 12px padding and 14px vertical rhythm between cards; the right column (4 columns) shows a 'Top domains' sidebar with 12px internal spacing. Cards use 12px padding (md spacing) and 4px border-radius for a subtle, refined appearance. The container-max-width of 1280px ensures content never feels stretched on ultra-wide

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): flat white surface (rgb(255, 255, 255)) with no shadow, used for the main canvas and default cards. Level 2 (Elevated): cards and interactive elements use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(159, 159, 159, 0.5), creating a gentle lift. Level 3 (Modals/Popovers): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) with a 1px border, reserved for dropdowns and overlay surfaces. Hover states elevate cards from Level 1 to Level 2 via a smooth transition (150ms

Shapes

The shape system follows 'Refined Minimalism'—subtle rounding that softens the interface without sacrificing precision. Buttons and interactive elements use 8px border-radius (lg) to feel approachable yet professional. Cards and containers use 4px border-radius (DEFAULT) for a clean, structured appearance that aligns with the data-driven nature of the platform. Input fields use 6px border-radius (md) as a middle ground between buttons and cards. Badges and tags use 9999px border-radius (full) to create visual distinction and signal that they are non-interactive metadata. Sidebar items and list

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#2383e2), textColor: white, 8px 16px padding, 32px height, and 8px border-radius. On hover, the background shifts to #1a6bc4 (a 10% darkening) with a smooth 150ms transition. On active/press, it darkens further to #0d47a1. Button-secondary uses a transparent background with a 1px border at {colors.outline-variant} (#d0d0d0) and on-surface text; on hover, the background becomes {colors.surface-container-low} (#f0f0ed). Button-ghost is fully transparent with no border; on hover, it gains a subtle background at surface-container-low. All buttons use label-md typography (14px, 600 weight) and apply a focus ring of 2px solid #2383e2 with 2px offset on keyboard focus.

###

Do's and Don'ts

**Do**

• Do use primary (#2383e2) exclusively for CTAs, active states, and key interactive elements—never dilute it with secondary colors on the same component.
• Do apply 12px (md spacing) between major content sections and 8px (sm spacing) between related items to maintain visual rhythm and scanability.
• Do use label-md (14px, 600 weight) for all button text and interactive labels to ensure they command attention and remain legible at small sizes.
• Do pair cards with a 1px border at outline-variant (#d0d0d0) and subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to create depth without visual noise.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all hover and focus state changes to provide smooth, predictable feedback.

**Don't**

• Don't use secondary (#9f2319) or tertiary (#f99c00) as primary CTAs—reserve them for metadata, badges, and secondary emphasis only.
• Don't apply border-radius greater than 8px on buttons or inputs; it weakens the structured, data-driven aesthetic and reads as overly playful.
• Don't use body-md (14px) for button labels; always use label-md (14px, 600 weight) to ensure buttons are visually distinct from body text.
• Don't mix shadow depths within a single interaction zone (e.g., don't use Level 3 shadows on cards in a list); maintain consistent elevation hierarchy.
• Don't apply more than one accent color (primary, secondary, or tertiary) to a single component; it creates visual confusion and dilutes the color system's effectiveness.