Style Guide Demo 1

Style Guide

Colour Palette

Primary Colours (In Order of Dominance)

1. Black (#231f20)
2. White (#ffffff)
3. Green (#3dbf79)
4. Grey (#c3c3c3)

How Each Colour is Used

1. Black (#231f20) : The dominant colour. Sidebar background, all headings and body text on white surfaces, modal headers, and the VL circle mark on light backgrounds. Also used as the text colour inside the active navigation pill.
2. White (#ffffff) : Main content area backgrounds. All text on dark and green surfaces. The VL circle fill on dark backgrounds. Ghost button fills.
3. Green (#3dbf79) : Accent only. Active navigation pill, confirmation buttons (Login, Create Account, New Case), focus rings, and filter tags. Always pair with Black text when green is the background.
4. Grey (#c3c3c3) : Subheadings, secondary labels, placeholder text, default form input borders, and dividers.

Semantic Colours

These four colours communicate system state. They are never used decoratively. The deepfake confidence system maps directly to these colours: Error red for confirmed manipulation, Waning amber for inconclusive results, Green for authentic media.

1. Error : Red(#e53e3e)
2. Warning : Orange(#d97706)
3. Info : Blue(#2b6cb0)
4. Success : Green(#2a9a5e)

Typography

The interface uses two typefaces. Afacad handles all readable content: headings, body text, labels, and button copy. It was chosen for its clarity at small sizes and its neutral, professional character. JetBrains Mono is used exclusively for machine-generated data: file hashes, case reference numbers, model version strings, and code. The monospace face makes it immediately clear when the interface is showing a system value rather than a human-written label.

Type Scale

Style	Typeface	Size	Weight	Used for
Display	Afacad	36px	Bold 700	Page titles, splash screens
Heading 1	Afacad	28px	Bold 700	Section headings
Heading 2	Afacad	22px	Bold 700	Subsection headings
Heading 3	Afacad	18px	Bold 700	Card and panel titles
Body	Afacad	16px	Bold 700	All interface text (primary size)
Caption	Afacad	12px	Bold 700	Labels, timestamps, metadata
Overline	Afacad	11px	Bold 700	Status badges (uppercase)
Code	JetBrains Mono	13px	Regular 400	Hashes, IDs, model refs

Rules

• Afacad Bold (700) is the standard weight across the entire interface. This applies to all text from Display down to Caption.
• JetBrains Mono Regular (400) is the only exception used exclusively for machine-generated values.
• All headings use Black (#231f20) on white surfaces. All text on green surfaces uses White (#ffffff).
• Grey (#C3C3C3) is for subheadings, placeholders, and secondary labels only. Never use it for body text.
• JetBrains Mono is mandatory for any value generated by the system: hashes, IDs, timestamps, model versions.
• Body text columns should be no wider than 75 characters. Wider lines reduce reading comprehension.
• Minimum text size is 12px. Anything smaller fails readability requirements.

Logo and Iconography

Veritas Lab uses a two-component logo system. The VL monogram is a circular lettermark: the letters VL in a white circle, used wherever space is limited. The full logo lockup combines the VL circle, a green vertical divider line, and the Veritas Lab wordmark in white, all on a dark background. This lockup is the primary mark seen in the sidebar header and authentication pages.

Where Each Mark Is Used

The two marks serve different contexts. The VL circle monogram appears on login and register pages, where space is compact and the brand name is already stated on the adjacent dark panel. The full lockup is used everywhere a user is already logged in, anchoring the top of the sidebar.

Screen / Context	Mark	Placement
Login page	VL circle monogram	Top-left corner of the white login card, on a white background.
Register page	VL circle monogram	Top-left corner of the white register card, on a white background.
Login / Register dark panel	Veritas Lab wordmark	Centred on the dark decorative panel beside the login or register card. The panel colour is #2b2b2b.
All authenticated pages	Full logo lockup	Top of the black vertical sidebar: VL circle + green divider + Veritas Lab wordmark.
Browser tab / favicon	VL circle monogram	16x16 or 32x32 favicon. Never use the full lockup at favicon size.

VL Monogram

• The VL monogram is a circular mark: the letters VL inside a white circle on a Black background and black on a White background.
• Use it in the sidebar, navbar, browser tab favicon, and all compact UI contexts.
• On dark surfaces (sidebar, black backgrounds): circle is white, VL text is black.
• On white surfaces (auth page header): circle outline visible, VL text is black.
• Minimum size: 24px diameter. Do not render smaller.
• Do not distort, recolour, or add effects to the circle mark

Full Logo Lockup

• The full lockup is: [VL circle] + [Veritas Lab wordmark in white], side by side on a dark background.
• Always displayed on a dark (black) background. The dark surface is part of the lockup.
• Used in the sidebar header, the top of login and register pages, and marketing material.
• Minimum clear space on all sides: equal to the height of the VL circle.
• Do not use the full lockup as a favicon or in any space-constrained navigation context.
• Do not add decorative elements between the circle and the wordmark.

Icons

All icons use the Lucide React library (lucide.dev). Consistent sizing: 16px for inline and label icons, 20px for action button icons, 24px for navigation bar items. Any custom icons must match Lucide's 1.5px stroke weight to maintain visual consistency.

• Purely decorative icons must have aria-hidden='true'.
• Icons that carry meaning must have an aria-label or be paired with a visible text label.
• Never use an icon as the sole indicator of a state. Always pair with a text label

Design Principles

Four principles govern every interface decision in Veritas Lab. They are not abstract ideals. Each one has a concrete, measurable expression in the components and guidelines that follow.

Consistency

The interface behaves as if one person designed every screen.

• Every colour comes from the four-colour palette. No one-off shades.
• Every spacing value is a multiple of 4px. No arbitrary pixel values.
• Button states, input borders, and badge colours are identical across every screen that uses them.
• When two screens solve the same problem differently, one of them is wrong.

Simplicity

Every element on screen earns its place. Nothing is added for decoration alone.

• The four-colour palette is intentionally constrained. Resist adding colours.
• No more than two font weights on any single screen.
• Glassmorphic effects and background patterns are deferred until core screens are stable and reviewed.
• If removing an element does not break anything, remove it.

Responsiveness

The interface works correctly across the full target viewport range.

• Primary target: analyst workstation at 1024px and above (12-column grid, 24px gutters).
• The login and registration pages must also work at tablet widths (768px and above).
• All layout uses a 12-column grid. Content never uses arbitrary positioning.
• Spacing uses a 4px base unit. All padding, margin, and gap values are multiples of 4.

Accessibility

Every analyst, regardless of ability, can complete their work without friction.

• Sufficient colour contrast on all text and interactive elements (see Section 6).
• All screens navigable by keyboard alone.
• Colour is never the sole differentiator of a state. Every semantic colour is accompanied by a text label.
• Form validation errors appear adjacent to the relevant field within 200ms, in plain language

UI Component Styling

All components are built with Tailwind CSS using the team's own component library. The specifications below define the required visual states for each component type. A component that does not implement all its documented states is not complete.

Buttons

Eight states are required. Every state must be visually distinct.

State	Background	Border	Text colour	Notes
default	#3dbf79	none	#ffffff	All positive confirmation actions
hover	#2a9a5e	none	#ffffff	Darken on pointer enter
active	#259058	none	#ffffff	Pressed / mousedown
focused	#3dbf79	#2a9a5e 2px	#ffffff	Keyboard navigation ring
disabled	#d4f5e4	#c3c3c3 0.5px	#c3c3c3	Action not yet available
loading	#3dbf79	none	#ffffff	Spinner shown, clicks blocked
danger	#e53e3e	none	#ffffff	Destructive actions, always confirm first
ghost	transparent	#3dbf79 1.5px	#3dbf79	Cancel, back, secondary actions

• Minimum height 36px, minimum horizontal padding 12px, border radius 6px.
• Never place two green primary buttons on the same screen.
• The loading state must set aria-busy='true' and prevent click events.
• Do not use disabled to hide a permission error. Explain why the action is unavailable.

Form Inputs

• Default: white background, 1px Grey (#C3C3C3) border, placeholder at 60% opacity.
• Focus: white background, 2px Green (#3dbf79) border. The green border is the sole focus indicator.
• Error: white background, 2px Red (#e53e3e) border, plain-language error message directly below the field.
• Success: white background, 1px Green (#3dbf79) border.
• Validation feedback must appear within 200ms. Error messages use plain language: 'Email is required.' not 'ERR_EMPTY'.
• Every input must have an associated visible label or aria-label. Placeholder text is not a label

Sidebar

• The sidebar is a fixed vertical panel with a Black (#231f20) background. • The full logo lockup (VL circle + Veritas Lab) anchors the top of the sidebar. • Navigation items are listed vertically. The active item has a Green (#3dbf79) pill background with Black (#231f20) text, which provides stronger contrast against the green. • Inactive items use White text on the black sidebar background. • The user avatar and name sit at the bottom of the sidebar. • Text colour on the sidebar is always White (#ffffff) for inactive items. Active items use Black (#231f20) on the green pill.

Status and Confidence Badges

Badge	Background	Used when	aria-label example
DEEPFAKE DETECTED	#e53e3e	Model confidence exceeds detection threshold	Analysis result: Deepfake Detected, 94% confidence
INCONCLUSIVE	#d97706	Confidence falls within the uncertainty range	Analysis result: Inconclusive, confidence 42-58%
AUTHENTIC	#3dbf79	Media verified as unmanipulated	Analysis result: Authentic, 97% confidence
PROCESSING	#2b6cb0	Async analysis job is running	Analysis status: Processing, estimated 2 minutes remaining

• Badge text: uppercase, Inter Medium, 11px. Every badge has a text label since colour alone is not sufficient.

Evidence Cards

• White background, 1px Grey border, drop shadow: 0 2px 8px rgba(35,31,32,0.08).
• 6px Green top accent bar anchors the card visually.
• Card title: Heading 3 style (Inter SemiBold 18px, Black). Metadata: Caption style (12px, grey).
• Status badge in the bottom-left of the card footer. Maximum card width 480px.

Modals and Dialogs

• White card on a semi-transparent Black overlay (rgba(35,31,32,0.6)).
• Modal header: Black background, White title in Heading 3 style.
• Destructive confirmation modals must show both a Danger (red) confirm button and a Ghost cancel button.
• Overlay click must not close a destructive confirmation dialog. The user must make an explicit choice.
• Maximum width 560px, maximum height 80vh with internal scroll.
• Focus is trapped inside the modal while open. Closing returns focus to the trigger element

Accessibility

Accessibility is a requirement, not an afterthought. Veritas Lab targets WCAG 2.2 Level AA compliance across all screens. The POUR framework (Perceivable, Operable, Understandable, Robust) organises the requirements below

Colour Contrast Reference

The following ratios have been measured against the WCAG 2.2 AA requirement (4.5:1 for normal text, 3:1 for large text and UI components).

Foreground	Background	Ratio	Passes for
Black #231f20	White #ffffff	17.5:1	All text, AAA
White #ffffff	Black #231f20	17.5:1	All text, AAA
White #ffffff	Error #e53e3e	4.6:1	Normal text, AA
Black #231f20	Grey #C3C3C3	6.1:1	Normal text, AA
White #ffffff	Green #3dbf79	2.8:1	Large bold text only
Grey #C3C3C3	White #ffffff	1.6:1	Decorative / placeholder only

Keyboard Navigation

• All interactive elements reachable via Tab in logical DOM order.
• Focus indicator: Green ring (#3dbf79). Never suppress outline: none without providing an equivalent.
• Modal dialogs trap focus while open and return focus to the trigger element on close.
• Sidebar navigation supports arrow-key traversal between items.
• Minimum click and touch target: 44x44px on all interactive elements.

Screen Reader Compatibility

• Decorative icons: aria-hidden='true'. Meaningful icons: descriptive aria-label.
• Status badges: aria-label includes the full result and confidence value.
• Dynamic content updates (job progress, new results, validation errors) use aria-live regions.
• All core workflows (upload, review, annotate, export) completable by keyboard alone.
• Test with NVDA on Windows or VoiceOver on macOS before marking any feature complete.