Platform Ready
Web
Family-facing discovery, pooja packages, and booking flows on the product domain.
Platform Ready
v2.0Brand system
Nexynth Labs identity & design language
Version 2.0 — reusable tokens, component standards, and documentation for Nexynth Labs marketing, product UI, and partner materials.
Tokens live in
src/brand/tokens.ts and globals.css.Brand foundations
Nexynth Labs identity
Modern engineering with cultural respect — premium, trustworthy, and clear. Deep navy foundations with electric accents for product marketing.
Clarity over novelty
Readable hierarchy, generous spacing, and purposeful motion.
Trust by design
Contrast-safe text, honest labels, and consistent component behaviour.
Engineering craft
Glass surfaces, mesh gradients, and structured grids signal technical credibility.
Voice
Professional · Warm · Precise · Honest readiness
Avoid
Hype · Vanity metrics · Cluttered layouts · Unverified certifications
GetPandit runs on getpandit.com. Co-brand only when context is clear; never merge product logos into the Nexynth Labs mark.
Logo guidelines
Logo system
Minimum clear space = height of the mark on all sides.
Primary — light background
Min width 120px
Primary — dark background
Min width 120px
Mark only — particle N
Min width 32px
Alternate — light (Concept B)
Min width 120px
Alternate — dark (Concept B)
Min width 120px
Minimum sizes
- Digital wordmark: 120 px
- Print wordmark: 30 mm
- Mark only (favicon): 16 px
Don'ts
- Do not stretch, rotate, or skew
- Do not change logo colors outside the palette
- Do not add drop shadows or outlines to the mark
- Do not place on busy photography without a solid overlay
- Do not recreate the wordmark in a different typeface
- Do not mix Concept A and Concept B in the same document
Spacing rules
4px spacing scale
Base unit 4px — use Tailwind spacing or CSS vars for consistent rhythm.
space-10.25rem (4px) — Tight icon gapsspace-20.5rem (8px) — Inline badge paddingspace-30.75rem (12px) — Compact card paddingspace-41rem (16px) — Default inline spacingspace-51.25rem (20px) — Form field gapsspace-61.5rem (24px) — Card padding (sm)space-82rem (32px) — Section sub-blocksspace-102.5rem (40px) — Grid gaps (lg)space-123rem (48px) — Section padding (mobile)space-164rem (64px) — Hero vertical rhythmspace-section-yclamp(3rem, 6vw, 5rem) — Default section paddingspace-section-y-lgclamp(4rem, 8vw, 7rem) — Large section paddingcontainerDefault
max-w-6xlcontainerWide
max-w-7xlcontainerNarrow
max-w-3xlgridGutter
gap-6 lg:gap-8tapMin
2.75remTypography system
Geist Sans & Mono
All marketing and product UI
display-lg
Ship with clarity
clamp(2.5rem, 6vw, 4.5rem) · semibold · -0.03em
display
Engineering excellence
clamp(2.25rem, 5vw, 4rem) · semibold
heading-xl
Section headline
clamp(1.75rem, 3.5vw, 2.75rem) · semibold
heading-lg
Card or pillar title
clamp(1.375rem, 2.5vw, 1.75rem) · semibold
body
Body copy for descriptions and form help text.
1rem (16px min) · regular · relaxed leading
eyebrow
Eyebrow label
0.75–0.8125rem · semibold · uppercase · 0.14em tracking
mono
nexynthlabs.com · lead_id_01
0.875rem · Geist Mono
- Minimum 16px body text on mobile.
- Use text-eyebrow for section labels — electric-blue on light, electric-cyan on dark.
- Display sizes use text-balance where supported.
- Do not substitute decorative or serif fonts for the wordmark.
Sans stack
var(--font-geist-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serifMono stack
var(--font-geist-mono), ui-monospace, "Cascadia Code", monospaceColor system
Palette tokens
Core legacy palette plus premium electric accents. Use CSS variables in components.
core
Nexynth Navy
#1e3a5f · --primary
Brand primary, logo container, legacy primary buttons
Deep Midnight
#0f1b2d · --foreground
Body text on light surfaces, dark UI base
Synth Gold
#b8891f · --accent
Accent highlights, logo node, legacy accent CTAs
Warm Ivory
#f8f7f4 · --background
Page backgrounds, print stationery
Pure Surface
#ffffff · --surface
Cards, elevated panels, form fields
Slate Muted
#5b6472 · --muted
Secondary text, captions, helper copy
Mist Border
#d9dde4 · --border
Dividers, input borders, card outlines
premium
Midnight
#0a0f1a · --midnight
Premium dark heroes and mesh backgrounds
Electric Blue
#3b82f6 · --electric-blue
Links, focus rings, premium eyebrows on light surfaces
Electric Violet
#8b5cf6 · --electric-violet
Gradient mid-tone, hover accents, step labels
Electric Cyan
#06b6d4 · --electric-cyan
Dark-surface eyebrows, success-adjacent highlights
semantic
On Dark
#f8f7f4 · --on-dark
Primary text on midnight/navy heroes
On Dark Muted
#a8b4c4 · --on-dark-muted
Secondary text on dark heroes
Gradient system
Brand gradients & mesh
Use utility classes bg-gradient-brand, bg-gradient-brand-subtle, ds-mesh, ds-mesh-dark.
Brand gradient
--gradient-brand
Primary CTA buttons, badges, emphasis text
Brand subtle
--gradient-brand-subtle
Selected cards, form steps, soft highlights
Light mesh
--gradient-mesh
Light section backgrounds
Dark mesh
--gradient-mesh-dark
Hero sections, footer, dark product pages
Gold shine
--gradient-gold-shine
Print accents, premium dividers (legacy brand gold)
Iconography
Icon sizes & style
Interactive icons must sit inside a 44×44px minimum touch target.
◆
icon-sm
16px
◆
icon-md
20px
◆
icon-lg
24px
◆
icon-xl
32px
- Prefer 1.5–2px stroke icons with rounded caps for UI.
- Use electric-blue or on-dark for interactive icons on marketing pages.
- Decorative diagram nodes use FlowNode pattern — rounded-md borders, small caps labels.
- Emoji are not part of the icon system — use SVG or unicode sparingly in product UI only.
Illustration framework
Nexynth illustration framework
Inline SVG diagrams with shared primitives — no stock photography. Import NexynthIllustration or category components directly.
- Architecture diagrams use bordered nodes, arrows, and glass panels — not stock photography.
- Product UI previews use framed device/chrome mocks with honest placeholder content.
- Mesh gradients and grid overlays reinforce engineering credibility; avoid generic SaaS blobs.
- GetPandit illustrations respect devotional context — no clip-art deities or sensational imagery.
- SVG preferred for marketing diagrams; optimize and host under public/ or inline for small flows.
Diagram palette
- Nodes: glass/90 backgrounds with border-glass-border
- Accent nodes: gradient-brand-subtle or electric accent borders
- Dark diagrams: glass-dark/50 on midnight panels
- Framework: src/illustrations — NexynthIllustration component with six categories
GetPandit
Booking journey — discovery, catalog, scheduling, and notifications on a dedicated product domain.
AI
Agentic flows — intent, planner, retrieval, governance, and audited responses.
Engineering
Client surfaces, domain services, data layer, and delivery pipeline.
Cloud
CDN, edge TLS, and compute tiers — static-first with API paths.
Marketplace
Two-sided platform — demand, supply, and trust layers with honest readiness labels.
Analytics
Logs, events, metrics pipeline, and readiness dashboards — not vanity KPIs.
import { NexynthIllustration } from "@/illustrations";
<NexynthIllustration category="ai" variant="hero" tone="dark" framed />Motion system
Motion design system
Subtle, professional motion for marketing UI — hero reveals, scroll-triggered cards, CTA feedback, and fast page transitions. Disabled when prefers-reduced-motion is set.
Hero reveal
Staggered hero copy
Fade-up on load — 14px travel, 550ms max.
Scroll reveals
Card 1
Scroll-triggered
Card 2
Scroll-triggered
Card 3
Scroll-triggered
Card 4
Scroll-triggered
Metric animation
✓
Live domain
✓
Integration-ready
✓
Documented
Principles
- · Subtle — max 14px travel on hero reveals, 2px hover lift on cards.
- · Professional — opacity + transform only; no bounce or spin on marketing UI.
- · Fast — hero 550ms max; interactions 150–200ms.
- · Accessible — prefers-reduced-motion disables decorative motion instantly.
Performance
- · Animate transform and opacity only (compositor-friendly).
- · Scroll reveals fire once via IntersectionObserver then disconnect.
- · No layout-thrashing properties (width, height, top, margin).
import { MotionReveal, MotionHeroReveal } from "@/motion";
<MotionHeroReveal>…</MotionHeroReveal>
<MotionReveal variant="card" delay={2} hoverLift>…</MotionReveal>Legacy utilities
- .motion-hero-reveal — Hero headline entrance
- .motion-card-reveal — Scroll-triggered cards
- .motion-page-enter — Route change fade
- .motion-cta — Button hover and press
- .ds-animate-in — Legacy — prefer motion-card-reveal
Accessibility
All decorative animations disable under prefers-reduced-motion via data-motion=reduce and CSS media query.
prefers-reduced-motion disables motion-* classes and legacy ds-animate-in. Buttons keep instant state changes.
Product showcase
Product showcase framework
Reusable screenshot mockups, device frames, feature walkthroughs, and before/after comparisons — config-driven for GetPandit, AI products, and future launches.
GetPandit · flagship section
Flagship productLive productLive on getpandit.com
GetPandit
Pandit booking, built for families
GetPandit is Nexynth Labs's flagship platform for pandit discovery, pooja booking, and ceremony scheduling. Payment gateway and messaging integration-ready on getpandit.com.
GetPandit runs on getpandit.com — independent from this corporate site. Status labels describe platform readiness only, not user counts or revenue.
Solution: GetPandit on getpandit.com — structured pandit profiles, pooja catalogs, calendar-aware scheduling, and architecture prepared for payment and messaging integrations, separate from the corporate site.
getpandit.com
Surfaces
Product ecosystem
Web, mobile, and admin surfaces on the product stack — designed for families, pandit partners, and internal operations.
Platform Ready
Mobile
Mobile-first responsive experience with touch-friendly ceremony scheduling.
Platform Ready
In Progress
Admin
Internal operations for booking oversight, partners, and platform management.
In Progress
Readiness
Platform readiness
Honest milestones for booking, onboarding, admin operations, and integrations — updated as capabilities ship on the product domain.
Booking workflow readiness
Platform ReadyBrowse-to-confirm journey with calendar-aware scheduling, status updates, and family notifications.
Pandit onboarding readiness
In ProgressProfile intake, verification checkpoints, and service listing flows for pandit partners.
Admin dashboard readiness
In ProgressInternal tools for operations, booking oversight, and partner management on the product stack.
Payment / SMS / WhatsApp integration readiness
Integration ReadyArchitecture and configuration slots prepared for payment gateway and transactional messaging providers.
Readiness labels reflect engineering and integration status only — not bookings completed, active users, or financial performance.
Feature sections
Find pandits
Search profiles built for trust and clarity
Families explore verified pandit profiles with languages, specializations, and service catalogs — designed for informed decisions, not guesswork.
Live on product domain
- Structured pandit profiles with ritual expertise
- Language and region filters for the right match
- Service listings tied to pooja packages
- Clear availability signals before booking
getpandit.com
Feature walkthrough
How it works
From discovery to ceremony — in four clear steps
Every flow on getpandit.com is designed around devotional booking — browse, choose, schedule, and stay informed.
- 01
Discover
Browse pandit profiles, pooja categories, and service packages with transparent details.
getpandit.com - 02
Choose
Compare language, ritual expertise, and availability before selecting the right fit.
getpandit.com - 03
Schedule
Pick ceremony dates, locations, and ritual specifics with calendar-aware booking.
getpandit.com - 04
Stay informed
Receive confirmations, reminders, and status updates through the product journey.
getpandit.com
Gallery · screenshots & compare
Product surfaces
Web, mobile, admin, and dashboard mockups
CSS previews and portfolio screenshots — illustrative until production captures ship.
getpandit.com
AdminOps
GetPandit booking journey
Search, compare, book, and confirm — one product story on getpandit.com
getpandit.com
After
AI product surfaces
AI surfaces
Workflow, agent, dashboard, and assistant mockups
console.example
app.example.com
AdminOps
import { ProductShowcaseSection, ProductFeatureSection, HeroMockupStack } from "@/components/product-showcase";Edit showcase copy and visuals in src/config/product-showcase.ts and product-specific configs (getpandit-marketing.ts, getpandit-showcase.ts). Preview components live in src/components/product-showcase/preview-registry/.
Live on /getpandit or wire sections via ProductShowcaseSection.
Product demos
Interactive product demos
Config-driven flow steppers with animated panels — keyboard accessible, reduced-motion aware, zero external animation libraries.
Interactive demo
GetPandit booking flow
Walk through how families discover pandits, choose pooja packages, schedule ceremonies, and receive confirmations on getpandit.com.
Step 1 of 4: Browse pandit profiles
Step 01
Browse pandit profiles
Families search by language, ritual expertise, and region — with verification signals before they shortlist.
- Structured profiles
- Language filters
- Availability hints
Step 1 of 4
Illustrative UI — reflects product architecture, not live analytics.
Partner journey
Vendor journey
How temples, vendors, and service partners move from enquiry to live listings on the GetPandit marketplace.
Step 1 of 4: Partner enquiry received
Step 01
Partner enquiry received
Leads arrive via /contact or /partners. The team qualifies fit before product onboarding begins.
- Enquiry-led intake
- Qualification checkpoint
- No public self-serve
Step 1 of 4
Partner onboarding is enquiry-led — no self-serve signup on the corporate site.
Supply onboarding
Pandit onboarding
Structured intake for pandit partners joining GetPandit — verification, catalog setup, and go-live readiness.
Step 1 of 4: Profile and expertise capture
Step 01
Profile and expertise capture
Pandits submit languages, specializations, and service scope through guided intake flows.
- Profile intake
- Ritual expertise
- Language coverage
Step 1 of 4
Readiness labels describe platform capability — not partner counts.
AI delivery
AI workflow
Nexynth Labs ships agentic workflows with tool permissions, eval hooks, and human-in-the-loop approval — scoped per engagement.
Step 1 of 4: Trigger and context assembly
Step 01
Trigger and context assembly
Tickets, documents, or API events enter a workflow with scoped context and policy boundaries.
- Event triggers
- Context windows
- Policy boundaries
Step 1 of 4
Illustrative agent flow — not live model output or customer metrics.
Marketplace pattern
Marketplace lifecycle
Reusable lifecycle from GetPandit — list services, discovery, booking, and fulfillment with honest readiness labels.
Step 1 of 4: Supply lists services
Step 01
Supply lists services
Partners publish structured listings with ritual scope, pricing signals, and verification status.
- Structured listings
- Verification
- Catalog discipline
Step 1 of 4
Pattern overview — not revenue or transaction volume claims.
import { ProductDemoSection } from "@/components/product-demo";Edit demo steps in src/config/product-demos.ts. Panel mock UIs live in src/components/product-demo/panels/.
Live on /getpandit, /ai-showcase, and /products/ecosystem.
Component rules
Buttons & cards
Standards map to src/components/ui/variants.ts — use Button and Card primitives.
Button standards
rounded-ds-full · font-semibold · min-h-11 · focus-visible ring 2px
primaryaccentgradientoutlineghostglass
gradient
Primary marketing CTA on light or dark heroes
bg-gradient-brand text-on-dark shadow-glow
primary
Legacy navy CTA — corporate forms
bg-primary text-primary-foreground
accent
Gold accent — secondary emphasis
bg-accent text-accent-foreground
outline
Secondary actions beside gradient CTAs
border-border bg-transparent
glass
Secondary on dark heroes
border-glass-border-dark bg-glass-dark
ghost
Tertiary inline actions
hover:bg-surface/80
Card standards
solid
Default content cards
glass
Premium marketing sections
elevated
Featured content, forms
floating
Hero accents only — use sparingly
dark
Cards on midnight sections
Padding sm
p-4 sm:p-5Metrics, compact lists
Padding md
p-5 sm:p-8Default
Padding lg
p-6 sm:p-10Featured case studies
- Use items-stretch on card grids for equal height.
- Interactive cards: hover -translate-y-0.5 or -translate-y-1 max — never more than 4px.
- Border radius: rounded-ds-lg default, rounded-ds-xl for featured marketing cards.
- Do not nest floating variant inside floating variant.
Radii & shadows
radius-ds-sm
0.75rem
radius-ds-md
1.25rem
radius-ds-lg
1.5rem
radius-ds-xl
1.75rem
radius-ds-full
9999px
--shadow-soft — Default cards and buttons
--shadow-elevated — Hovered cards, modals
--shadow-floating — Marketing emphasis
--shadow-glass — Glass cards on light surfaces
--shadow-glass-dark — Glass on dark heroes
--shadow-glow — Gradient CTA emphasis
Accessibility standards
Contrast, focus, and semantics
WCAG-oriented defaults for marketing and form experiences.
| Pair | Level | Notes |
|---|---|---|
| foreground on background | AAA body / AA UI | Default reading |
| on-dark on midnight | AA+ | Hero headlines |
| electric-blue links on background | AA | Underline on hover required for body links |
| accent gold on background | Avoid for body | Use for accents only — not long-form text |
Focus
2px ring · offset 2px · electric-blue / 40% ring with ring-offset-background
All interactive elements use focus-visible — never outline:none without replacement.
Touch targets
Minimum 44px (2.75rem) — Buttons and form controls use min-h-11; icon-only controls need padding.
- One h1 per page; section headings step down logically.
- Form fields require visible labels — placeholders are supplementary.
- Status messages use role=status or role=alert.
- Decorative diagrams use aria-hidden; meaningful images need alt text.
prefers-reduced-motion disables motion-* classes and legacy ds-animate-in. Buttons keep instant state changes.
Static SVG assets live in branding/ and public/branding/. Press downloads may be marked placeholder until final ZIP packs ship.
Social proof
Social proof framework
Reusable testimonial, quote, logo, metric, and trust components — premium SaaS layout with honest approval labels. No fabricated KPIs.
Approved customer quotes
No approved quotes on the public site. Placeholder entries in config are hidden — add entries with
status: "approved"after written permission.Component demo — pull quote layout
Layout preview only. Do not use fabricated attribution on public pages.
Component demo — review card layout
Layout preview
Draft
Partner logos (approved only)
Partner logos display monogram placeholders until brand assets are approved for public use.
Technology trust badges
Technology names describe delivery capability — not endorsements or certifications.
Trust indicators
Product-led engineering
Roadmaps shaped around live products — starting with GetPandit on its own domain.
AI-first delivery
LLM features and automation introduced with evals and human oversight before production.
Cloud-ready architecture
Static-first marketing, modular APIs, and AWS-friendly patterns designed to scale.
Marketplace depth
Multi-sided booking, catalog, and partner flows from spiritual-commerce and local marketplace work.
Trust indicators are positioning pillars — not audited certifications or performance guarantees.
Product trust indicators
Pooja services
Structured catalog of pujas and rituals with transparent service details for families.
Pandit discovery
Search and compare pandit profiles based on language, expertise, and availability.
Scheduling
Book ceremony slots with calendar-aware scheduling and confirmation flows.
Notifications
In-app and email updates for booking status, reminders, and schedule changes.
Payment gateway
Architecture prepared for secure online payments and reconciliation.
SMS & WhatsApp
Integration-ready for transactional SMS and WhatsApp booking updates.
Product success metrics
Product domain
Live
getpandit.com serves discovery, catalog, and booking journeys independently.
Corporate separation
Documented
nexynthlabs.com links externally only — no shared auth or payment surface.
Payment gateway
Integration-ready
Architecture and UI seams prepared; go-live scoped per product milestone.
Values describe readiness and delivery signals — not vanity KPIs or unverified performance statistics.
Case study highlights
Pt. Ramesh Sharma
Telugu · Satyanarayana
Pt. Venkat Rao
Hindi · Griha Pravesh
GetPandit
Book your next pooja
Booking confirmed
Griha Pravesh · Tomorrow 9:00 AM
Pt. Ramesh Sharma
Reminder set · Calendar invite sent
GetPandit
Launching GetPandit — trusted pandit booking for modern families
How Nexynth Labs designed and shipped a dedicated booking platform for pooja services on its own domain — discovery, scheduling, and integration-ready payments and messaging.
Problem
Families need reliable pandit discovery, clear pooja packages, and ceremony scheduling — generic appointment software does not reflect ritual context or the trust families expect.
Solution
GetPandit on getpandit.com — structured pandit profiles, pooja catalogs, calendar-aware scheduling, and architecture prepared for payment and messaging integrations, separate from the corporate site.
Outcome
Dedicated live product domain with documented corporate separation — enabling independent releases, clearer SEO, and honest readiness labels instead of vanity metrics.
Highlights summarise published delivery stories — outcomes are qualitative unless explicitly verified.
import { SocialProofBlock, ApprovedCustomerQuotes, CaseStudyHighlightsSection } from "@/components/social-proof";Import from /testimonials or compose blocks via
SocialProofBlock.