MarkMe

Overview

MarkMe is an AI-powered instant marking platform designed for GCSE and A-Level students seeking rapid, exam-board-tailored feedback on past paper questions. The design system embodies a "Precision Minimalism" aesthetic—a clean, light-dominant interface that prioritizes clarity and accessibility while using strategic accent colors to guide user attention and celebrate achievement moments. The brand personality is direct, encouraging, and academically rigorous: MarkMe speaks to students as peers, not lecturers, using concrete language and avoiding jargon. The UI conveys speed and reliability through crisp typography (Memo font family), generous whitespace (40px gutters, 24px section padding), and purposeful use of vibrant accent colors (electric blue #1987F8 for secondary actions, vivid green #24D536 for success states, and charcoal #373737 for primary CTAs). Example sentence in brand voice: "Your answer would likely gain 25/30 marks—here's where the examiner would deduct points."

Colors

The color system is built on a light, neutral foundation with strategic accent deployment. Primary (#373737) is the charcoal used for CTAs, navigation, and body text—it commands attention without aggression. Secondary (#1987F8) is an electric blue reserved for interactive elements, feedback highlights, and data visualization; it appears in the "Estimated Mark" banner and accent underlines. Tertiary (#24D536) is a vivid green used exclusively for success states, correct answers, and positive feedback badges. The surface stack progresses from pure white (#ffffff) through subtle grays (#f7f7f7 surface-dim, #f4f4f4 surface-container-low, #eeeeee surface-container) to create depth without darkness. Error states use #ff3e3e (red) for incorrect answers or validation failures. All accent colors ar

Typography

The type system uses Memo (a custom sans-serif font family with weights 400, 500, 600, 700) across all scales to create a cohesive, friendly voice. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles; Headline-lg (43px, 700 weight, -0.02em) is used for section headings and the main H1; Headline-md (35px, 600 weight) for FAQ titles and secondary headings. Title-lg (20px, 700 weight) labels feature cards and modal titles. Body-lg (18px, 500 weight, 28px line-height) is used for hero bullet points and descriptive text; Body-md (16px, 400 weight, 24px line-height) for form labels, FAQ answers, and body copy. Label-md (14px, 600 weight, 20px line-height, 0.01em letter-spacing) is applied to button text and small UI labels; Label-sm (12px, 500

Layout

The layout uses a fluid, centered container model with a maximum width of 1200px (90vw on desktop, 100vw on mobile with 20px side padding). The page is organized in full-width sections (hero, features grid, FAQ, footer) separated by 3px borders (color #f8f8f8) and 70px vertical padding (top and bottom). The hero section uses a two-column flex layout: left column (max 600px) for headline and bullet points, right column (48% width, absolute positioned) for the interactive marking demo image. The features section employs a 3-column CSS grid (gap: 20px) that collapses to 2 columns at 1000px breakpoint and 1 column at 600px. The FAQ section uses a two-column flex layout (gap: 40px) with the title on the left (flex: 1) and accordion items on the right (flex: 1), stacking vertically below 1000px.

Elevation & Depth

Depth is achieved through subtle shadows and layered backgrounds rather than dramatic elevation changes. Level 1 (Base): pure white background (#ffffff) with no shadow. Level 2 (Cards): light gray background (#f7f7f7 or #f4f4f4) with box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06)—a soft, close shadow suggesting proximity. Level 3 (Modals/Overlays): white background with box-shadow: 0 2px 32px rgba(0, 0, 0, 0.16)—a larger, softer shadow indicating floating above the page. Feature cards use border-radius: 22px and background: rgb(247, 247, 247) with no shadow, relying on the subtle background color s

Shapes

The shape philosophy is "Soft-Technical Accessibility"—rounded corners are used consistently to soften the interface and reduce visual harshness, but not so aggressively as to sacrifice clarity or professionalism. Buttons use border-radius: 50px (full pill shape) to create a friendly, approachable CTA style; this is applied to all primary buttons (.get-started-btn, .email-btn), secondary buttons, and input fields (.email-input). Feature cards use border-radius: 22px, a moderate radius that suggests containment without appearing overly rounded. FAQ items use border-radius: 17px, slightly less r

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (.get-started-btn) uses background-color: #373737, color: white, padding: 13px 20px, border-radius: 50px, font-size: 14px, font-weight: 900, and a hover state with transform: scale(1.04) and transition: transform 0.2s ease-in-out. This scale effect provides tactile feedback without changing color, maintaining visual consistency. The secondary button (.google-btn) uses background-color: #ffffff, border: solid #eeeeee 3px, color: #373737, and the same pill shape; it includes a 20px × 20px Google icon with 8px right margin. The email button (.email-btn) mirrors the primary button styling (background: #373737, border-radius: 50px, padding: 12px 20px) and includes a 24px bottom margin for spacing. All buttons

Do's and Don'ts

**Do**

• Do use the charcoal primary (#373737) for all CTAs, navigation links, and body text to maintain visual hierarchy and ensure legibility.
• Do apply the electric blue secondary (#1987F8) sparingly—only for feedback highlights, interactive elements, and data visualization—to create focal points without overwhelming the interface.
• Do maintain 40px horizontal gutters and 24px vertical spacing between sections to create breathing room and reduce cognitive load during study sessions.
• Do use Memo font family exclusively across all scales (weights 400–700) to create a cohesive, friendly voice that resonates with students.
• Do apply box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) to cards and box-shadow: 0 2px 32px rgba(0, 0, 0, 0.16) to modals for subtle depth without visual noise.
• Do use border-radius: 50px (pill shape) for all buttons and input fields to create a unified, approachable interaction model.
• Do test all text on light backgrounds (#ffffff, #f7f7f7) to ensure the on-surface color (#373737) meets WCAG AA contrast ratios (minimum 4.5:1 for body text).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as text on the opposite color; use #373737 on white and #ffffff on dark backgrounds to reduce eye strain.
• Don't apply shadows larger than box-shadow: 0 2px 32px rgba(0, 0, 0, 0.16) or use blur effects (backdrop-filter) that obscure content clarity.
• Don't mix border-radius values across similar component types (e.g., don't use 12px on one button and 50px on another); maintain consistency within the rounded scale (sm, DEFAULT, md, lg, xl, full).
• Don't use accent colors (secondary blue, tertiary green, error red) as primary backgrounds; reserve them for highlights, badges, and interactive states only.
• Don't exceed 1200px container max-width or use asymmetrical padding that breaks the 40px gutter rhythm; maintain the grid structure across all breakpoints.
• Don't animate transitions faster than 0.2s or slower than 0.5s for UI interactions; use cubic-bezier(0.25, 1, 0.5, 1) for popUp/popOut animations (0.7s) and 0.3s ease for standard state changes.
• Don't use font weights outside the Memo family's available weights (400, 500, 600, 700); never fall back to system fonts or generic sans-serif.