Brand Overview

JCP-VISION is an engineering-first company. Our brand reflects precision, technical excellence, and a pragmatic approach to problem-solving. We avoid marketing fluff in favor of clear, direct communication and functional design.

precision_manufacturing

Technical Precision

Every pixel and line of code serves a purpose. We value accuracy and reliability over decoration.

code_blocks

Modular Systems

We build scalable, interconnected systems. Our brand identity mirrors this modularity.

bolt

High Performance

Speed and efficiency are core to our products and our visual language.

Color System

Our color palette is minimal and purposeful. We use a vibrant green as our primary action color, supported by a neutral scale of greys for structure and readability.

Primary Brand Colors

Primary Green var(--jcp-primary)
#68de7e Main actions, highlights, logo suffix.
Primary Dark var(--jcp-primary-dark)
#4db861 Hover states, dark mode text accents.

Neutral Scale (Light Mode)

Background

#f9fafa

Surface

#ffffff

Border

#E5E7EB

Text Secondary

#4B5563

Text Main

#111827

Neutral Scale (Dark Mode)

Background

#101318

Surface

#1A1E24

Surface Darker

#15181E

Border

rgba(255,255,255,0.05)

Text Secondary

#9ca3af

Text Main

#ffffff

Typography

We use a multi-font system: Google Sans Text as the primary display font (with Manrope as fallback) for headings and body text, ensuring readability and a modern technical feel. Inter is used exclusively for the logo to maintain brand recognition.

Display Typeface

Google Sans Text

Aa Bb Cc Dd Ee Fg 123

Fallbacks: Google Sans, Manrope, sans-serif
Usage: Headings, Display Text
Body Typeface

Manrope

Aa Bb Cc Dd Ee Fg 123

Weights: 300, 400, 500, 600, 700, 800
Usage: Body Copy, UI Elements
Logo Typeface

Inter

JCP-VISION

Weights: 600 (Semi-Bold)
Usage: Logo Lockups ONLY

Type Scale

Heading 1

Technical Excellence

text-5xl font-extrabold tracking-tight
Heading 2

System Architecture

text-3xl font-bold
Heading 3

Component Design

text-xl font-bold
Body Large

Our brand reflects precision, technical excellence, and a pragmatic approach to problem-solving.

text-lg text-secondary
Body Base

Every pixel and line of code serves a purpose. We value accuracy and reliability over decoration.

text-base text-secondary

Layout & Spacing

Our layout system is built on a flexible 12-column grid. We use consistent spacing scales to establish rhythm and hierarchy.

Container

max-width: 1280px
Max Width
1280px
Padding X
24px (px-6)
Navbar Height
64px (h-16)

Vertical Spacing

Section Padding
py-24 (96px)

Standard vertical padding for major page sections.

Component Gap
gap-6 (24px)

Standard gap between cards in a grid or stack.

Text Flow
space-y-4 (16px)

Vertical spacing between headings and paragraphs.

UI Components

Reusable components that ensure consistency across the application.

Buttons

<button class="bg-primary hover:bg-primary-dark text-white rounded-md h-12 px-8 font-bold shadow-md transition-all duration-200 active:scale-95">
  Get Started
</button>
<button class="border border-gray-300 dark:border-white/20 bg-white/50 dark:bg-white/5 text-text-light-main dark:text-white rounded-md h-12 px-8 font-bold hover:border-primary hover:text-primary transition-all duration-200">
  Learn More
</button>

Cards

layers

Card Title

Standard content card with hover elevation. 

<div class="bg-white dark:bg-surface-dark rounded-xl border border-border-light dark:border-white/5 p-8 hover:border-primary/50 hover:shadow-lg transition-all duration-300">
    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary mb-4">
        <span class="material-symbols-outlined">layers</span>
    </div>
    <h4 class="text-lg font-bold mb-2 text-text-light-main dark:text-white">Card Title</h4>
    <p class="text-sm text-text-light-secondary dark:text-text-dark-secondary">
        Card description content.
    </p>
</div>

Form Inputs

<div>
    <label class="block text-sm font-medium text-text-light-secondary dark:text-text-dark-secondary mb-1">Email Address</label>
    <input type="email" placeholder="[email protected]" class="w-full bg-white dark:bg-background-dark border border-gray-300 dark:border-white/10 rounded-md px-4 py-3 text-text-light-main dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
</div>

Motion & Interaction

Motion should be used sparingly and purposefully. It guides the user, provides feedback, and alerts without being distracting.

Timing Functions

Fast (150ms)

Used for small micro-interactions like button hovers and toggles.

Base (300ms)

Standard duration for content movement, card hovers, and simple fades.

Slow (600ms)

Used for large layout changes, page transitions, and complex entrances.

Entrance Patterns

Fade & Zoom In animate-in fade-in zoom-in
Slide From Bottom slide-in-from-bottom-8

Tone of Voice

We sound like engineers talking to other engineers—precise, competent, and devoid of marketing fluff. We state the facts and let our capabilities speak for themselves.

check_circle Do This

  • › Be Specific "Our system processes 5TB of data daily with 99.9% uptime."
  • › Use Technical Terminology Correctly use industry terms like "Scalable architecture," "Latency," and "Bandwidth."
  • › Focus on Utility Highlight exactly what problem the product solves and how it works.

cancel Avoid This

  • › Vague Hype "We are revolutionizing the world with game-changing synergy."
  • › Over-exclamation Avoid exclamation marks unless absolutely necessary for a warning or alert.
  • › Marketing Jargon Avoid "Best-in-class," "Cutting-edge," and "Solutions provider" without qualifying data.

Implementation

Resources and guidelines for implementing the brand across different platforms.

Global Stylesheet

Include this link in the <head> of any project to inherit the core brand styling (colors, fonts, logo). 

<!-- RECOMMENDED: Use JCP-VISION hosted stylesheet for constant updates -->
<link rel="stylesheet" href="https://jcp-vision.com/static/css/brand-styles.css">

<!-- Local projects (self-hosted) -->
<link rel="stylesheet" href="/static/css/brand-styles.css">

Accessibility Checklist

check

Contrast Ratio

Ensure text meets AA standards (4.5:1) against its background.

check

Semantic HTML

Use proper heading hierarchy (h1-h6) and semantic tags (nav, main, aside).

check

Focus States

Interactive elements must have visible focus indicators for keyboard navigation.

Design Tokens (JSON)

{
  "colors": {
    "primary": "#68de7e",
    "primaryDark": "#4db861",
    "background": {
      "light": "#f9fafa",
      "dark": "#101318"
    },
    "surface": {
      "light": "#ffffff",
      "dark": "#1A1E24",
      "darker": "#15181E"
    },
    "text": {
      "light": {
        "main": "#111827",
        "secondary": "#4B5563"
      },
      "dark": {
        "main": "#ffffff",
        "secondary": "#9ca3af"
      }
    },
    "border": {
      "light": "#E5E7EB",
      "darkOpacity": "rgba(255, 255, 255, 0.05)"
    }
  },
  "typography": {
    "fonts": {
      "display": ["Google Sans Text", "Google Sans", "Manrope", "sans-serif"],
      "body": ["Manrope", "sans-serif"],
      "logo": ["Inter", "sans-serif"],
      "mono": ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "monospace"]
    },
    "weights": {
      "regular": 400,
      "semibold": 600,
      "bold": 700,
      "extrabold": 800
    }
  },
  "spacing": {
    "container": "1280px",
    "containerPadding": "24px",
    "sectionPadding": "96px",
    "navbarHeight": "64px"
  },
  "transitions": {
    "fast": "150ms",
    "base": "300ms",
    "slow": "600ms"
  }
}