The Teksag flame

Our existing logo stays: a flame held inside an open ring, with "Teksag" in heavy type and "ENERGY" set in flame red beneath it. The flame is our energy heritage since 1987. The ring is the platform that carries it. We've redrawn it as a clean vector with flat colour, so it stays sharp on dark screens and at favicon size.

Original master

This is the logo as it appears in the Company Profile. Use it as the reference for colour and proportion. The file is a 527 × 372 JPG on white, which is too small for print and can't sit on dark backgrounds. Ask the original designer for the vector master (AI, EPS or SVG). Until then, use the redraw on this page for all digital work.

Don't

Ink, plus four signals

A deep blue-black base with one signal colour per practice. Signals mark state and category. They are never used as large fills. Click any swatch to copy its hex.

Ink (neutrals)

Signals

Proportion

Contrast on Ink 950: Text ≈16:1, Text-2 ≈8.5:1, Volt ≈5.7:1, Mint ≈12:1. Text-3 (4.4:1) is for captions and labels only, never body copy.

Geometric, precise, readable

Outfit carries headlines with its round geometric forms. Plus Jakarta Sans handles running text. JetBrains Mono labels data, codes and tokens, anywhere a machine would print the value.

A 4-point grid

Spacing steps are multiples of 4. Radius grows with the size of the object. Depth comes from lighter surfaces and hairlines, with a coloured glow reserved for the primary action.

Spacing scale

Radius

Surfaces

Core components

Every component here is live. Hover and tab through them to see their states.

Charts that show their confidence

Charts are part of the brand, not stock decoration. The rules below apply to client dashboards, pitch decks and the website alike.

Live example

See the forecasting dashboard on the Data & Analytics page.

Current, not confetti

Motion shows data moving: packets along a line, a chart drawing itself, a confirmation arriving. It never decorates for its own sake, and all of it stops when the viewer prefers reduced motion.

--t-fast 140ms (hover) · --t-base 240ms (state) · --t-slow 600ms (enter)

Plain, confident, specific

We write like engineers explaining a solution to a smart client: short sentences, real numbers, no hype. Here is the company profile rewritten in the new voice.

Site map

Six top-level pages replace the single scrolling page. Each page carries its practice colour. TEEP gets its own gateway page and links out to teep.africa.

Tokens and stack for the production site

Drop these tokens into the Next.js or Astro project so the site, dashboards and TEEP marketing pages all share one source of truth.

// tailwind.config.ts — Teksag design tokens v1.0
export default {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        ink:    { 950: "#0B0F19", 900: "#0F1524", 850: "#131A2B", 800: "#1A2338", 700: "#242F48" },
        text:   { DEFAULT: "#E9EEF8", 2: "#A3AEC6", 3: "#6E7A94" },
        volt:   "#3D8BFF", // Software
        violet: "#9B7BFF", // Data & ML
        mint:   "#2EE6A6", // TEEP, success
        amber:  "#FFB547", // Energy heritage, warnings
        danger: "#FF5C7A",
        flame:  "#F0373F", // logo only
      },
      fontFamily: {
        display: ["Outfit", "system-ui", "sans-serif"],
        sans:    ["Plus Jakarta Sans", "system-ui", "sans-serif"],
        mono:    ["JetBrains Mono", "ui-monospace", "monospace"],
      },
      borderRadius: { sm: "6px", md: "10px", lg: "16px", xl: "24px" },
      transitionTimingFunction: { signal: "cubic-bezier(.2,.7,.2,1)" },
      transitionDuration: { fast: "140ms", base: "240ms", slow: "600ms" },
      boxShadow: { glow: "0 8px 30px -8px rgba(61,139,255,.7)" },
    },
  },
};

Recommended stack