Brand Identity

This brief is the working direction for Veref product UI and Claude design exploration. It is not a marketing moodboard. It defines how the recruiter product should feel when someone is moving candidates, evidence, and reference work through a high-trust hiring system.

Core idea

Veref is the verified-human layer for remote hiring. The brand should feel precise, calm, and operational.

• Trustworthy without feeling bureaucratic.
• Technical without feeling like a security vendor dashboard.
• Human-centered without becoming soft, playful, or lifestyle-driven.
• Fast to scan for recruiters who repeat the same decisions every day.

The visual center is a clean recruiter workstation: evidence status, candidate context, verified identity, agent help, and next actions are visible without marketing gloss.

Logo usage

The canonical mark is the circular Veref V mark in apps/web/public/logo.svg and the theme-adaptive React component in packages/ui/src/components/veref-logo-mark.tsx.

• Use the full word Veref in navigation, auth, docs, and page headers where the user may not already know the product.
• Use the mark alone only in compact product chrome, favicons, app icons, or dense sidebars.
• Render the mark in a single color through currentColor where possible.
• Keep the mark on solid, quiet backgrounds. Avoid photo crops, gradients, or patterned backgrounds behind the mark.
• Do not redraw the V, add shadows, use the old gradient orb, or place the mark inside another badge.

Typography

Veref should use a pragmatic sans-serif system.

• Product app: Inter, already configured in apps/app.
• Public web: Satoshi, already configured in apps/web.
• Docs and generated assets: system sans fallback is acceptable until docs adopts the shared font layer.
• Numbers, tokens, timestamps, hashes, and API values should use the mono stack.

Type should be dense but breathable. Recruiter dashboards should use 12-14px body UI text, 13-16px table and card headings, and restrained 20-28px section headings. Hero-scale type belongs only on public marketing pages.

Color system

The current color direction is correct and should be consolidated, not replaced.

Blue is the product identity color. Green, amber, red, and purple are state colors, not brand colors. Use them sparingly and attach them to explicit status text or icons.

Spacing and shape

The product rhythm should feel compact, repeatable, and stable.

• 4px base spacing for tight UI, 8px for standard gaps, 16px for grouped content, 24-32px for page sections.
• Cards, panels, buttons, and table rows should stay at 4-8px radius in the product app.
• Public marketing can use 8-12px radii where the visual is larger.
• Tables and queues should prefer full-width bands or unframed layouts over nested cards.
• Avoid oversized decorative cards inside the recruiter app.

Icon style

Use lucide icons for product controls and state cues where an icon exists.

• Icons should be 14-18px in dense product UI.
• Use icon buttons for common tools such as refresh, filter, settings, open, copy, and download.
• Pair unfamiliar icons with accessible labels or tooltips.
• Status icons should reinforce text, not replace it.

Visual tone

The brand should look like a serious operating layer for hiring trust.

Do:

• Use clean tables, queues, timelines, and evidence panels.
• Show concrete artifacts: candidate rows, reference evidence, identity checks, interview signals, audit events.
• Make agent surfaces look embedded in the workflow, not like a separate chatbot product.
• Keep default mode light and calm.
• Use dark mode for account preference, focused review, or technical surfaces, not as the default brand expression.

Do not:

• Use generic AI sparkle visuals as the main brand device.
• Make the app feel like a cyber-security war room.
• Overuse gradients, bokeh, glass effects, decorative blobs, or purple-blue one-note palettes.
• Hide trust decisions inside vague labels such as “AI score” without evidence context.
• Use marketing hero composition inside recruiter workflows.

Product UI examples

Recruiter dashboard

The dashboard should open on operational state: active candidates, reference coverage, interview integrity, alerts, and next actions. Use a light workspace, compact cards, and one strong blue primary action.

Good first updates:

• Convert broad placeholder cards into live module cards for Interview, Passport, and Work History.
• Put status counts near the module name, not in separate decorative stat blocks.
• Make risk and missing-evidence states amber or red only when the recruiter must act.

References queue

The References queue should feel like a workbench.

• Left side: candidate and request queue.
• Center: selected request, referee progress, evidence snippets.
• Right side: Ask Veref or next-action panel.
• Completed referee evidence uses green only for verified or complete states.
• Waiting states use neutral ink and amber only when a deadline or coverage gap needs attention.

Interview integrity room

The Interview room should feel focused and controlled.

• Video and signal panels are the primary content.
• Integrity score should be a compact dial or badge with visible underlying signals.
• Active challenges should look like operator controls, not marketing CTAs.
• Evidence clips should be presented as audit artifacts with timestamps and hashes.

Passport and candidate-owned identity

Passport surfaces should feel consent-first and portable.

• Make share grants, revocation, export, and deletion controls explicit.
• Show who has access, what claim is shared, and when access expires.
• Avoid language that implies employers own the candidate’s underlying identity record.

Agent surfaces

Ask Veref should act like an embedded operations assistant.

• Keep the sidebar narrow, persistent, and connected to the current candidate or request.
• Agent messages should cite evidence or state that evidence is missing.
• Approval actions should be explicit when agent output can contact candidates, referees, or clients.

Claude design prompts

Use these prompts in Claude design to explore the direction. Keep the output as product UI, not a landing page.

Prompt 1: recruiter workspace direction

Design a Veref recruiter workspace for a remote hiring verification product. The screen is a light-mode operational dashboard with a left sidebar, topbar, candidate queue, live reference progress, interview integrity status, Passport share status, and an embedded Ask Veref assistant. Use a precise blue and ink color system, compact 4-8px radii, dense but readable tables, lucide-style icons, and evidence-first status language. Avoid marketing hero sections, decorative gradients, glassmorphism, cyber-security styling, and generic AI sparkle visuals.

Prompt 2: References workbench

Design a Veref References workbench for recruiters reviewing verified work-history evidence. Include a candidate list, selected candidate summary, referee completion timeline, evidence snippets, identity and relationship verification states, risk flags, and next-action approvals. Default to light mode with brand blue primary actions, neutral ink surfaces, amber review states, green verified states, and red blocking fraud states. The interface should feel like an efficient B2B operations tool, not a marketing page.

Prompt 3: Interview integrity room

Design a Veref Interview room control surface. Show a browser-native video interview with compact integrity panels for ID match, liveness, voice authenticity, virtual-camera checks, active challenge controls, evidence clip capture, and audit timestamps. The recruiter must be able to understand what is verified, what is uncertain, and what requires action. Use restrained product UI, clear iconography, and visible evidence context. Do not use dark cyber visuals unless showing an optional focused review mode.

Prompt 4: Passport consent controls

Design a Veref Passport consent and share-grant screen for a candidate-owned verification record. Show verified identity, verified references, interview evidence hashes, employer access grants, expiration dates, export controls, and revocation. The tone should be calm and transparent. Use clear labels, compact forms, blue primary actions, neutral surfaces, and explicit privacy language. Do not imply that the employer owns the candidate's Passport.

Prompt 5: dark account mode

Take the Veref recruiter workspace direction and create an account-level dark mode variant. Keep the same information hierarchy, spacing, and controls. Use near-black surfaces, subtle borders, accessible text contrast, blue active states, and the same green, amber, and red status meanings. The dark mode should feel like a preference for focused work, not the default brand or a security operations center.

Claude design artifact spec

Each Claude design exploration should produce a reusable artifact that a product engineer can compare against the live app without guessing at brand intent.

Required artifact output:

• One desktop frame for the primary recruiter workflow being explored.
• One mobile or narrow-width frame when the workflow can plausibly be used outside a desktop review session.
• A token callout strip for brand blue, ink, surface, border, success, warning, and danger.
• A state sample row showing neutral, pending, verified, review-needed, and blocking-risk states.
• A component sample for table rows, badges, primary and secondary buttons, tabs, filters, and the embedded Ask Veref panel.
• A short annotation layer explaining evidence hierarchy, recruiter next action, and approval gates.

Review the artifact against these rules before using it as implementation guidance:

• The first viewport must look like an operational recruiter product, not a campaign landing page.
• Every colored state needs adjacent text that names what is verified, pending, missing, or blocked.
• Primary actions must be blue and singular in each local decision area.
• Tables, queues, sidebars, and agent panels must fit dense recruiter work without nested cards or oversized marketing spacing.
• Dark-mode explorations must preserve the same workflow hierarchy rather than becoming a separate security-console concept.

First surfaces to update

When this direction is approved, update these surfaces first:

1. apps/app/app/recruiter-workspace-shell.tsx for the primary recruiter workspace shell.
2. apps/app/app/recruiter-agent-sidebar.tsx for embedded Ask Veref behavior and visual treatment.
3. apps/app/app/(protected)/references for the References queue and workbench states.
4. apps/app/app/(protected)/settings for theme, primary color, and account preferences.
5. packages/ui/src/primitives for shared button, card, table, badge, input, and dialog defaults.
6. apps/web/app/opengraph-image.tsx and public web section components after product surfaces are aligned.

Follow-up implementation issues

These are the implementation issues to create or link after the direction is approved.

• Consolidate app and web color tokens around brand blue, ink, surface, border, and state colors.
• Update recruiter workspace shell to the Veref operational layout.
• Standardize table, badge, card, and sidebar density across packages/ui.
• Apply evidence-first status language to References and Interview surfaces.
• Add dark account mode QA for contrast, state colors, and logo rendering.
• Replace remaining decorative gradients or generic AI visual motifs in product surfaces.

Acceptance checklist

• Brand direction is documented in repo.
• Claude design prompts are reusable for visual exploration.
• Recruiter product examples are included for the main Veref workflows.
• First implementation targets are listed by code surface.
• The direction builds on the current logo, type, and token system instead of creating a parallel brand.