UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
The UI Component Library for Marginalia provides a dense, high-contrast set of React components built with Vite and Tailwind CSS. It implements "The Reading Desk" design philosophy, focusing on technical clarity and efficiency for developers reading machine-generated code reviews. The library prioritizes flat surfaces, tonal depth, and functional status colors over decorative elements.
Sources: DESIGN.md:5-20, PRODUCT.md:38-40
Design Foundations
The system uses a neutral graphite palette and specific signal colors to communicate state. Typography relies on the system sans stack for the interface and mono for code identifiers.
Color Palette
The library employs oklch colors for precision and accessibility. Status is always double-coded, pairing color with icons or text.
| Category | Name | Value (Light / Dark) | Purpose |
|---|---|---|---|
| Primary | Signal Blue | oklch(62.3% 0.214 259.815) | Selection, unread, focus, active tabs |
| Primary | Action Blue | oklch(54.6% 0.245 262.881) | The single primary button in view |
| Secondary | Changes Red | oklch(57.7% 0.245 27.325) / oklch(70.4% 0.191 22.216) | Critical findings, rejection |
| Secondary | Approved Green | oklch(59.6% 0.145 163.225) / oklch(76.5% 0.177 163.223) | Approval, success states |
| Secondary | Important Amber | oklch(55.5% 0.163 48.998) / oklch(87.9% 0.169 91.605) | Important findings |
| Neutral | Graphite Surface | #ffffff / oklch(21% 0.006 285.885) | Cards, panels, modals |
Sources: DESIGN.md:37-67, studio/src/stories/Foundations.stories.tsx:12-30
Spacing and Radii
Layout rhythm follows a 4px base increment. Corners are moderate to maintain a technical, non-playful aesthetic.
- xs: 4px
- sm: 8px (Radius for controls/inputs)
- md: 12px (Radius for cards/modals)
- lg: 16px (Card padding)
- xl: 24px (Page gutters)
Sources: DESIGN.md:92-99, studio/src/stories/Foundations.stories.tsx:81-99
Core Components
Buttons
Buttons are 8px rounded controls with 14px type. The Button component supports multiple variants and sizes, integrating with lucide-react for iconography.
The flow above describes the visual and functional configuration of the button system.
Sources: DESIGN.md:128-135, studio/src/components/ui/Button.tsx:1-40
Badges and Verdicts
Badges provide metadata and status at a glance. Verdict badges specifically communicate the review outcome using icons and color codes.
- VerdictBadge: Displays the review status (
APPROVE,REQUEST_CHANGES,OTHER). - RiskBadge: Indicates the risk level (
low,medium,high) along with a rationale.
Sources: studio/src/components/ReaderHeader.tsx:23-24, DESIGN.md:144-147
Markdown Rendering
The library includes specialized markdown components to handle machine-written reports.
- Md: A standard prose wrapper using
react-markdownandrehype-highlightfor syntax highlighting. - GlanceBody: A specialized component that parses "At a Glance" sections into a definition list (DL) for rapid scanning of What, Why, Risk, and Blocking factors.
Sources: studio/src/components/ReviewMarkdown.tsx:32-75
Layout and Composition
The interface is structured for high density, featuring a sticky top bar and a strip for open reviews.
This diagram illustrates the hierarchical layout structure of the Marginalia studio app.
Sources: DESIGN.md:107-115
Header Components
The ReaderHeader component serves as the primary control point for an open review. It consolidates the title, verdict, risk level, and action buttons such as "Submit review" and "Re-run review".
| Element | Description |
|---|---|
VerdictBadge | Shows the final bot verdict. |
RiskBadge | Displays the risk level and rationale factors. |
Submit Button | Triggers the review publication to GitLab. |
Version Select | Allows switching between different iterations of the same review. |
Sources: studio/src/components/ReaderHeader.tsx:9-55
Summary
The UI Component Library enables a fast reading experience by using a strict, high-contrast design system. It avoids playful or decorative elements, ensuring that the developer's attention remains on technical findings and code risk. Components are designed to be accessible (WCAG 2.2 AA) and responsive to dark/light theme preferences determined by the operating system.
Sources: DESIGN.md:18-28, PRODUCT.md:79-82