Opennote

Overview

Opennote is an AI-powered note-taking platform designed for students and learners who demand both intellectual rigor and visual clarity. The brand embodies "Refined Minimalism"—a design philosophy that strips away unnecessary ornamentation while preserving warmth through carefully chosen accents and serif typography. The interface evokes the feeling of a premium paper notebook elevated by intelligent technology: clean white surfaces (rgb(255, 255, 255)), deep charcoal text (rgb(10, 10, 10)), and a signature orchid-purple primary accent (rgb(157, 23, 160)) that appears on CTAs and interactive moments. The emotional response is one of calm focus—the UI gets out of the way so users can concentrate on learning.

The brand voice is conversational yet authoritative, never patronizing. Opennote speaks to ambitious learners with respect: "The notebook that thinks with you" positions AI as a collaborative partner, not a replacement. Vocabulary favors clarity over jargon ("generate flashcards" not "instantiate spaced-repetition artifacts"). The tone is encouraging without being saccharine—think of a mentor who believes in your potential. Example sentence in brand voice: "Your notes just became smarter. Generate practice problems, video summaries, and study guides—all from what you've already written."

Colors

The color system is built on a foundation of near-white surfaces and deep, intentional accents. Primary surface is pure white (#ffffff) with a carefully calibrated gray scale (--gray1 through --gray12, ranging from hsl(0, 0%, 99%) to hsl(0, 0%, 9%)) that provides visual hierarchy without introducing color noise. The primary accent is orchid-purple (#9d17a0, rgb(157, 23, 160))—a bold, energetic color reserved exclusively for call-to-action buttons, interactive focus states, and brand moments. This color appears in the header's "Get started free" button and drives user attention without overwhelming the minimalist aesthetic. Secondary accent is a teal-green (#1a8b7e) used for success states, confirmations, and supporting UI elements. Tertiary accent is a vibrant sage-green (#379f57) for addi

Typography

The type system pairs serif and sans-serif to create visual sophistication and hierarchy. Headlines and display text use IowanOld serif (fontFamily: IowanOld, serif) at 48–60px with 400 weight and -0.04em letter-spacing, creating an elegant, timeless quality that signals premium positioning. Body and UI text use SuisseIntl sans-serif (fontFamily: SuisseIntl, ui-sans-serif, system-ui) at 16–18px with 400 weight and 0.01–0.02em letter-spacing, ensuring readability and a contemporary feel. Labels and buttons use SuisseIntl at 12–14px with 500–600 weight and 0.02–0.03em letter-spacing for clarity and visual emphasis. Line-height is generous (28px for body-lg, 24px for body-md) to support comfortable reading on screen. When placing small labels over busy backgrounds or colored surfaces, apply t

Layout

The layout follows a 12-column grid system with a maximum container width of 1400px, allowing content to breathe on large screens while remaining focused on medium and small viewports. The page rhythm uses a consistent spacing scale: lg (40px) for major section separation, md (24px) for component padding and inter-element spacing, and sm (12px) for internal component spacing. The hero section centers the main headline ("The notebook that thinks with you") with ample vertical breathing room (80–120px top/bottom padding) to emphasize the core value proposition. Navigation sits in a fixed header with 24px gutter spacing on either side, maintaining visual hierarchy without consuming excessive vertical real estate. Cards and content blocks use md (24px) padding internally, with lg (40px) gaps b

Elevation & Depth

Depth is achieved through subtle shadows and border treatments rather than dramatic layering. The base elevation uses no shadow (surface-level elements like body text and backgrounds). Level 1 (cards, input fields) applies elevation.sm: 0 1px 2px rgba(0, 0, 0, 0.06)—barely perceptible, suggesting the element is slightly raised. Level 2 (hovered cards, modals) applies elevation.md: 0 4px 12px rgba(0, 0, 0, 0.1)—a soft, diffuse shadow that creates clear separation from the background. Level 3 (dropdowns, floating elements) applies elevation.lg: 0 16px 40px rgba(0, 0, 0, 0.12)—a larger shadow wit

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, avoiding the overly playful aesthetic of fully rounded designs while rejecting harsh 90-degree angles. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a friendly, approachable feel. Cards and containers use lg (1rem) as well, maintaining visual consistency. Input fields and smaller components use DEFAULT (0.5rem / 8px) for a more compact, technical appearance. Badges and pills use full (9999px) for a distinctly rounded, status-indicator quality. This graduated approach—lg

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#9d17a0) background with white text, 12px 24px padding, 48px height, and lg (1rem) border-radius. On hover (button-primary-hover), the background darkens to #8a0a8d and a soft shadow (0 4px 12px rgba(157, 23, 160, 0.2)) appears, creating depth. On active (button-primary-active), the background darkens further to #7a0a7d and applies transform: scale(0.98) for tactile feedback. The button-secondary component uses the inverse-surface color (#191919) for a dark, high-contrast alternative, with the same padding and height. Button-ghost provides a transparent, bordered variant with {colors.outline-variant} (#d4d4d4) border, useful for secondary actions. All buttons apply transitio

Do's and Don'ts

**Do**

• Do use the orchid-purple primary (#9d17a0) exclusively on CTAs, focus states, and brand moments—never on backgrounds or neutral UI.
• Do apply lg (1rem) border-radius to primary buttons and cards; use DEFAULT (0.5rem) for inputs and secondary components to maintain visual hierarchy.
• Do pair IowanOld serif headlines with SuisseIntl sans-serif body text; the serif/sans contrast signals "established yet innovative."
• Do use the gray scale (--gray1 through --gray12) for all neutral surfaces and text; avoid introducing additional colors into the palette.
• Do apply elevation.md (0 4px 12px rgba(0, 0, 0, 0.1)) on hover states; shadows communicate interactivity without color changes.
• Do maintain md (24px) padding inside cards and lg (40px) spacing between sections; white-space is a design element, not wasted space.

**Don't**

• Don't use the primary color (#9d17a0) on backgrounds, body text, or non-interactive elements—reserve it for actions and focus states only.
• Don't apply full (9999px) border-radius to buttons or cards; use lg (1rem) for primary components and DEFAULT (0.5rem) for secondary.
• Don't mix serif and sans-serif within a single text block; use serif for headlines (IowanOld) and sans-serif for body (SuisseIntl).
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error, and the gray scale); consistency builds trust.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use rgb(10, 10, 10) for text and #ffffff for surfaces to reduce eye strain.
• Don't apply shadows larger than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) on interactive elements; excessive depth breaks the minimalist aesthetic.