Home

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/tanzaniapetroleum.com -->
<!-- Extracted: 2026-10-23T07:18:55.533Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Home"
description: "Home - Tanzania Petroleum presents a professional web presence."
colors:
  primary: "#000000"
  secondary: "#e9e6ed"
  tertiary: "#007aff"
  neutral: "#444444"
  surface: "#ffffff"
  on-surface: "#ffffff"
  on-surface-secondary: "#444444"
  border: "#200707"
  link: "#5db94d"
typography:
  display-lg:
    fontFamily: "Verdana"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "13px"
    letterSpacing: "-0.26px"
  headline-md:
    fontFamily: "Roboto Condensed"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "20px"
  headline-sm:
    fontFamily: "Open Sans"
    fontSize: "19px"
    fontWeight: "400"
    lineHeight: "20px"
  body-md:
    fontFamily: "Verdana"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "21px"
rounded:
  md: "4px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-ghost:
    textColor: "#5db94d"
    rounded: "0px"
    padding: "0px"
    fontSize: "13px"
    fontWeight: "400"
    borderColor: "#5db94d"
---

# Home — Design System

## Overview

The Home - Tanzania Petroleum design system establishes a professional and authoritative digital presence. The aesthetic is grounded in clarity and directness, reflecting the operational precision inherent in the petroleum industry. This is a design that prioritizes information delivery and user experience through an uncluttered, functional interface. There is no room for playful elements, vibrant gradients, or experimental layouts. The visual language is mature and serious, designed to instill confidence and convey reliability to stakeholders, partners, and the public.

The design deliberately avoids any elements that could be perceived as informal, trendy, or overly decorative. It is not a platform for artistic expression but a tool for clear communication. The focus remains on presenting information efficiently and accessibly, ensuring that the brand's message is delivered without visual distraction. This commitment to professionalism is unwavering, positioning Home - Tanzania Petroleum as a stable and credible entity within its sector.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The color palette is intentionally stark, centered on a primary black (#000000) and a surface white (#ffffff). This high-contrast scheme is fundamental to establishing a professional and serious tone. Black communicates strength, authority, and sophistication, while white ensures readability and a clean, expansive feel. The absence of additional accent colors reinforces the brand's commitment to directness and avoids any potential for visual clutter or distraction, aligning perfectly with the professional archetype.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#000000` | Black |
| secondary | `#e9e6ed` | Lavender |
| accent / tertiary | `#007aff` | Dodger Blue |
| background | `#ffffff` | White |
| text | `#ffffff` | White |
| secondary text | `#444444` | Dark Slate Gray |
| border | `#200707` | Black |
| link | `#5db94d` | Medium Sea Green |
| muted | `#444444` | Dark Slate Gray |

## Typography

The typography system employs a combination of Verdana, Roboto Condensed, and Open Sans. Verdana serves as the primary typeface for its exceptional legibility and robust, professional character, particularly effective for body copy and critical information. Roboto Condensed is utilized for its efficiency and modern, yet understated, presence, suitable for headings and navigational elements where space may be a consideration. Open Sans provides a versatile and clean sans-serif option for supporting text and UI elements. This selection prioritizes clarity, readability, and a consistent professional tone across all textual components, reinforcing the brand's authoritative voice.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Verdana | body | self-hosted | 400 |
| Verdana | heading | self-hosted | 400 |
| Roboto Condensed | heading | google-fonts | 400 |
| Open Sans | heading | google-fonts | 400 |
| -apple-system | body | system | 400 |
| Open Sans | body | google-fonts | 400, 700 |
| Roboto Condensed | body | google-fonts | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Verdana | 13px | 400 | 13px | -0.26px |
| Heading 3 | Roboto Condensed | 12px | 400 | 20px | — |
| Heading 4 | Open Sans | 19px | 400 | 20px | — |
| Body | Verdana | 13px | 400 | 21px | — |

### Conventions

- Heading case — title-case
- Body line-height — 21px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.15) 1px 1px 4px 0px` |

## Shapes

Border-radius scale:

- `md` — 4px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Ghost**

- Text — `#5db94d`
- Radius — `0px`
- Padding — `0px`
- Font size — `13px`
- Font weight — `400`
- Border — ` solid #5db94d`
- Sample copy — "Facebook"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/tanzaniapetroleum.com) | 100% |
| favicon | — | png | [link](brands/tanzaniapetroleum.com/logo-0.png) | 95% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-1.png) | 85% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-2.png) | 85% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-3.png) | 85% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-4.png) | 85% |
| primary | color | jpg | [link](brands/tanzaniapetroleum.com/logo-5.jpg) | 85% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-6.png) | 85% |
| primary | color | png | [link](brands/tanzaniapetroleum.com/logo-7.png) | 85% |
| primary | color | jpg | [link](brands/tanzaniapetroleum.com/logo-8.jpg) | 85% |
| primary | color | — | [link](brands/tanzaniapetroleum.com/logo-9.png) | 85% |
| primary | color | jpg | [link](brands/tanzaniapetroleum.com/logo-10.jpg) | 85% |

## Sources

- Official brand guidelines — https://presspage.com/blog/what-is-a-press-kit-and-what-should-be-in-yours-examples
- Live brand page — https://extractvibe.com/brand/tanzaniapetroleum.com
- Raw JSON — https://extractvibe.com/api/brand/tanzaniapetroleum.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/tanzaniapetroleum.com/design.md
- Extracted — 2026-10-23T07:18:55.533Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md