JS Tech Labs

Overview

JS Tech Labs is a digital systems studio that designs and engineers intelligent business infrastructure—automation, CRM, custom software, and MVPs—for ambitious startups and enterprises. The brand embodies 'Technical Minimalism,' a design philosophy that strips away ornament to reveal pure function and precision. Every pixel serves the system; every interaction communicates clarity and control. The visual language is austere yet energetic: a near-black canvas (#080808) anchors the interface, while a vibrant lime-green accent (#c8f135) punctuates CTAs, system nodes, and moments of activation. Supporting accents in purple (#9a7bff) and electric blue (#4d74ff) represent interconnected data flows and technical depth. The emotional response is one of confidence and sophistication—a studio that speaks the language of infrastructure, not decoration.

The brand voice is precise, technical, and direct. Vocabulary favors systems terminology: 'infrastructure,' 'connected,' 'intelligent,' 'nodes,' 'flows.' Tone is never breathless or casual; instead, it's measured and authoritative, as befits a team engineering mission-critical business systems. Example sentence: 'We build systems that make business move differently—one connected infrastructure, from website to warehouse.'

Colors

The color system is rooted in high contrast and technical clarity. Primary (#c8f135) is the signature lime-green accent used exclusively on call-to-action buttons, active states, and system highlights (e.g., the central AI node in the hero diagram). It commands attention against the dark surface without feeling playful; it is the color of precision and urgency. On-primary is pure black (#080808), ensuring WCAG AAA contrast (19.5:1) for accessibility and legibility at small sizes. Secondary (#9a7bff, a muted purple) and tertiary (#4d74ff, electric blue) represent data connections and technical layers in diagrams and supporting UI elements, creating visual hierarchy without competing with primary. The surface stack is deliberately minimal: surface (#080808) is the near-black canvas, with sur

Typography

The type system is a three-tier hierarchy: Archivo (a geometric sans-serif with high contrast and technical character) anchors display and headline levels, commanding attention with weights from 600 to 900 and tight tracking (-0.015em on display). Inter (a humanist sans-serif with excellent readability) handles body copy and longer-form text at 16–18px with 1.5 line-height for breathing room. JetBrains Mono (a technical monospace) is reserved for labels, navigation, and system annotations, always in 500–600 weight with 0.14–0.18em letter-spacing to evoke code and precision. Display (140px, 900 weight, -0.015em tracking) is used for hero headlines and major section breaks; headline-lg (48px, 700 weight) for subsection titles; headline-md (32px, 700 weight) for card titles. Body-lg (18px, 40

Layout

The layout is a 12-column grid with a max-width of 1500px, centered with 24px horizontal gutters on desktop and 16px on tablet. The page rhythm is driven by large, breathing sections separated by 40px (lg spacing) vertically, creating a sense of deliberate pacing and importance. The hero section spans the full viewport height (min-h-screen) with a 2-column split: the left column (8 columns) contains the headline and copy, while the right column (4 columns) houses the system diagram. Container padding uses the gutter token (24px) consistently, ensuring alignment with the grid. White-space is generous and intentional: the hero headline has 9px (mb-9, or 36px) of margin below it, followed by 36px before the CTA buttons. Section containers use max-w-[1500px] with mx-auto to center content. Spa

Elevation & Depth

Depth in this system is achieved through layered surfaces and subtle shadows, not through dramatic blur or glassmorphism. Level 1 (Base) is the surface background (#080808) with no shadow. Level 2 (Standard Cards & Components) uses surface-container (#141414) with a 1px solid border at outline-variant (#3a3a3a) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated Modals & Overlays) uses surface-container-highest (#202020) with the same border treatment and a deeper shadow: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2). Interactive elements (buttons, inputs) do not cast s

Shapes

The shape philosophy is 'Technical Precision'—minimal rounding that suggests engineering and control rather than softness or playfulness. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px), a subtle curve that feels intentional without being rounded. Cards and elevated surfaces use rounded.md (0.75rem / 12px) for slightly more visual softness while maintaining a technical edge. The hero diagram uses rounded.full (9999px) only for circular nodes (the central AI hub, connection points) and pill-shaped labels (WEBSITE, CRM, AUTOMATION), which are rendered as SVG elements with rx='15' attribute

Components

Action Elements Buttons are the primary interaction mechanism and use JetBrains Mono at 12px, 500 weight, with 0.14em letter-spacing to evoke code and precision. Button-primary (#c8f135 on #080808) has 12px vertical and 32px horizontal padding, a height of 44px, and rounded.DEFAULT (8px). On hover, the background shifts to primary-fixed-dim (#a8d91f) over 150ms. On focus, a 2px outline in primary is applied with a subtle glow (box-shadow: 0 0 0 2px rgba(200, 241, 53, 0.1)). Button-secondary is transparent with a 1px border in outline-variant (#3a3a3a) and on-surface-variant text (#8a8a8a). On hover, the background becomes surface-container-high (#1a1a1a) and text shifts to on-surface (#f4f2ec). Both button variants include a right-pointing arrow (→) in primary or on-surface-variant, re

Do's and Don'ts

**Do**

• Do use primary (#c8f135) exclusively for CTAs, active states, and system highlights—it is the brand's signature accent and must never be diluted or overused.
• Do apply JetBrains Mono to all labels, navigation, and system annotations to reinforce the technical, code-like character of the brand.
• Do maintain 1px solid borders in outline-variant (#3a3a3a) on all cards and elevated surfaces to define the grid-based, technical aesthetic.
• Do use generous white-space (lg spacing: 40px) between major sections to create a sense of deliberate pacing and importance.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to small labels overlaying busy backgrounds (e.g., system diagram annotations) to ensure legibility.

**Don't**

• Don't use rounded corners larger than rounded.lg (1rem) on standard UI components; tighter rounding (8–12px) maintains the technical precision of the brand.
• Don't apply shadows to text or small UI elements; rely instead on color contrast and borders to signal hierarchy and interactivity.
• Don't use secondary (#9a7bff) or tertiary (#4d74ff) as primary accent colors; they are supporting accents for data flows and technical layers only.
• Don't mix font families within a single component; Archivo is for display/headlines, Inter for body, and JetBrains Mono for labels—never blend them.
• Don't use glassmorphism, blur effects, or transparency on surfaces; the system relies on solid colors, borders, and shadows for depth and clarity.