Studocu

Overview

Studocu is an academic knowledge-sharing platform that transforms student collaboration into a trusted, accessible resource hub. The design system embodies 'Functional Minimalism'—a philosophy that prioritizes clarity, efficiency, and institutional trust through restrained use of color, generous whitespace, and a professional typographic hierarchy. The interface serves millions of students seeking study materials, so every visual decision must communicate reliability and ease of navigation without distraction. The brand personality is helpful, straightforward, and academically rigorous: never flashy, always purposeful. Example voice: 'Find verified study notes from your course in seconds.'

Colors

The color palette centers on a clean, neutral foundation with a single accent: Primary Blue (#3092fa) serves as the sole interactive accent, reserved exclusively for call-to-action buttons, links, and focus states—this restraint builds trust and prevents cognitive overload. The surface stack progresses from pure white (#ffffff) for primary content areas through subtle grays (#f6f7fb, #e9ecef, #d3d9e0) for container separation and depth. On-surface text is a professional slate (#2f3e4e) at 16px/400 weight for body copy, with a lighter variant (#4c5966) for secondary information. The outline color (#2f3e4e) is used for borders and focus rings at 2px width with a 2px offset (box-shadow: 0 0 0 2px #f6f7fb). Error states use a clinical red (#d32f2f) only when validation fails. Avoid using prima

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that conveys modern professionalism without sacrificing readability. Display (48px/700) anchors hero sections; Headline-lg (35px/400) titles major content blocks; Body-md (16px/400) is the workhorse for all body text and achieves 150% line-height (24px) for comfortable reading on screens. Label-md (16px/500) marks interactive elements like buttons and form labels. Letter-spacing is minimal (0 to -0.02em) to maintain density while preserving legibility. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all text to ensure crisp rendering across browsers. For small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contrast.

Layout

The layout uses a 12-column grid with a max-width of 1280px, centering content on larger screens. The header is fixed at 72px height with 16px vertical padding and 32px horizontal padding (media query: 768px+ maintains this; mobile uses 16px gutter). Sidebar width is 300px on desktop, collapsing to 87px on tablet (768px+). Content padding follows the spacing scale: 24px (md) for card interiors, 40px (lg) for section separation, and 64px (xl) for major layout breaks. Whitespace is intentional—never less than 24px between major sections. The grid uses CSS Grid with gap: 24px for card layouts and flex gap: 16px for inline components. Container queries are not used; media breakpoints are 768px (tablet) and 1200px (desktop).

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. Level 1 (Base): pure white background (#ffffff) with no shadow. Level 2 (Cards/Containers): 1px solid border at #d3d9e0 (surface-container-highest) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04). Level 3 (Modals/Popovers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border at #d3d9e0. The header uses a 1px bottom border (box-shadow: 1px 0 #d3d9e0) to separate from content. Focus states use a 2px solid outline at primary blue (#3092fa) with a 2px offset (box-shadow: 0 0 0 2px #f6f7fb). Avoid drop shadows larger th

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the professional aesthetic. Buttons use 8px border-radius (lg); cards and containers use 8px; input fields use 4px (DEFAULT); modals and popovers use 12px (xl). Pill-shaped elements (badges, tags) use 9999px (full). The rationale: 8px is the visual sweet spot between approachable and authoritative, matching the 8px spacing unit for visual harmony. Never use 0px radius (except for full-width containers); never exceed 12px for standard UI elements.

Components

Action Elements Buttons are the primary interactive component. Button-primary uses background: #3092fa, color: #ffffff, padding: 8px 20px, height: 40px, border-radius: 8px, font-size: 16px, font-weight: 500. On hover, shift to #0052cc (darker blue). Button-secondary uses transparent background with a 1px border at #6c757d and text color #4c5966; on hover, apply background: #e9ecef. Button-tertiary-gray is text-only with no background or border; on hover, apply background: #f0f2f7. All buttons use transition: background-color 150ms ease-out. Focus state: outline: 2px solid #3092fa with outline-offset: 2px.

Containers & Surfaces Cards are the primary content container: background: #ffffff, border: 1px solid #d3d9e0, border-radius: 8px, padding: 24px, box-shadow: 0 1px 2px rgba(0, 0,

Do's and Don'ts

**Do**

• Do use primary blue (#3092fa) exclusively for interactive elements (buttons, links, focus states) to maintain visual hierarchy and prevent cognitive overload.
• Do maintain 24px minimum padding inside cards and containers; use the spacing scale (12px, 24px, 40px, 64px) consistently across all layouts.
• Do apply 8px border-radius to buttons and cards; use 4px for inputs and 9999px for badges to signal component type through shape alone.
• Do use DM Sans at 16px/400 for body text with 150% line-height (24px) to ensure comfortable reading on all screen sizes.
• Do layer depth through subtle 1px borders and soft shadows (0 1px 2px rgba(0,0,0,0.04)) rather than dramatic drop shadows; keep the interface grounded.
• Do test all interactive states (hover, focus, active, disabled) with a 150ms transition on background-color and box-shadow for smooth feedback.

**Don't**

• Don't use primary blue for backgrounds, text, or non-interactive elements; reserve it exclusively for CTAs and focus indicators.
• Don't apply border-radius greater than 12px to standard UI components; it weakens the professional aesthetic and breaks visual consistency.
• Don't use shadows larger than 12px blur radius or multiple layered shadows; they create visual noise and undermine the minimalist philosophy.
• Don't mix font families; DM Sans is the only typeface; avoid system fonts, serif fonts, or display fonts in body copy.
• Don't use color alone to communicate state (error, success, warning); always pair color with an icon, text label, or border change.
• Don't add padding less than 12px inside interactive elements; maintain the 8px unit grid to preserve visual rhythm and touch target sizes.