# Prompt for AI Builder: Redesign CitationEdge Report UI

Copy everything below into your AI builder (v0, Claude Code, Cursor, Lovable, etc.) as a single prompt.

---

## PROMPT START

You are redesigning the UI of a research paper analysis report called **CitationEdge**. The current output is a wall of plain text/markdown. I want it rebuilt as a single, clean, professional, print-ready page that follows the exact visual language of a Turnitin-style "Originality Report" (reference screenshot attached: `Screenshot_2026-07-27_at_9_41_35_PM.png`).

Build this as a **single self-contained HTML file** (inline CSS, no external frameworks except a system font stack), so it can be rendered directly in a browser or exported to PDF. Use a light background, generous whitespace, and thin horizontal rule dividers — not cards, not shadows, not gradients. The reference screenshot's aesthetic is: minimal, editorial, lots of air, big colorful numbers, small caps gray labels, numbered color-chip badges next to each list item, and thin 1px gray dividers between every row.

### 1. Global design tokens

- Font: a clean humanist sans-serif (e.g. `-apple-system, "Segoe UI", Helvetica, Arial, sans-serif`).
- Background: white (`#FFFFFF`).
- Body text: dark gray (`#1a1a1a`), secondary/meta text: medium gray (`#6b6b6b`).
- Dividers: `1px solid #e5e5e5`, full width, generous vertical padding (24–32px) between sections.
- Section eyebrow labels (e.g. "ORIGINALITY REPORT" in the reference) are small, bold, uppercase, letter-spaced, and colored — reuse this pattern for every section header (e.g. "EXECUTIVE SUMMARY", "RESEARCH CLAIMS", "CLAIM VERIFICATION", "COUNTERFACTUALITY ANALYSIS", "AI TEXT DETECTION", "CITATION GAPS", "ARGUMENTATION ANALYSIS").
- Big numbers (scores/percentages) use the same oversized, thin-weight numeral treatment as the reference screenshot's "11%, 10%, 8%, 8%" row — huge number, small percent sign superscript, gray caption underneath.
- **Numbered square badges** (this is a required, exact component — matches the "1, 2, 3…" colored boxes to the left of each source row in the reference screenshot): a solid-fill square, ~40x40px, ~6px corner radius, filled with one flat color (no gradient), containing a single bold white numeral centered inside, font-size ~18–20px. Each item in an ordered list (claims, citation gaps, counterfactuality entries) gets one of these badges on its far left, vertically centered against the row's title text. The fill color is assigned per-category exactly as in the reference (each category/type gets its own solid color from the palette — see section 4), not randomized. Reuse this identical badge component everywhere a numbered/ranked list appears in the report.

**No emojis anywhere in the UI.** Every place an emoji might naturally be used as a status indicator (verdicts, pass/fail states, AI-detection results, severity flags) must instead use one of the following, consistently, throughout the document:
- A small inline **SVG icon** (16–20px, single-color stroke, 1.5–2px stroke-width, rounded line caps — a minimal outline icon set in the style of Lucide/Feather icons). Define a small internal icon library as inline `<svg>` symbols (e.g. `check-circle`, `alert-triangle`, `x-circle`, `info`, `shield-check`) and reference them via `<use>` so the icon style stays perfectly consistent.
- Paired with a **colored status pill** (rounded rectangle, 4px border-radius, colored background at ~10% opacity, colored text/border at full opacity, uppercase small text, e.g. "LIKELY HUMAN-WRITTEN", "UNVERIFIED", "SUPPORTED", "CONTRADICTED"). Icon sits to the left of the pill text, same color as the pill's text/border.
- Never use raw emoji characters (no 🟢, ✅, ⚠️, etc.) in the HTML output under any circumstances — they read as unpolished. The icon + pill combination replaces every one of these.

### 1a. Logo / masthead

- Design a small, professional **wordmark/logo lockup** for "CitationEdge" to sit in the top-left of the header, above or beside the paper title — not a static emoji or stock icon.
- Construct it as inline SVG: a simple geometric mark (e.g. two overlapping/interlocking rounded shapes suggesting a "citation link" or a stylized "C" formed from a bracket + underline, evoking footnote/citation marks) at ~28–32px, paired with the wordmark "CitationEdge" in medium-weight letter-spaced type immediately to its right.
- The mark should use a single accent color from the palette (see 1b) — no gradients, no drop shadows, no photographic/emoji imagery.
- Reserve this masthead treatment exclusively for the top of the page; do not repeat the full logo elsewhere (a small favicon-style version of just the mark may repeat in the footer next to "Generated by CitationEdge").

### 1b. Color & border system

Define a single restrained palette and use it identically everywhere so nothing looks ad hoc:
- **Accent/brand color** (used for the logo mark, links, section eyebrow labels, and the top divider under the header): one deep indigo or slate-blue, e.g. `#2E3A8C` or similar — pick one and use it everywhere brand color is needed.
- **Status colors** (used only for pills/icons/badges, never for large decorative fills): green `#1D8348` (supported/human/good), amber `#B8860B` or `#C77800` (fair/overstated/medium severity), red `#C0392B` (contradicted/poor/high severity), neutral gray `#6b6b6b` (unverified/low severity/background).
- **Borders/dividers**: exactly two weights, reused everywhere — hairline `1px solid #e5e5e5` for in-section row dividers, and a slightly heavier `2px solid #1a1a1a` (or the accent color) only for the single rule under the masthead. Never use box-shadows, drop shadows, or card elevation — this is a flat, line-based report layout, not a dashboard of cards.
- Numbered badges (section 4) and status pills both draw their colors from this same palette so the whole page reads as one coherent system rather than a mix of arbitrary colors per section.

### 2. Page header

- Top-left: paper title, large, regular weight (matches "Research_Proposal (1).pdf" style in reference — plain black text, not bold, ~28–32px).
- Directly below: thin gray divider (2px, slightly heavier than section dividers).
- Small metadata line under the divider: "CitationEdge Analysis Report · Smoke Test Report · [date/time]" in gray, small caps or regular small text.

### 3. Top score band (mirrors the "11% / 10% / 8% / 8%" row)

Render exactly 4 (or 5, if space allows) big colored stat blocks in a horizontal row, each with:
- A large colored number + "%" or "/10" (color-coded by score band: green ≥7.5 "GOOD", yellow/amber 5–7.4 "FAIR", red <5 "POOR")
- A small gray uppercase caption underneath (e.g. "OVERALL SCORE", "LITERARY SCORE", "ARGUMENT SCORE", "CITATION COMPLETENESS", "VERIFICATION SCORE")
- Map the report's existing fields: Overall 5.2/10 (FAIR), Literary 5.9/10 (FAIR), Argument 7.2/10 (GOOD), Citation Completeness 7.7/10 (GOOD), Verification Score 0.0/10 (POOR).
- Full-width thin divider below this row, same as reference.

### 4. "RESEARCH CLAIMS" section (mirrors "PRIMARY SOURCES" list)

For each claim, render a row identical in structure to the reference's numbered source rows:
- Left: the numbered square badge component defined in section 1 (solid color square, white bold numeral, ~40px) with the claim number (1, 2, 3…). Badge color maps to claim type:
  - BREAKTHROUGH → red/orange
  - SIGNIFICANT → purple/magenta
  - METHODOLOGICAL → blue/indigo
  - INCREMENTAL → teal
  - BACKGROUND → green
- Middle: the claim text as the "title" (colored like a link in the reference, e.g. dark blue/purple), with the claim type label underneath in small gray caps (this replaces "Internet Source"/"Student Paper" captions).
- Right-aligned: the confidence percentage in large plain numerals (e.g. "70%"), same visual weight as the "5%, 2%, 1%…" column in the reference.
- Thin divider between each claim row.

### 5. "CLAIM VERIFICATION" section

Small summary strip at top: "Supported 0 · Contradicted 0 · Unverified 5" as three inline stat labels (gray text, bold numbers).
Below, a clean two-column table (not the boxy grid style) with subtle row dividers only (no vertical lines, no shading):
- Column 1: Claim (truncate to 1–2 lines, full text on hover/tooltip optional)
- Column 2: Verdict — as a small colored pill/tag (e.g. gray pill for "UNVERIFIED", green for "SUPPORTED", red for "CONTRADICTED")
- Column 3: Reasoning, small gray text

### 6. "COUNTERFACTUALITY ANALYSIS" section

- Lead with one big colored number block (same style as top score band): "0.24 — ACCURACY SCORE" plus a secondary caption chip "MOST COMMON TYPE: FACTUAL".
- A short "Strengths" paragraph in plain body text.
- Below, a simple list (same numbered-badge-row pattern as claims) of each analyzed claim with its Type (as a small colored tag: FACTUAL = green, OVERSTATED = amber/red) and Score (right-aligned numeral).

### 7. "AI TEXT DETECTION" section

- Mirror the reference's circular/percentage emphasis: one large stat "AI Probability: 1.0%" with a small horizontal two-tone bar (Human vs AI, like a mini progress bar, mostly filled green/human).
- Verdict shown as the icon + status pill component from section 1 (a `check-circle` outline icon in green, next to a green pill reading "LIKELY HUMAN-WRITTEN") — no emoji.
- Secondary line: "Confidence: 98.0% · Method: text_fastdetectgpt · Human-authored: 99.8% confidence · Processed in 8091ms" in small gray text.

### 8. "ORIGINAL PAPER WITH AI ANALYSIS" section

- Render each paper section (abstract, introduction, results, references) as a labeled block: bold small-caps section name + "Human: X% · Nw words" meta line, then the paragraph text with a **left border accent** (not full highlight) colored green for human-attributed spans and red/orange for AI-attributed spans, so it stays readable rather than looking like a highlighter mess. Keep this typographically calm — body text size, normal line height (1.6), max-width ~720px for readability.

### 9. "CITATION GAPS" section

Same numbered-badge-row pattern as claims, badge color mapped to severity:
- HIGH → red
- MEDIUM → amber
- LOW → gray/blue
Title = the gap description, caption underneath = severity level in small caps.

### 10. "ARGUMENTATION ANALYSIS" section

Two-column layout (Strengths / Weaknesses) with a short intro paragraph above. Each column is a simple bulleted list, no boxes — consistent with the airy, line-based aesthetic of the rest of the page.

### 11. Footer

Centered, small gray text: "Generated by CitationEdge — Agentic Research Paper Analysis Pipeline"

### 12. Responsiveness & export

- Design should read as one continuous scrollable page, section by section, in this exact order: Header → Top Score Band → Executive Summary (plain paragraph) → Extracted Keywords (as small gray pill tags, wrapped) → Research Claims → Claim Verification → Counterfactuality Analysis → AI Text Detection → Original Paper with AI Analysis → Citation Gaps → Argumentation Analysis → Footer.
- Must look correct both on screen and when printed/exported to PDF (avoid fixed viewport heights, avoid overflow: hidden on the main container).
- Keep the whole layout single-column, max-width ~900px, centered, consistent with the reference screenshot's proportions.

Use the data from the attached CitationEdge report PDF (`citationedge_report_job_bf1e4fea.pdf`) to populate all real content — do not use placeholder lorem ipsum.

## PROMPT END

---

**How to use this:** paste the block between "PROMPT START" and "PROMPT END" into your AI builder of choice, and attach both the screenshot and the CitationEdge PDF (or paste its extracted text) alongside it so the tool has the exact source data to populate into the new layout.