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

$3

1. Add the layer to your project:

``bash


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:

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

// Your project configuration...
});
`

$3

Clone and link locally:

`bash


In the layer directory

npm link

In your project

npm link @veristone/nuxt-v-mark
`

Components

$3

| 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 |

$3

| 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 |

$3

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

$3

| 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 |

$3

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

$3

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

$3

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

Composables

$3

Creates parallax scrolling effect.

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

$3

Detects when element enters viewport.

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

$3

Scales element based on scroll position.

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

$3

Sets up SEO meta tags.

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

CSS Utilities

The layer provides custom CSS utilities:

$3

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

$3

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

$3

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

$3

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

Customization

$3

In your project's app.config.ts:

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

$3

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:

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

Development

`bash


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