Chalkmark

Who it is for

• Classroom teachers
• Tutoring business owners
• Department heads aligning rubrics
• Independent educators launching a student portal

Layout

1. Top nav: serif wordmark left; Product / Solutions (dropdown) / Pricing centered; sign-in link and black pill CTA right
2. Split hero: bold headline with italic emphasis words, grey subcopy, black pill primary CTA + outlined secondary CTA, avatar stack social proof; right side faded classroom photo bleeding off edge; scroll mouse cue
3. Feature grid of rounded cards with icon tiles (grading modes, standards, insight over oversight, integrations)
4. Audience cards (independent educators, schools, tutoring) with 'Coming soon' badges
5. Pricing and footer
6. App: class dashboard, split-view grading, gradebook, assessment builder, rubric library, analytics, student portal

Palette

calm, warm, humane, editorial, trustworthy. A quiet reading room for grading instead of a noisy LMS.

• background warm paper#fbf8f4
• text#1f1f1f
• primary (black)#1f1f1f
• card#ffffff
• secondary sand#f3f0ed
• accent butter yellow#f8e2a5
• ring gold#af840e

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type

Display

Helvetica Neue SemiBold 60px, -1.8px tracking, with italic emphasis words; wordmark in Libre Baskerville (Helvetica Neue is not on Google Fonts; a vibld project loads Inter)

Body

Inter 16px grey; buttons Inter 14px medium

A neutral grotesk plus a bookish serif wordmark reads as editorial and academic without being stuffy.

Spacing and imagery

1200px container, 1rem radius cards, pill buttons, soft 1px borders, generous section padding (~120px), icon tiles in 48px rounded squares.

Soft, desaturated classroom photography faded into the paper background; muted pastel icon tiles (butter, blue-grey, sage); small avatar stack.

Components

• Top nav with dropdown
• Hero with italic emphasis and avatar stack
• Feature cards with icon tiles
• Audience cards with 'Coming soon' badges
• Class cards with banner + emoji
• Split-pane grading workspace
• Annotation toolbar (multi-color highlights, comments)
• Rubric panel with criteria levels
• Spreadsheet gradebook with color-coded cells
• Drag-and-drop assessment builder
• Rich-text lesson editor
• Submission upload with progress
• Analytics charts
• Mobile bottom tab bar

Interactions

• Resizable split panes
• Select text to highlight/comment in colors
• Click rubric level to score; total updates
• Gradebook cell edit, saved views, filters
• Drag to reorder questions
• Upload with progress and retry
• Rubric version history and share
• Dark mode and reduced-motion support

Data

• Class{id, owner_id, name, emoji, banner_url, term}
• Student{id, class_id, name, email}
• Assignment{id, class_id, title, brief (rich text), due_at, rubric_id}
• Rubric{id, owner_id, title, version, criteria[{name, levels[{label, points, descriptor}]}]}
• Submission{id, assignment_id, student_id, file_path, text, submitted_at, status}
• Annotation{id, submission_id, range, color, comment}
• Grade{id, submission_id, rubric_scores jsonb, total, feedback, released_at}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Chalkmark**, a calm grading and feedback workspace for teachers and small tutoring businesses. Educators set up classes, build assignments and rubrics, read submissions side by side with the rubric, annotate them, release feedback, and see each student's growth over time.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Tiptap for briefs and feedback, react-resizable-panels for the grading split view, dnd-kit for the assessment builder, TanStack Table for the gradebook, Recharts for analytics, react-hook-form + zod, Framer Motion for gentle transitions and date-fns. Use Supabase for Auth (teacher and student roles), Postgres for classes, rubrics, submissions and grades, Storage for uploaded work, and Edge Functions for CSV roster import and grade export.

### Pages & layout
1. **Landing**:
   - Nav: a serif wordmark, Product / Solutions / Pricing, Sign in, and a black pill CTA.
   - Split hero: a bold headline with two italic emphasis words, subcopy, two pill CTAs and an avatar-stack line, beside a soft classroom photo that fades into the paper background.
   - Then a feature card grid, audience cards (with "Coming soon" badges where relevant), pricing and a footer.
2. **Teacher app**:
   - Class dashboard: cards with emoji and banner.
   - Class page: assignments and roster.
   - Grading: submission on the left with an annotation toolbar; rubric, score and feedback on the right.
   - Gradebook: students × assignments, color-coded.
   - Plus the assessment builder, rubric library with versions, and analytics.
3. **Student portal**: upload work, see released feedback and annotations.
4. **Mobile**: a frosted bottom tab bar replaces the sidebar.

### Design system
- Light: `--background: #fbf8f4`, `--foreground: #1f1f1f`, `--primary: #1f1f1f`, `--card: #ffffff`, `--secondary: #f3f0ed`, `--accent: #f8e2a5`, `--ring: #af840e`, `--border: #ebe7e0` (decorative), `--input-border: #9c8866`, `--muted-fg: #5f5a54`.
- Annotation colors: butter `#f8e2a5`, sky `#cfe3f7`, sage `#d6ead9`, rose `#f6d5d5`.
- Dark: `#161514` background, `#f1ede7` text.
- Fonts: Inter for UI (body 16px, line-height 1.6, 70ch max; nothing below 12px); Libre Baskerville for the wordmark and occasional pull quotes; headings in Inter 600 at -0.03em (48-60px on marketing, 24-32px in-app).
- Spacing on a 4px base; radius 16px on cards and full on buttons.
- Shadows: very soft (`0 1px 2px rgb(0 0 0 / .04)`).
- Motion: 200ms ease.

### Components & interactions
ClassCard, SplitGrader (resizable, remembers widths), AnnotationLayer (select text, choose a color, add a comment; edit and delete; keyboard alternative through a "Comment on selection" button), RubricPanel (radio levels per criterion, live total, unsaved indicator), FeedbackEditor (snippets), Gradebook (inline edit, saved views, filters, empty cells shown as "–"), AssessmentBuilder (drag handles, keyboard reorder, add/delete question), UploadDropzone (progress, retry, type errors), ReleaseButton (confirm dialog), AnalyticsCards. Provide loading skeletons and friendly empty states ("No submissions yet").

### Data & state
Tables: `classes`, `enrollments(class_id, student_id)`, `assignments`, `rubrics` (with a `version` column and a `rubric_versions` history table), `submissions`, `annotations(submission_id, start, end, color, comment)`, `grades(submission_id, scores jsonb, total, feedback, released_at)`. Grades stay hidden from students until `released_at` is set. Seed one fictional class of 20 invented students with mixed performance.

### Accessibility
Black on paper is 15.6:1 and grey subcopy uses `#5f5a54` (6.5:1); the focus ring is a deepened gold `#af840e`. Annotations use a pattern or underline as well as color, and each carries an accessible description. The rubric is a set of radio groups. Resizable handles work with the arrow keys. The gradebook uses a proper table with header scopes. Charts include data tables. Honor reduced motion and dark-mode preferences.
Verified contrast: body: #1f1f1f on #fbf8f4 = 15.6:1; subcopy: #5f5a54 on #fbf8f4 = 6.4:1; white on primary: #ffffff on #1f1f1f = 16.5:1.

### Security
RLS: teachers access only their own classes; students see only their own submissions and grades after release, and only for classes they are enrolled in. Use a private Storage bucket with signed URLs, a 25 MB limit and an allow-list (PDF, DOCX, images). Sanitize Tiptap HTML with DOMPurify before rendering. Validate imports in an Edge Function with zod. Minimize student PII. Keep service keys server-side.

### Performance & SEO
Code-split the teacher app, the student portal and the landing page. Lazy-load Tiptap and Recharts. Virtualize large gradebooks. Serve the hero photo as optimized WebP/AVIF. Add meta/OG tags on marketing pages and noindex app routes.

### Guardrails
- Write fresh copy; use royalty-free classroom imagery with no identifiable minors, or illustrations instead.
- Label the sample social proof as sample.
- Avoid ranking students against each other.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) a teacher grades a submission with a rubric and annotations; (2) students see feedback only after release; (3) gradebook totals match the rubric scores; (4) RLS isolates classes; (5) grading works fully by keyboard.

Open the builderAll templatesThis palette on its own