Design System

Brand Guidelines

Our visual identity is a reflection of our commitment to precision, clarity, and innovation. This system provides the foundation for building consistent and impactful experiences.

Logo Usage

The Techknomatic logo represents the intersection of data (Activity icon) and human-centric engineering. It should be used consistently to build brand recognition and trust.

Maintain clear space around the logo
Use direct monochromatic versions on complex backgrounds
Techknomatic
Primary Light Theme
Techknomatic
Primary Dark Theme
Techknomatic
Inverted Accent

Color Palette

Our colors are rooted in trust and energy. Deep navy provides stability, while vibrant orange brings dynamic energy to actionable elements.

Brand Primary

#020617

rgb(2, 6, 23)

Used for main backgrounds, navigation, and primary text in light mode.

Brand Surface

#0a0f1d

rgb(10, 15, 29)

A slightly lighter variant for card backgrounds and elevated surfaces.

Brand Utility

#0f172a

rgb(15, 23, 42)

Used for borders, icons, and supporting structural elements in dark mode.

Accent Orange

#F17E21

rgb(241, 126, 33)

Our action color for buttons, active links, and highlighting critical data.

Success

#22c55e

rgb(34, 197, 94)

System feedback color for positive states, growth, and completion.

Typography

Clean, legible, and authoritative. Our primary typeface is Inter, designed for maximum clarity across all digital interfaces.

Primary Font (Sans-Serif)

Inter

Authoritative and modern. Designed for maximum legibility.

Heading 1
Main Headline
72PX / 1.1LH / BOLD
Heading 2

Section Title

40PX / 1.2LH / BOLD
Heading 3

Subsection Title

24PX / 1.3LH / BOLD
Heading 4

Minor Title

20PX / 1.4LH / BOLD
Heading 5
Small Heading
16PX / 1.5LH / BOLD
Heading 6
Accent Heading
14PX / 1.6LH / BOLD
Body Text

Our data-driven strategies empower decision-makers across the enterprise.

18PX / 1.6LH / MEDIUM
Caption Medium

Strategic Overview 2026

14PX / 1.0LH / BOLD
Caption Small

Updated May 2026

11PX / 1.0LH / BLACK

Interactive Elements

Buttons & Actions

Card System

Bento Pattern

Cards use generous rounding and subtle borders to create a soft, high-tech interface.

Iconography Style

Lucide icons on accent tiles — white glyph, orange background

Tell us about your challenge.
We'll tell you exactly how we'd approach it