VMark - Veristone Capital Design System

A comprehensive Nuxt 4 layer providing the Veristone Capital design system with ready-to-use components, composables, and styling.

Features

• 25+ Components - Layout, Card, Form, Section, Modal, and Animation components
• 4 Composables - Scroll animations, parallax effects, and SEO configuration
• Veristone Branding - Lime green theme with Outfit font family
• Nuxt UI v4 - Built on top of Nuxt UI for consistent design
• TypeScript - Full type definitions for all components
• Responsive - Mobile-first design with responsive utilities

Installation

As a Nuxt Layer (Recommended)

1. Add the layer to your project:

# From npm (when published)
npm install @veristone/nuxt-v-mark

# Or from GitHub
npm install github:veristone/nuxt-v-mark

2. Add to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ["@veristone/nuxt-v-mark"],

  // Your project configuration...
});

Local Development

Clone and link locally:

# In the layer directory
npm link

# In your project
npm link @veristone/nuxt-v-mark

Components

Layout Components

| Component | Description | | ------------------------- | ------------------------------------------------ | | VMarkLayoutHeader | Navigation header with scroll-aware transparency | | VMarkLayoutFooter | Footer with columns and newsletter signup | | VMarkLayoutHeroSection | Full viewport hero with video/image support | | VMarkLayoutHeroCarousel | Multi-slide hero with navigation controls | | VMarkLayoutPage | Page wrapper with breadcrumbs and header |

Card Components

| Component | Description | | ---------------------- | -------------------------------------------------------- | | VMarkCardFeature | Feature card with image zoom on hover | | VMarkCardEvent | Event card with default, compact, and featured variants | | VMarkCardScroll | Horizontal scroll container | | VMarkCardTestimonial | Testimonial/quote card | | VMarkCardTeam | Team member profile card |

Form Components

| Component | Description | | ------------------- | ------------------------------------ | | VMarkFormInput | Styled text input with validation | | VMarkFormSelect | Styled select dropdown | | VMarkFormTextarea | Styled textarea with character count | | VMarkFormRsvp | RSVP form for event registration |

Section Components

| Component | Description | | ------------------------ | --------------------------------------------------- | | VMarkSectionStats | Statistics/metrics display | | VMarkSectionCTA | Call-to-action banner | | VMarkSectionComparison | Side-by-side comparison table for products/services | | VMarkSectionTimeline | Chronological timeline for milestones/history |

Animation Components

| Component | Description | | ----------------------------- | -------------------------- | | VMarkAnimationScrollReveal | Fade + slide on scroll | | VMarkAnimationParallaxLayer | Parallax background effect |

Modal Components

| Component | Description | | ------------------ | ---------------------------------------- | | VMarkModalFeature| Large scrollable modal for features | | VMarkModalEvent | Event details modal with RSVP form |

Other Components

| Component | Description | | ------------------- | --------------------------- | | VMarkAccordion | Expandable FAQ/accordion | | VMarkGallery | Image gallery with lightbox |

Composables

useParallax(speed)

Creates parallax scrolling effect.

const { offset } = useParallax(0.3);
// Use: transform: `translateY(${offset}px)`

useScrollReveal(options)

Detects when element enters viewport.

const { elementRef, isVisible } = useScrollReveal({
  threshold: 0.1,
  once: true,
});

useScrollScale(options)

Scales element based on scroll position.

const { elementRef, scale } = useScrollScale({
  minScale: 0.9,
  maxScale: 1,
});

useSeoConfig(options)

Sets up SEO meta tags.

useSeoConfig({
  title: "Page Title - Veristone Capital",
  description: "Page description.",
});

CSS Utilities

The layer provides custom CSS utilities:

Typography

• .text-display-2xl through .text-display-sm - Display text sizes
• .text-lead - Lead paragraph text

Layout

• .section-padding - Standard section padding
• .container-narrow / .container-wide - Container widths

Animation

• .animate-fade-in-up/down/left/right - Directional fade animations
• .stagger-1 through .stagger-8 - Animation delays

Effects

• .card-hover-lift - Lift card on hover
• .image-zoom - Zoom image on hover
• .scrollbar-hide - Hide scrollbar

Customization

Override Theme Colors

In your project's app.config.ts:

export default defineAppConfig({
  ui: {
    primary: "emerald", // Change primary color
    neutral: "zinc",
  },
});

Extend Components

Components can be extended or overridden by creating files with the same path in your project's app/components/ directory.

TypeScript

Import types for type-safe usage:

import type {
  NavItem,
  FooterColumn,
  HeroSlide,
  VMarkCardFeatureProps,
  VMarkLayoutHeroSplitProps,
  VMarkLayoutHeroCarouselProps,
  ComparisonItem,
  VMarkSectionComparisonProps,
  TimelineItem,
  VMarkSectionTimelineProps,
} from "@veristone/nuxt-v-mark/types";

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Type check
npm run typecheck

# Build for production
npm run build

Requirements

• Nuxt 4.x
• @nuxt/ui 4.x
• Node.js 18+

License

MIT License - Veristone Capital

Links

• Nuxt Layers Documentation
• Nuxt UI Documentation