PDFCheck
Primary lockup
Default for pages, docs, and interface headers on light surfaces.
Brand System
Updated April 2026
PDFCheck
Original document icon, now reusable as SVG
PDFCheck styleguide for product, content, and social surfaces.
Use this page as the working source of truth for logo usage, social cards, interface primitives, and the tone that makes PDFCheck feel clear, trustworthy, and product-led rather than decorative.
Working rules
What should stay consistent
Practical
Promise
Lead with clarity: private, instant, and technically credible.
Visual cue
Use the green verification accent to signal confidence, never as decoration alone.
Application
Every surface should help a user trust a PDF decision in under a few seconds.
Logo System
SVG logo and usage rules
Reusable component
The original PDFCheck identity is a simple document icon paired with a one-line wordmark. Use the full lockup in navigation, docs, and social surfaces. Use the mark-only version in tight spaces like favicons or app shortcuts.
PDFCheck
Inverse lockup
Use on dark or photographic backgrounds where the wordmark needs high contrast.
Mark only
Use where width is constrained but the verification metaphor still matters.
Keep breathing room
Leave at least the width of the folded corner around the mark so it never feels cramped.
Minimum practical size
Do not render the full lockup below 120px wide. Switch to the mark-only version below that threshold.
Backgrounds
Prefer clean white, emerald tint, or near-black surfaces. Avoid low-contrast photography or busy gradients.
Avoid distortion
No rotation, stretched scaling, heavy effects, or recoloring the wordmark away from the original dark-plus-green pairing.
Blade usage
Use the logo as a reusable component instead of rebuilding the lockup ad hoc.
<x-pdfcheck-logo caption="Brand preview template" />Color Palette
Primary verification greens
The green scale is the core trust signal. Use 500–700 for actions and verified states, 50–100 for tints, and 800–900 for high-contrast accents or dark surfaces.
50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
Semantic Roles
Meaning before decoration
Success / verified
Use green when a document passes checks or a flow completes cleanly.
Warning / review
Use amber for incomplete or cautionary states that still need user attention.
Error / invalid
Use red for failed uploads, invalid PDFs, or actions that cannot continue.
Info / system
Use blue sparingly for neutral information that is helpful but not success-critical.
Product Examples
Useful patterns, not just isolated tokens
These examples show how the brand should behave in real UI surfaces: clear CTA hierarchy, explicit status summaries, and copy blocks that support scanning instead of slowing it down.
Primary CTA
Homepage hero
Analyze any PDF in seconds
Pair the action with the privacy promise and let the green CTA carry the main conversion weight.
Report summary
Results card
Signal strength
82 / 100
Status language should stay factual and scannable. Use color as reinforcement, not the only cue.
Copy examples
Headline
Check PDF metadata, validation signals, and likely creator software.
Trust line
Files are processed securely and results appear immediately after analysis.
Developer blurb
Expose PDFCheck in docs and integrations with exact capability language, not generic AI phrasing.
Design System Skill Prompt
Prompt template for consistent design work
Use this when asking an AI design or frontend skill to create new UI that stays aligned with this styleguide instead of drifting into a new visual direction.
Example prompt
Use the PDFCheck styleguide as the source of truth for this design task.
Requirements:
- Keep the original PDFCheck identity: simple document icon plus one-line PDFCheck wordmark.
- Use the existing green token system for trust, verified states, and primary actions.
- Prioritize clarity, privacy, and technical credibility over decorative marketing language.
- Match existing spacing, rounded corners, and card styling from the styleguide.
- Reuse the current CTA hierarchy: strong green primary action, quieter secondary action.
- Keep copy concise, factual, and easy to scan.
- Avoid inventing a new brand direction, mascot, logo, or unrelated accent palette.
- If social previews are needed, base them on the existing HTML/SVG preview patterns in the styleguide.
Deliverables:
- Production-ready UI code.
- Short explanation of how the output follows the PDFCheck styleguide.
- Any new tokens or patterns only if they are necessary and fit the existing system.Use this prompt as a starting point, then append the specific page or component brief you want generated.
If you are asking for a new landing page, include the target user and the primary action so the design stays product-led.
If you are asking for a reusable component, mention where it will live in the app so spacing and hierarchy stay consistent.
Social Preview
Dynamic OG card and HTML template generation
The styleguide now ships with two brand-safe preview surfaces: an HTML template for quick visual iteration or screenshot capture, and a dynamic SVG route for page-level og:image and twitter:image tags.
OG image wiring
Point Open Graph and Twitter image meta tags at the dynamic SVG route.
HTML template URL
Use the HTML route when you want a branded browser-rendered card for screenshots or iteration.