Skip to content

vijayatechlabs/vijayatech-design

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
assets
assets
 
 
preview
preview
 
 
ui_kits/website
ui_kits/website
 
 
uploads
uploads
 
 
README.md
README.md
 
 
SKILL.md
SKILL.md
 
 
colors_and_type.css
colors_and_type.css
 
 

Repository files navigation

VijayaTech Labs — Design System

AI & Automation Agency. Dark-first, premium B2B positioning. Technical authority, no fluff.

VijayaTech Labs is an AI & automation agency delivering custom web/mobile apps, lead-generation systems, business dashboards, and AI consulting to Indian SMB/mid-market founders and ops leads. It's part of ViswaVardhan Vyapara (VVV), a DPIIT-recognised company builder based in Ananthapuramu, Andhra Pradesh.

Domain: vijayatech.in · Parent: vvv (ViswaVardhan Vyapara OPC Pvt Ltd)

Services (6)

  1. End-to-End Systems — websites + apps + automation stitched into one
  2. Lead Generation — scraping, enrichment, outreach automation
  3. Dashboards — business intelligence, ops reporting
  4. Custom Apps — web + mobile, API integrations
  5. Business Consulting — process + ops strategy
  6. AI Consulting — workflow automation, agent design, LLM integration

Positioning

  • Target buyer: Indian SMB / mid-market — founders, ops leads.
  • Voice: technical authority, direct, no fluff. Pragmatic, not preachy.
  • Tech stack (stated): Next.js 15 + Tailwind CSS.
  • Primary CTA (every page): "Book a Strategy Call".

Sources

Source Status Notes
uploads/VijayaTech_labs_logo1.png ✅ imported Primary logo — binary-globe mark + typewriter wordmark
uploads/VijayaTech_labs_logo1-1200x929.png ✅ imported Larger copy of same logo
uploads/vijayatech-favicon.png ✅ imported Favicon (globe glyph only)
GitHub: vijayatechlabs/vijayatech-web ⚠️ empty repo The "Modern website 2.0" repo contains no files on main as of this build
GitHub: vijayatechlabs/vvv 📎 reference only Parent-company site. Uses a different brand system (navy + gold, DM Serif). Used only to confirm VijayaTech Labs' tagline & positioning, not for visual cues.
Brand brief (user-supplied) ✅ authoritative Dark theme, violet/cyan, Inter + JetBrains Mono. This file trumps the legacy logo's color palette.

Tagline (from VVV site copy): "AI & Automation Agency — Digital automation for your business."

Index

README.md              ← you are here
SKILL.md               ← machine-readable skill entry point
colors_and_type.css    ← tokens + base type; the single source of truth for CSS vars
assets/                ← logo, favicon, brand illustrations
preview/               ← design-system cards (swatches, specimens, components)
ui_kits/
  website/             ← marketing-site UI kit (React recreation)
fonts/                 ← (empty — fonts loaded from Google Fonts; see note below)

Fonts note

No local font files were provided. The system loads Inter and JetBrains Mono via Google Fonts @import in colors_and_type.css. If you need offline or self-hosted fonts, drop .woff2 files into fonts/ and swap the @import for @font-face declarations.

Content fundamentals

Voice: technical authority, plain-spoken. The reader is a busy founder or ops lead. Assume they know their business and don't need to be sold on automation's value in the abstract — they need to know what you'll ship, what it costs, and how fast.

  • Person: We (the agency) build your systems. "You" is the second-person address; "I" is rarely used except in personal testimonials.
  • Tense: present and active. We build, we deliver, we ship — never we can help you with.
  • Casing: Title Case for navigation + section headers. Sentence case inside cards and body. Button copy is Title Case ("Book a Strategy Call", "See the Process"). Labels/eyebrows are UPPERCASE MONO.
  • Numbers: prefer concrete counts. 6 services, 14+ years, 250+ clients, 48-hour turnaround. Avoid "several" or "many."
  • Lists: three- to five-item lists are the workhorse. Each item is 1–2 sentences, never a paragraph.
  • Emoji: ❌ never in marketing copy or UI chrome. Reserved only for status bullets when a checkmark or × is more legible than text.
  • Exclamations: avoid. One per page maximum, and only in a testimonial.
  • Jargon: allowed when it's the right word (RAG, ETL, CRM, REST API, LLM). Define on first use if aimed at non-technical ops leads. Never stack jargon to sound smart.
  • Call-to-action: every page, above and below the fold — "Book a Strategy Call". Secondary CTAs: "See the Process", "View Case Studies", "See Pricing".

Examples (written in-voice):

Hero H1: Automation that pays for itself in a quarter. Hero sub: We ship end-to-end systems — websites, apps, dashboards, AI workflows — for Indian SMBs that are done gluing tools together.

Service card: Lead Generation. Scrape, enrich, and route leads to the right inbox without a human touching the pipeline. Typical build: 2–3 weeks.

Eyebrow (mono, uppercase): SERVICE_06 · AI_CONSULTING

Tone to avoid: "Leverage our synergistic AI-powered solutions to transform your digital journey." We'd rewrite that as: "We automate the ops work you're still doing by hand."

Visual foundations

Palette

  • Background: #09090B page, #18181B surface, #1F1F23 elevated. No pure black, no pure white.
  • Primary: Violet #7C3AED. Used sparingly — primary buttons, links, the one brand moment per section. Hover #8B5CF6, press #6D28D9.
  • Accent: Cyan #06B6D4. Used for eyebrows, active-state indicators, small data-viz highlights. Never as a large fill.
  • Neutrals: Zinc ramp from 50 (#FAFAFA) to 950 (#09090B). Body text is #A1A1AA. Captions #71717A.
  • Colored glows: allowed on hero imagery and the primary CTA only. See --glow-primary / --glow-accent.

Typography

  • Sans: Inter — 400/500/600/700/800. Tight tracking on display sizes (-0.02em). Normal tracking on body.
  • Mono: JetBrains Mono — reserved for: code, terminal output, eyebrows (uppercase + 0.12em tracking), data labels, IDs, and service-code badges (SERVICE_06).
  • Scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60 / 72. Display type uses clamp() between 48–72px.

Spacing + layout

  • Base unit: 4px. Canonical scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96.
  • Page container: max-width: 1200px, gutter 24px on mobile, 48px desktop.
  • Section rhythm: 96px top/bottom between sections. 64px between sub-sections.
  • Card padding: 24px small, 32px medium, 48px hero.

Radii

  • 8px — default for buttons, inputs, small surfaces.
  • 12px — cards, modals, larger surfaces.
  • 20px — pills, capsule badges, tag chips.
  • 4–6px — inline code, micro chips.
  • 9999px — avatars, icon buttons, toggle thumbs only.

Borders

  • Default: 1px solid #27272A on every surface. The border is what separates one dark panel from the next — it's doing the job a shadow would do in a light UI.
  • Strong: #3F3F46 for emphasized surfaces (hover, selected).
  • Subtle: #1F1F23 for barely-there dividers on already-dark bg.
  • Colored: rgba(124, 58, 237, 0.4) for active state on primary inputs/buttons.

Shadows & elevation

Dark UIs get elevation from bordered surfaces + subtle black drop shadows, not from light-source shadows. Use:

  • --shadow-xs / --shadow-sm — rarely. Borders do most of the work.
  • --shadow — menu popovers, toasts.
  • --shadow-lg / --shadow-xl — modals, command palette.
  • --glow-primary / --glow-accent — hero button, feature spotlight. One per screen maximum.

Backgrounds

  • Default: flat #09090B. No gradients by default.
  • Hero: radial violet glow top-center, fading to #09090B. Allowed once per page.
  • Decorative: a 1px violet→transparent grid at 48px spacing, at 4% opacity. Used behind hero or stats strips.
  • Full-bleed imagery: used only for case-study headers. Treat product screenshots with a 1px violet border and cyan corner-tick marks.
  • Patterns/textures: NO textures, noise, grain, or hand-drawn illustrations. The brand is engineered, not crafted.

Motion

  • Default easing: cubic-bezier(0.22, 1, 0.36, 1) (ease-out). No bounce.
  • Durations: 120ms micro (hover), 200ms standard (open/close), 320ms page-level.
  • Use: opacity + transform only. No color animation. No layout animation.
  • Never: bouncy springs, overshoots, long (>500ms) transitions, parallax.

States

  • Hover: lighten bg by one step (e.g. #18181B → #27272A); stroke borders shift to --border-strong. Primary button shifts violet 600 → 500.
  • Press: scale 0.98, violet 600 → 700. No color flash.
  • Focus: 2px violet outline with 2px offset (--primary at 100% opacity). Keyboard only (:focus-visible).
  • Disabled: opacity 0.4, cursor not-allowed.

Transparency + blur

  • Translucent surfaces: sticky nav uses rgba(9, 9, 11, 0.72) + backdrop-filter: blur(12px). That's the main use.
  • Overlays: modal backdrop rgba(0, 0, 0, 0.72) + blur(4px).
  • Do not use frosted glass inside content surfaces. Dark cards should be opaque.

Cards

A VijayaTech card is: opaque surface #18181B · 1px border #27272A · radius 12px · padding 24–32px · no shadow by default. On hover: border to #3F3F46, an optional 1px violet top edge (::before) fades in. Never use a colored left border as the only accent — that trope is banned.

Imagery

  • Cool palette, never warm. Black backgrounds with violet / cyan highlights.
  • Product screenshots: rendered in-context inside a dark browser chrome or app frame. No floating laptops.
  • People photos: desaturated 20%, slight cool cast. Avoid stock photography of "diverse teams in an office."
  • No hand-drawn illustrations. No isometric illustrations.

Fixed elements

  • Sticky top nav — translucent bg, blur 12px, border-bottom 1px. Height 64px.
  • Floating "Book a Strategy Call" CTA on mobile only — bottom-center, 56px tall, primary fill. Appears after 40% scroll.

Iconography

System in use: Lucide (CDN: https://unpkg.com/lucide@latest or lucide-react on npm). This matches the icon set used across the VVV parent repo and is ideal for the dark/violet aesthetic — thin 1.5px strokes, 24×24 grid, fully open-source.

  • Stroke weight: 1.5px at 16/20/24/28. At 48px+ use 2px.
  • Color: inherit currentColor. Muted icons use --fg-muted; active state uses --accent (cyan) or --primary (violet).
  • Size scale: 14 / 16 / 20 / 24 / 32 / 48.
  • Corners: round (stroke-linecap: round; stroke-linejoin: round) — matches Lucide's defaults.

Brand mark: the globe-of-binary-digits in assets/logo.png is a legacy-but-retained mark. Keep it on the about page and footer. In chrome (nav, favicon) use the favicon-cropped globe.

Emoji: never in UI. Optional in longform blog content, sparingly.

Unicode glyphs: use → (right arrow) in CTA copy ("Book a Strategy Call →"). Avoid ✨ 💡 🚀. Acceptable bullet: · (middle dot) between meta fragments.

Service-code badges: monospace uppercase with underscores, e.g. SERVICE_06 · AI_CONSULTING. These are a visual-system motif, not real Lucide icons.

UI Kits

Kit Path Purpose
Website ui_kits/website/ Marketing site recreation — nav, hero, services grid, process, testimonial, footer. React + inline Babel, dark theme.

Design principles

  1. Dark-first, never dark-mode. This system only ships in dark. Don't build a light variant unless explicitly asked.
  2. One brand moment per screen. One violet glow. One hero illustration. One colored CTA. Everywhere else: neutral.
  3. Borders > shadows. In dark UIs, borders carry elevation. Reserve shadows for floating layers.
  4. Monospace is a label. Any time you need to say "this is a technical thing" — a service code, a status, a numeric stat — use JetBrains Mono.
  5. No fluff, no filler. Copy earns its place. If a section is light on content, cut it, don't pad it.

About

Modern website 2.0

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages