The Versusware
design system.
One place to shape the brand, review the details, and keep every experience consistent.
16
UI primitives
50
Active compositions
01 / Identity
Confident. Clear. Buyer first.
A bold mark, a quiet canvas, and color with a purpose.
The VSW signature
Use the approved shape with its Versusware label.
VersuswareKeep clear space of at least one letter stroke around the mark. Preserve its proportions and charcoal appearance on light surfaces.
Brand voice
Useful information earns trust.
Say what the buyer can do.
“Compare the benefits and the compromises.”
Keep evidence visible.
“No verified community reviews yet.”
Make the next step obvious.
“Find software.” “Open your shortlist.”
Skip hype, unsupported rankings, and claims the data cannot support.
Use the shared banner
import HeroBanner from '@/components/HeroBanner.astro';
<HeroBanner class="px-6 py-16 text-center">
<!-- Heading, supporting copy, and a clear action -->
</HeroBanner>02 / Foundations
Color, type & rhythm.
Semantic tokens connect the brand to every component.
Brand palette
Blue
#4DA1FF
--primaryPrimary actions, focus, and brand surfaces.
Soft gray
#F5F5F5
--backgroundThe default page canvas.
Charcoal
#333333
--foregroundHeadings, body text, and labels on blue.
Orange
#FF9900
--highlightRatings and small editorial highlights.
Red
#E74C3C
--destructiveError accents and destructive cues.
Card
--cardSoft raised surface
Muted
--mutedQuiet backgrounds
Border
--borderSubtle structure
Link ink
--primary-inkReadable blue text
Error ink
--destructive-inkReadable red text
Muted ink
--muted-foregroundSupporting copy
Charcoal labels sit on blue actions. Links use the deeper blue ink token; small error text uses the deeper red ink token. Keep color paired with a label, icon, or message.
Typography
System sans serif · natural line breaks · generous line height
Display
36–60px · 600 · tight
Clarity comes first.
Page title
30–48px · 600 · tight
Software worth shortlisting.
Section title
24px · 600 · tight
A closer look at your options.
Card title
18px · 600
Find your next tool.
Body
16px · 400 · relaxed
Clear language makes comparisons easier to understand.
Label
14px · 500
Software, feature, or category
Caption
12px · 400
Confirm current details with the vendor.
Spacing
4px rhythm. Tight within groups, generous between sections.
Corners & elevation
Small controls, soft cards, broad banners.
Iconography & motion
Lucide outline icons · 16px in controls · 20–24px for emphasis
Icons support the label. Give icon-only controls an accessible name. Keep transitions brief and functional; honor reduced motion for decorative movement.
03 / Components
Actions & labels
One primary action per group. Use outline for alternatives and ghost for quiet navigation.
Button variants
These example actions only update this preview.
Sizes & icon actions
States
Badge variants
04 / Components
Form controls
Persistent labels, useful helper text, and specific errors. This sandbox never sends a submission.
Inputs & validation
Enter an email address with an @ symbol.
Text area, selection & checkbox
Short, direct, and useful to another buyer.
05 / Components
Surfaces, data & feedback
Soft neutral cards, clear hierarchy, and explicit status messages. Reserve orange for highlights and red for problems.
A clearer view of your options.
Group related information. Keep the primary action near the decision it supports.
Ratings & progress
4.5 is a design specimen, not a product rating.
Progress specimen · 60%
Empty · 0%
Complete · 100%
Feedback
Empty state
No matches in this example
Try a broader term or clear your filters.
Table
| Pattern | Purpose | State |
|---|---|---|
| Search | Discover options | Specimen |
| Shortlist | Keep relevant choices | Specimen |
| Compare | Understand tradeoffs | Specimen |
07 / Marketplace patterns
The kit, working together.
Live compositions from the site. Sample product content stays labeled, and demonstration scores stay separate from public evidence.
Example profile. Product copy and pricing are supplied sample content. Unsourced rating figures are excluded from community scores. Confirm current details with the vendor.
How Versusware handles evidencePlatform availability and downloads
Available on
Available on
- Web-basedBrowser access
- App StoreiPhone
- macOSApple Silicon & Intel
- WindowsDownload for PC
- AndroidComing soon
Category discovery
Project management
11 listed products
Plan work, coordinate teams, and track delivery.
CRM
4 listed products
Organize customer relationships and sales workflows.
Knowledge management
8 listed products
Organize notes, documents and shared knowledge.
Sales, GTM & revenue operations
4 listed products
Research prospects, enrich customer data and coordinate revenue workflows.
Product management, DevOps & app builders
10 listed products
Organize product delivery or build and publish applications.
Voice, video & creative production
8 listed products
Create, transform and localize voice, audio and visual content.
AI productivity & knowledge
14 listed products
Capture conversations, refine writing and turn information into useful work.
Voice AI tools
1 listed product
Turn speech into useful text or create and transform spoken audio with AI.
Design tools
9 listed products
Create, refine and collaborate on interfaces and visual designs.
Team collaboration
13 listed products
Communicate, share context and coordinate work across a team.
Community chat
1 listed product
Bring communities together through persistent text, voice and video.
Password managers
2 listed products
Store credentials, generate stronger passwords and control shared access.
Workflow automation
3 listed products
Connect applications and automate repeatable business processes.
Email marketing
1 listed product
Create campaigns, manage audiences and automate customer follow-ups.
PDF editors
1 listed product
Read, edit, convert and sign PDF documents.
Ecommerce platforms
1 listed product
Build storefronts and manage products, orders and payments.
Website builders
3 listed products
Create and publish websites with visual tools and hosting.
Music streaming
1 listed product
Discover music and listen across connected devices.
Instant messaging
2 listed products
Keep personal and group conversations connected.
Email services
1 listed product
Send, receive and organize email across devices.
Spreadsheets
2 listed products
Organize data, calculate results and build reports.
Web browsers
1 listed product
Access websites and organize everyday browsing.
Customer support
2 listed products
Manage customer requests, tickets and service conversations.
Accounting software
1 listed product
Track business transactions, invoices and financial reports.
Dated editorial picks connect a timely release with an existing product profile. Each card keeps its reason and official announcement together.
Trending software
Fresh updates for building apps, coding and creating audio.
Picked
Lovable
For app builders
New growth tools bring customer acquisition, SEO and ad campaigns into the same workspace where you build your app.
Cursor
For developers
Its new iOS remote control lets you check and message local coding agents from your phone while your computer stays online.
ElevenLabs
For audio creators
The Eleven v4 release brings new expressive speech options, with a Turbo variant designed for responsive conversational agents.
Directory & shortlist
Search and filter the full catalog, with 12 results per page. Changing a filter starts at page one; up to four shortlist selections carry across pages. Controls use your existing browser shortlist.
Showing 1–12 of 99 products
Save up to four products to compare.
Password managers
paid
1Password
Save passwords and passkeys, share access and spot weak credentials.
Independent profile · Unclaimed
PDF editors
freemium
Adobe Acrobat
Edit, convert and sign PDFs across desktop, web and mobile.
Independent profile · Unclaimed
AI design tools
freemium
Adobe Firefly
Generate and edit images, video and audio in one creative workspace.
Independent profile · Unclaimed
Photo editors
freemium
Adobe Photoshop
Edit photos, build composites and control the details.
Independent profile · Unclaimed
Project management
freemium
Airtable
Build shared workflows around connected records.
Independent profile · Unclaimed
Team messaging
undisclosed
Ando
Bring people and AI agents together in team chat.
Independent profile · Unclaimed
Project management
freemium
Asana
Connect projects, AI teammates, strategy, and team knowledge.
Independent profile · Unclaimed
Sales, GTM & revenue operations
freemium
Attio
Shape your CRM around the relationships and revenue work that matter.
Independent profile · Unclaimed
Password managers
freemium
Bitwarden
Keep passwords and passkeys together across your devices.
Independent profile · Unclaimed
3D modeling & animation
free
Blender
Model, sculpt, animate and render in one free 3D suite.
Independent profile · Unclaimed
AI app builders
freemium
Bolt
Build and publish an application from a conversation, with its backend close at hand.
Independent profile · Unclaimed
Appointment scheduling
freemium
Calendly
Let people book available time without the scheduling back-and-forth.
Independent profile · Unclaimed
Page 1 of 9
Comparison builder
Search and add two to four products, remove choices, or use the saved shortlist. The native GET form remains available without JavaScript. This specimen shares your browser shortlist with the directory on this page.
Profile comparison action
The product-page action shares the same shortlist. It shows selection/removal, a count, comparison navigation at two products, and an edit link when all four slots are occupied.
Editorial comparison rows
Aligned product columns become labeled blocks on mobile. Each row links to a dated source. A takeaway can explain the buying implication.
Work structure[2][8][11]
- Airtable
- Records can represent more than assignments: a client, campaign, asset and task can each have their own table, connected through linked-record fields.
- Asana
- Projects organize assigned tasks, dates and subtasks. Custom fields on Starter add structured information without requiring the team to design a separate database model.
Our take: Airtable is the stronger starting point for relating different business entities. Asana is the more direct starting point for assigning the next piece of project work.
Related cards show completed articles involving the current product. Empty sets render no section; comparisons exclude their own article.
Compare ClickUp
All comparisons
Airtable vs ClickUp
Compare Airtable and ClickUp on linked records, tasks, docs, planning, automation and team cost, with real interface evidence and plan details.
Asana vs ClickUp
Compare Asana and ClickUp on tasks, documents, planning, reporting, AI and subscription cost, with recorded workflow evidence and practical tradeoffs.
ClickUp vs Trello
Compare ClickUp and Trello on task structure, docs, boards, planning, automation and subscription costs, with clear team-fit guidance and product images.
ClickUp vs monday.com — Work Management
Compare ClickUp and monday.com on tasks, planning, AI, integrations and cost, with real interface evidence and guidance for choosing the right plan.
Profile comparison facts
| Compare | 1Password | Adobe Acrobat |
|---|---|---|
| Key capabilities |
|
|
| Pricing model | paid | freemium |
| First paid plan | ||
| Pricing & billing | USD regular annual-billing rates shown, excluding temporary new-customer discounts. A 14-day free trial is available. This listing covers the personal password manager; business and enterprise offerings have separate pricing. | US individual rates: Standard $14.99, Pro $19.99 and Studio $24.99 per month on annual plans billed monthly. These are annual commitments, with cancellation terms. Reader is free for basic PDF tasks. Mobile-only subscriptions and add-ons can differ. |
| Platforms |
|
|
| Strengths |
|
|
| Considerations |
|
|
| Profile updated | Oct 14, 2026 | Oct 14, 2026 |
Rating compositions
Design specimens only · these values are not product evidence
Audience & specifications
Design specimens only · no observed audience data
Top Industries
Common Use Cases
Deployment specimen
Pricing cards
Live 1Password plans with billing controls, plan limits, and a dated source. Cards stack on small screens.
Prices in USD
Individual
Standard personal subscription price.
$3.99
per month · billed annually
- Unlimited passwords and items
- Autofill and device sync
- Watchtower and secure item sharing
Families
Standard household subscription price.
$5.99
per month · billed annually
- 5 users
- Shared family vaults
- Family account recovery tools
Source: vendor pricing · Updated
View official pricingBuyer review · layout example
Who does it suit?
This is a design example. Published reviews connect a clear buying recommendation to actual test findings, with the account plan and scope visible.
What does it cost?
Explain the commitment, seat requirements and relevant extra charges. Keep the editorial body visible, use concise sections, and retain compact feature groups below it.
Feature evidence appears inline as a lazy-loaded, uncropped screenshot with a caption and date. Select the preview to open the shared full-screen gallery, with mouse-following image zoom (1×–4×), Fit reset, arrow navigation, Escape to close, and focus returned to the preview.
1Password features
4 features · 2 categoriesBrowse all 4 features
Core workflow
2
-
Encrypted vaults
Store logins, passkeys, secure notes and other items, protected with an account password and Secret Key.
Official product overviewChecked -
Generation and autofill
Generate unique passwords and fill supported sign-in fields through desktop, mobile and browser integrations.
Official product overviewChecked
Control and collaboration
2
-
Watchtower alerts
Identify security issues related to stored items, including weak, reused or compromised credentials.
Official product overviewChecked -
Controlled sharing
Share vaults with family members or send an item through an expiring link, including to people without a 1Password account.
Official product overviewChecked
No matching features. Try another term or clear the search.
1Password FAQs
Is 1Password free?
1Password offers a 14-day trial. Continued use of the personal password manager requires a paid subscription.
Official pricing How many people does Families include?
The Families plan includes five users, with shared vaults and family management tools.
Official pricing Can I share an item with someone who does not use 1Password?
Yes. Secure item sharing can create an expiring link for a recipient without a 1Password account.
Official product informationCommunity reviews
Write a reviewBe the first to share your experience.
Customer reviews are checked before publication.
Full workflow references
Review forms and request flows are available on their own pages.
Active-route link utility
08 / Reference
Component inventory.
Every current primitive and shared composition, with its source and a preview or usage link. New files appear here automatically.
| Component | Role | Reference |
|---|---|---|
alert src/components/ui/alert.tsx | Primitive Information, attention, and error messages | View usage |
badge src/components/ui/badge.tsx | Primitive Compact labels and evidence states | View usage |
breadcrumb src/components/ui/breadcrumb.tsx | Primitive Location within the site | View usage |
button src/components/ui/button.tsx | Primitive Actions, links, sizes, and interaction states | View usage |
card src/components/ui/card.tsx | Primitive Grouped information and actions | View usage |
checkbox src/components/ui/checkbox.tsx | Primitive Independent and mixed selections | View usage |
dropdown-menu src/components/ui/dropdown-menu.tsx | Primitive Contextual actions and settings | View usage |
input src/components/ui/input.tsx | Primitive Single-line text and search | View usage |
label src/components/ui/label.tsx | Primitive Persistent form labels | View usage |
navigation-menu src/components/ui/navigation-menu.tsx | Primitive Primary links and resource menus | View usage |
progress src/components/ui/progress.tsx | Primitive Bounded progress and rating breakdowns | View usage |
select src/components/ui/select.tsx | Primitive Single choice from a list | View usage |
separator src/components/ui/separator.tsx | Primitive Quiet visual grouping | View usage |
sheet src/components/ui/sheet.tsx | Primitive Contextual drawers and mobile navigation | View usage |
table src/components/ui/table.tsx | Primitive Structured comparisons and records | View usage |
textarea src/components/ui/textarea.tsx | Primitive Multi-line notes and review text | View usage |
BaseHead src/components/BaseHead.astro | Composition Page metadata and brand favicon | View usage |
BrandLogo src/components/BrandLogo.tsx | Composition Approved VSW mark and brand name | View usage |
ButtonLink src/components/ButtonLink.tsx | Composition Shadcn-style links from Astro | View usage |
CatalogSchema src/components/CatalogSchema.astro | Composition Shared site component | View usage |
CategoryGrid src/components/CategoryGrid.astro | Composition Browse parent categories, product counts and subcategory links | View usage |
ComparisonBuilder src/components/ComparisonBuilder.tsx | Composition Search, category suggestions, removable selections and browser-saved four-product comparisons | View usage |
ComparisonPicker src/components/ComparisonPicker.astro | Composition Progressively enhanced two-to-four-product picker with a native GET fallback | View usage |
ComparisonProductCard src/components/ComparisonProductCard.astro | Composition Product identity, best fit, annual base price and website action | View usage |
ComparisonRows src/components/ComparisonRows.astro | Composition Matched editorial comparison rows, source references and mobile product labels | View usage |
ComparisonTable src/components/ComparisonTable.tsx | Composition Aligned profile capabilities, pricing and platforms for two to four products, with horizontal scrolling | View usage |
DirectoryPagination src/components/DirectoryPagination.tsx | Composition Numbered software pages, accessible current/boundary states and result focus on navigation | View usage |
EditorialReview src/components/EditorialReview.astro | Composition Visible buyer analysis with a contents navigation and readable article width | View usage |
EmptyState src/components/EmptyState.tsx | Composition Missing results with a next step | View usage |
EvidenceNotice src/components/EvidenceNotice.astro | Composition Source and sample disclosures | View usage |
Footer src/components/Footer.astro | Composition Brand, utility links, and copyright | View usage |
FormattedDate src/components/FormattedDate.astro | Composition Consistent editorial dates | View usage |
GoogleAnalytics src/components/GoogleAnalytics.astro | Composition Shared site component | View usage |
Header src/components/Header.astro | Composition Site navigation shell | View usage |
HeaderLink src/components/HeaderLink.astro | Composition Active-route link utility | View usage |
HeroBanner src/components/HeroBanner.astro | Composition Shared CSS gradient wrapper | View usage |
HeroIllustration src/components/HeroIllustration.astro | Composition Earlier unused illustration concept | Archived |
OutboundTracking src/components/OutboundTracking.astro | Composition Automatic VSW attribution on external website links | View usage |
PageBreadcrumb src/components/PageBreadcrumb.tsx | Composition Reusable breadcrumb composition | View usage |
PricingPlans src/components/PricingPlans.tsx | Composition Plan cards, billing period controls, and pricing sources | View usage |
PricingTable src/components/PricingTable.astro | Composition Product pricing composition | View usage |
PrivacyRequestForm src/components/PrivacyRequestForm.tsx | Composition Privacy request workflow | View usage |
ProductCard src/components/ProductCard.tsx | Composition VSW angular product card, logo and empty-image fallback, shortlist states | View usage |
ProductCompareAction src/components/ProductCompareAction.tsx | Composition Add/remove a software profile from the shared comparison shortlist, with count, compare and full-list states | View usage |
ProductFAQ src/components/ProductFAQ.astro | Composition Compact, accessible product questions with sourced answers | View usage |
ProductFacts src/components/ProductFacts.astro | Composition Compact pricing, strengths, plan limits, and review status | View usage |
ProductFeatures src/components/ProductFeatures.astro | Composition Feature highlights, searchable groups, plan details, and source or test evidence | View usage |
ProductGallery src/components/ProductGallery.tsx | Composition Product image carousel with thumbnails, full-screen zoom and sourced vendor previews | View usage |
ProductLogo src/components/ProductLogo.tsx | Composition Shared site component | View usage |
ProductPlatforms src/components/ProductPlatforms.astro | Composition Supported platforms, verified store/download links and upcoming availability | View usage |
ProfileNavigation src/components/ProfileNavigation.tsx | Composition Active profile section tracking | View usage |
RatingBreakdown src/components/RatingBreakdown.astro | Composition Four rating dimensions | View usage |
RatingStars src/components/RatingStars.tsx | Composition Accessible fractional star rating | View usage |
RelatedComparisons src/components/RelatedComparisons.astro | Composition Published comparisons involving the current product or pair, with logos and canonical article links | View usage |
ReviewButton src/components/ReviewButton.tsx | Composition Review action with a brand-colored edge and writing icon | View usage |
ReviewList src/components/ReviewList.astro | Composition Approved reviews and empty state | View usage |
SiteNavigation src/components/SiteNavigation.tsx | Composition Desktop header and mobile drawer | View usage |
SoftwareDirectory src/components/SoftwareDirectory.tsx | Composition Full-catalog search, filters, optional pagination, cards and persistent shortlist | View usage |
SoftwareSchema src/components/SoftwareSchema.astro | Composition Software structured data drawn from the visible product content | View usage |
SpecsList src/components/SpecsList.astro | Composition Grouped specification badges | View usage |
StarRating src/components/StarRating.astro | Composition Rating and review-count composition | View usage |
StickySubNav src/components/StickySubNav.astro | Composition Sticky profile section wrapper | View usage |
SubmissionForm src/components/SubmissionForm.tsx | Composition Review and vendor request workflows | View usage |
TrendingSoftware src/components/TrendingSoftware.astro | Composition Three dated editorial picks with authentic logos, a timely reason and official release links | View usage |
UserInsights src/components/UserInsights.astro | Composition Audience and use-case percentages | View usage |
WorkspaceAccess src/components/workspace/WorkspaceAccess.tsx | Composition Private company invitation redemption | View usage |
WorkspaceClient src/components/workspace/WorkspaceClient.tsx | Composition Company inbox, proposals, approvals, agent controls, and preferences | View usage |
Keep it consistent
- Use semantic tokens rather than new ad hoc colors.
- Extend shared components before creating a second visual treatment.
- Keep labels, focus rings, contrast, and small-screen behavior intact.
- Add a preview and usage note when adding a new component.
- Keep form controls that share Radix context in one React island.
Change log
v0.1 · 2026-10-03Initial brand system: approved VSW signature, five-color palette, shared gradient banner, typography and spacing, live component states, marketplace compositions, and source inventory.
Update the version and change log when the brand direction changes. This page reflects the current foundation; future additions can be reviewed here.