<!-- Generated by ExtractVibe — https://extractvibe.com/brand/tezpass.com -->
<!-- Extracted: 2026-08-12T13:54:50.510Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "TezPass — One Pass. Every Charger."
description: "TezPass projects a clean, functional, and accessible vibe, prioritizing clarity and ease of use over emotional flair. The design is utilitarian yet modern, using a bright accent color to signal energy and efficiency within a neutral, trustworthy framework. It feels like a reliable tool designed for seamless daily utility."
colors:
  primary: "#00c9a7"
  tertiary: "#374151"
  neutral: "#8b93a7"
  surface: "#ffffff"
  on-surface: "#374151"
  on-surface-secondary: "#8b93a7"
  link: "#374151"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "76px"
    fontWeight: "600"
    lineHeight: "81.32px"
    letterSpacing: "-1.9px"
  headline-sm:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "21px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#0a0e1a"
    textColor: "#ffffff"
    rounded: "3.35544e+07px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "1px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.22) 0px 12px 32px 0px"
  button-primary:
    backgroundColor: "#00c9a7"
    textColor: "#0a0e1a"
    rounded: "3.35544e+07px"
    padding: "8px 24px"
    fontSize: "14px"
    fontWeight: "700"
    borderColor: "#0a0e1a"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.25) 0px 2px 12px 0px"
  button-outline:
    rounded: "3.35544e+07px"
    padding: "4px 8px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
---

# TezPass — One Pass. Every Charger. — Design System

## Overview

TezPass embodies a utilitarian modernism that prioritizes function and clarity above all else. Drawing inspiration from Stripe, Uber, and Linear, the design system rejects decorative excess in favor of a clean, accessible interface that feels like a reliable tool for daily use. The visual language is grounded in the archetypes of The Everyman and The Sage, projecting trustworthiness and efficiency without emotional flair. This is a system designed for seamless integration into the user’s workflow, where every element serves a clear purpose. The interface is not playful, whimsical, or overly stylized; it is direct, neutral, and highly functional. The aesthetic is one of quiet competence, using whitespace and structured layouts to reduce cognitive load and enhance usability. The design atmosphere is crisp and professional, ensuring that users feel confident in the platform’s reliability. By adhering to these principles, TezPass creates a digital environment where the focus remains squarely on the task at hand, delivering a frictionless experience that respects the user’s time and attention. The overall feel is one of streamlined efficiency, where modern design sensibilities meet practical utility to create a cohesive and intuitive user journey.

**Key characteristics:**

- Vibe — utilitarian, clean, accessible, efficient, modern, functional
- Archetypes — The Everyman, The Sage
- Comparable to — Stripe, Uber, Revolut, Linear
- Design era — contemporary-minimal
- Emotional tone — reliable-efficient
- Target audience — EV drivers in India seeking convenience, tech-savvy early adopters, and fleet operators looking for simplified payment solutions.
- Visual energy — 6/10 (moderate)

## Colors

The palette centers on #00c9a7, a bright teal that signals energy and efficiency, set against a pure white surface. This high-contrast combination ensures immediate visual clarity and accessibility, guiding user attention to interactive elements without distraction. The neutral framework provides a trustworthy backdrop, allowing the accent color to function as a precise tool for status and action, reinforcing the brand’s commitment to functional simplicity.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#00c9a7` | Dark Turquoise |
| accent / tertiary | `#374151` | Dark Slate Gray |
| background | `#ffffff` | White |
| text | `#374151` | Dark Slate Gray |
| secondary text | `#8b93a7` | Dark Silver |
| link | `#374151` | Dark Slate Gray |
| muted | `#8b93a7` | Dark Silver |

## Typography

Inter is the sole typeface, chosen for its neutrality, legibility, and modern geometric structure. The hierarchy relies on weight and size rather than font variety, creating a clear, readable flow that supports dense information without visual clutter. This mono-font approach ensures consistency across all components, reinforcing the utilitarian ethos and ensuring that content remains the primary focus, accessible to all users regardless of context or device.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 400, 500, 700 |
| Inter | heading | google-fonts | 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 76px | 600 | 81.32px | -1.9px |
| Heading 4 | Inter | 14px | 600 | 21px | — |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.22) 0px 12px 32px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.25) 0px 2px 12px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.35) 0px 0px 28px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right, oklab(0 0 0 / 0) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 50%, oklab(0 0 0 / 0) 100%)`
- `linear-gradient(to right, oklab(0 0 0 / 0) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.25) 50%, oklab(0 0 0 / 0) 100%)`
- `linear-gradient(to right top, oklab(0.74603 -0.140435 0.013133 / 0.4) 0%, oklab(0.623083 -0.0332476 -0.185052 / 0.2) 50%, oklab(0.585404 0.0252827 -0.202483 / 0.4) 100%)`
- `linear-gradient(to right top in oklab, rgb(0, 201, 167) 0%, rgb(99, 102, 241) 100%)`

## Components

### Buttons

**Secondary**

- Background — `#0a0e1a`
- Text — `#ffffff`
- Radius — `3.35544e+07px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.22) 0px 12px 32px 0px`

**Primary**

- Background — `#00c9a7`
- Text — `#0a0e1a`
- Radius — `3.35544e+07px`
- Padding — `8px 24px`
- Font size — `14px`
- Font weight — `700`
- Border — ` solid #0a0e1a`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 201, 167, 0.25) 0px 2px 12px 0px`
- Sample copy — "Login"

**Outline**

- Radius — `3.35544e+07px`
- Padding — `4px 8px`
- Font size — `16px`
- Font weight — `500`
- Sample copy — "Explore Networks"

## Do's and Don'ts

### Do

- Use Inter font family exclusively: 600 weight for headings (sentence-case) and 400/500/700 for body text with a strict 24px line-height.
- Apply #00c9a7 (Teal) as the primary brand color for key interactive elements and accents, contrasting against #ffffff backgrounds.
- Style primary CTA buttons with #00c9a7 background, #0a0e1a text, 8px 24px padding, and a 3.35544e+07px (pill) border-radius.
- Style secondary buttons with #0a0e1a background, #ffffff text, and a 3.35544e+07px (pill) border-radius.
- Use #374151 for all primary text and accent elements to ensure high readability against light backgrounds.
- Keep shadows at rgba(0, 0, 0, 0) 0px 0px 0px 0px (flat design); do not apply drop shadows to UI components.
- Use heavy emoji usage in marketing copy to add visual interest, but keep exclamations rare and professional.
- Utilize short, action-oriented imperative verbs for CTAs (e.g., 'Tap', 'Charge', 'Explore') and keep vocabulary simple and jargon-free.

### Don't

- Do not use title case for headings; strictly adhere to sentence-case conventions.
- Do not use serif fonts; the brand is exclusively sans-serif (Inter).
- Do not apply drop shadows or depth effects; maintain a flat, 2D aesthetic.
- Do not use vibrant or saturated colors other than #00c9a7 for primary accents; avoid clashing hues.
- Do not use complex gradients; if used, they should be subtle transitions from transparent to near-transparent white/black.
- Do not use long, complex sentences; keep copy concise and parallel in structure.
- Do not use sharp corners (0px radius) for buttons; always use the pill shape (3.35544e+07px).
- Do not use excessive punctuation; avoid multiple exclamation marks or enthusiastic punctuation.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — simple
- Jargon — none
- CTA style — short, action-oriented imperative verbs
- Rhetorical devices — repetition, parallelism, tricolon

### Sample copy

> One Pass.Every Charger.

> Tap once, charge anywhere, drive further.

> Access India's rapidly growing EV charging ecosystem through a single, seamless experience.

> Connect to every major network with just one pass.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | webp | [link](brands/tezpass.com/logo-0.webp) | 95% |
| primary | — | svg | [link](brands/tezpass.com/logo-1.svg) | 85% |

## Sources

- Official brand guidelines — https://tezpass.com/brand
- Live brand page — https://extractvibe.com/brand/tezpass.com
- Raw JSON — https://extractvibe.com/api/brand/tezpass.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/tezpass.com/design.md
- Extracted — 2026-08-12T13:54:50.510Z
- Generator — ExtractVibe vv1
- Quality score — 100/100