Opexminds

Brand & Design System

Integrated Brand & Design System V1.0

Version Date: August 04, 2026

Brand Foundation

Brand Purpose

"Opexminds: Building intelligent systems, operating platforms with infinite potential, and real impact."

Brand Narrative

Opexminds exists at the frontier where artificial intelligence meets operational excellence. We are not merely a software studio - we are architects of intelligent infrastructure, builders of systems that learn, adapt, and scale beyond the boundaries of conventional engineering.

Brand Values

Every product we deploy carries the Opexminds ethos: precision without compromise, intelligence without complexity, and impact without noise. We build for engineers who demand more - more reliability, more intelligence, more velocity - while maintaining the rigorous standards that define the best in class.

MISSION

Make operational intelligence a dependable, compounding advantage.

We turn complex data, infrastructure and decisions into systems that create clarity today and learn their way to better outcomes tomorrow.

AI-Native PlatformsOperational IntelligenceScalable Infrastructure

Intelligence

AI-native from the ground up. Every system learns, every platform evolves with use.

Precision

Technical excellence is non-negotiable. We measure everything and leave nothing to chance.

Velocity

Operating at the speed of modern infrastructure - deploy in minutes, not months.

Impact

We don't ship features; we engineer measurable results with lasting organizational value.

Identity System

Logo Deep Dive

Core Logo Lockups

Opexminds

Primary Horizontal

OpexmindsVertical Lockup

Symbol Only

OpexmindsWordmark Only

Grid & Construction

The symbol is constructed on an 8px base unit. All vertices align to the 8px grid. Outer form spans 122.748 x 104.092 units - a 1.18:1 width-to-height ratio.

Clearance Zones

Min clearance0.5x

Preferred clearance1x

X = symbol height104 units

Min digital size24px

Do's & Don'ts

Color Architecture

Color System

Primary Palette

Secondary Palette

Color Usage Rules

Semantic Status & Gradients

SUCCESS

#34C759 - Confirmed, healthy, completed.

WARNING

#FF9500 - Watch state, needs attention.

ERROR

#FF3B30 - Failure, destructive actions, blocking.

Vivid to Electric for data depth and brand-led transitions.

Type System

Typography

ABCDEF abcdef

Primary Display

Cabinet Grotesk

Headlines, wordmarks and display type. Bold geometric personality with technical precision. Weight range 400-700.

ABCDEF abcdef

Body & UI Text

Inter

Optimized for reading at small sizes. Clean, neutral and highly legible in both dark and light contexts.

ABCDEF abcdef

Data, Code & Labels

JetBrains Mono

Technical labels, code snippets, versions and structured data output where alignment makes meaning clearer.

Character Specimen

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 ! ? @ # $ % & ( ) / : ; + =

Sphinx of black quartz, judge my vow. Opexminds builds intelligent operations.

Type Hierarchy

Imagery & Voice

Imagery & Tone of Voice

Visual Mood Board

Approved: Abstract technical textures, dark-mode interfaces, geometric precision, monochrome depth, clean data visualizations. Not approved: Stock photography of people, handshakes, generic business imagery, bright saturated photos.

Brand Adjectives

Voice Guidelines

WE ARE

→ Technically precise and direct
→ Confident without arrogance
→ Informative and dense with signal
→ Future-oriented with present proof

WE ARE NOT

✕ Buzzword-heavy or vague
✕ Casual or informal in core copy
✕ Explaining obvious concepts
✕ Hyperbolic ("revolutionary", "best-ever")

System Architecture

Design System Overview

Atomic Design - Layer Model

FOUNDATION

System Principles

Global Tokens

The foundation layer. Every visual decision in the system originates from these tokens - spacing, radius, borders, and grids.

4px Base Spacing Scale

Layout Grids

DESKTOP - 1440

12 columns, 24px gutter, 80px margin

TABLET - 1024

8 columns, 16px gutter, 32px margin

MOBILE - 390

4 columns, 12px gutter, 16px margin

Corner Radius

Border, Stroke & Elevation

DEFAULT1px solid white 8%Containers and baseline structure.

SUBTLE1px solid white 6%Hairline grids and related content.

HOVERVivid Blue 50%Interactive surface discovery.

FOCUS2px Vivid BlueVisible keyboard focus with 2px offset.

ELEVATION0 / 4 / 12 / 24pxCanvas, card, menu and modal layers.

Core Atoms

Key Elements & Atoms

Buttons - Primary States

Buttons - Secondary & Destructive

Inputs

Focus uses 2px Vivid Blue ring. Errors are textual and contextual.

Components

DATA CARD

System Health

99.97%

Rolling 30-day availability. +0.08% from previous period.

DEPLOY CARD

api-gateway-v3.2

Production, us-east-1, 3 replicas

NAVIGATION PATTERN

OverviewActive

Observability

Configuration

Deployment successful
Traffic has shifted to the new revision.

Watch latency
p99 has exceeded the 250ms advisory threshold.

Configuration blocked
A required environment variable is missing.

Modal Preview

Confirm production deploy

This action applies revision 3.2 to all production regions. Health checks will run before traffic shifts.

Progress Indicators

Deploy progress68%

Cache warmup100%

Theme System

Theming

The system uses semantic variables, not separate component designs. Every surface, text level and state resolves through one token architecture.

Dark to Light Token Mapping

UX Patterns

Design Patterns

Multi-Step Flow - Deploy Software Pattern

EMPTY STATE

No deployments yet

Create your first deployment to connect a source, choose an environment and establish a monitored release path.

LOADING STATE

Skeletons mirror final layout and retain spatial context while data resolves.

ERROR RECOVERY

Connection interrupted

Your draft is retained locally. Check your network connection, then retry without rebuilding the form.

Code Reference

Code Snippets

tokens.css

:root {
  --ox-black: #080808;
  --ox-white: #FCFCFC;
  --ox-vivid: #1B5EFF;
  --ox-electric: #00C8FF;
  --space-4: 16px;
  --font-display: 'Cabinet Grotesk';
}

OpexButton.tsx

export function OpexButton({ loading, children }) {
  return (
    <button className="ox-primary"
      disabled={loading}>
      {loading ? <Spinner /> : children}
    </button>
  )
}

theme.css

html[data-theme="light"] {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --text: #0F172A;
  --electric: #0055CC;
}

logo.svg

<svg viewBox="0 0 122.748 104.092">
  <use href="#ox" />
</svg>

// Symbol is inline and themeable

OpexCard.tsx - Full Component Example

import { useC } from '@opexminds/tokens'

export function OpexCard({ title, metric, status }) {
  const C = useC()
  return (
    <div style={{
      background: C.dark,
      border: `1px solid ${C.t08}`,
      padding: '24px'
    }}>
      <h3>{title}</h3>
      <span style={{ color: C.electric }}>
        {metric}
      </span>
    </div>
  )
}

Motion Design

Motion & Timing Curves

Motion communicates hierarchy and state. Every animation has a purpose - feedback, spatial consistency, or preventing jarring changes.

Motion Duration Tokens - Click tracks to animate

Viewport Dynamics

Sticky Header Collapse

Trigger: scrollY > 64px. Height: 64px to 48px. 200ms ease-in-out. Background opacity reaches .97 at 80px scroll.

Virtualized List Loader

Buffer: 3x viewport. Eight skeleton rows. 1.5s shimmer cycle. Overscan 5 items. 20-item fetch chunk.

Horizontal Scroll-Snap

x mandatory, start alignment. 24px scroll padding. Card width calc(100% - 48px). 16px gap between cards.

Depth & Elevation

Depth, Elevation & Effects

Surface Layering Stack L0 - L3

LEVEL 0

Canvas

Page background, no border, no shadow.

LEVEL 1

Cards & Tiles

Data cards and panel containers. 4px / 20px shadow.

LEVEL 2

Floating Menus

Popovers and context menus. 12px / 32px shadow.

LEVEL 3

Modals & Dialogs

Dialog surface plus scrim. 24px / 64px shadow.

AI GENERATION GLOW

GENERATING...

Use glow as a temporary state signal, not ambient decoration.

FOCUSED INPUT HALO

GLASS SURFACE

Floating Surface

Reserved for transient, layered content with a solid-fill fallback.

Advanced Components

Advanced Component Library

Combobox & Multi-Select

Searchable options with a visible focus ring and clear selected state.

Toggle Switches

File Dropzone

Click to select a deployment manifest
YAML, JSON up to 10MB

Toast Notification Stack

Drawer / Slide-Over

Right-side slide-over for focused configuration work. Escape or backdrop dismisses.

Tooltip Variants

Enterprise Data Table

Service Reliability

Sort-ready Operational Table

SERVICE	ENVIRONMENT	UPTIME	LATENCY	TREND

Rows respond to hover, status labels remain textual, and the table retains a horizontal overflow path on small screens.

AI-Native Primitives

Interfaces for Intelligence

AI Insight Card

HIGH CONFIDENCE - 94%

Latency variance is concentrated in checkout orchestration.

The system found a correlated 18% rise in p99 latency after the latest ruleset release. Roll back only the orchestration policy before changing the data plane.

5 cited sourcesLast 15 minutes

Chat Input

0 chars - ~0 tokens

Streaming Text Response

STREAMING...

Feedback & Reinforcement

Rate this answer to improve future recommendations.

Accessibility

Accessibility & State Machines

CONTRAST

WCAG 2.1 AA minimum

White on Core Black: 19.3:1 AAA. Electric on Black: 8.1:1 AAA. White on Vivid: 5.9:1 AA.

FOCUS

Visible by default

Every interactive element receives a 2px Vivid Blue focus ring with 2px offset. Never remove an outline without a replacement.

MOTION

Preference respected

Reduced motion removes nonessential transform animation and preserves clear state changes through opacity and immediate feedback.

SCREEN READERS

Semantic and announced

Use native controls, descriptive labels, live regions for toasts, and meaningful alternatives for charts and status visualizations.

TOUCH TARGETS

44px minimum

Controls are built for comfortable touch interaction without sacrificing desktop information density.

TEXT RESIZE

Content reflows

Layouts use grids and normal document flow, maintaining order and usability at 200% zoom.

Focus Ring Demo

Use Tab and Shift+Tab to inspect the focus order.

Keyboard Navigation

TABNext focusable element

SHIFT+TABPrevious focusable element

ENTERActivate button or link

ESCAPEClose drawer or modal

Implementation

Adaptive Theme Architecture

ONE TOKEN ARCHITECTURE

Two environments, one semantic contract.

Components consume roles such as canvas, surface, text and accent. Theme mapping changes values once at the root, leaving components stable and ensuring code parity.

LIVE TOKEN PREVIEW

Canvas / Surface / Brand depth / Primary action

Responsive System

Responsive Design System

DESKTOP - 1080+

Expanded reference

Fixed 216px sidebar. 12-column grid. Full reference tables and four-column component inventory.

TABLET - 768-1080

Compressed canvas

Sidebar remains available. Content uses 8 columns, two-column panels and reduced outer spacing without losing hierarchy.

MOBILE - <768

Focused reading

52px top bar and slide-in navigation drawer. Single-column content, 4-column grid logic and intentional overflow for data tables.

Responsive Behavior

Navigation is always reachable but never crowds the reading surface. Dense grids collapse into sequential, scannable sections. Tables retain their structure with a horizontal scroll container, while controls preserve their touch target size.

Implementation Contract

Breakpoints are standardized at 640, 768, 1024, 1280 and 1536px. The system uses CSS Grid rather than proportional flex calculations, and uses 100dvh rather than a brittle viewport height.

Getting Started

Installation & Quick Start

Get Opexminds design tokens and components running in your project in under two minutes.

terminal

npm install @opexminds/tokens @opexminds/components

globals.css

@import "@opexminds/tokens/css";

app.tsx

import { tokens } from '@opexminds/tokens'
import { OpexButton, OpexCard } from '@opexminds/components'

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        vivid: '#1B5EFF',
        electric: '#00C8FF',
        midnight: '#0A1628',
      },
      fontFamily: {
        display: ['Cabinet Grotesk'],
        mono: ['JetBrains Mono'],
      }
    }
  }
}

Quick Start - 3 Steps

Install the package

Add the Opexminds token and component packages to your project via npm or yarn.

terminal

npm install @opexminds/tokens

Import tokens

Import the CSS token file at the root of your application to enable the full token architecture.

root.tsx

import '@opexminds/tokens/css'

Use components

Import and render Opexminds components. All components consume tokens automatically and respond to theme changes.

page.tsx

<OpexButton onClick={deploy}>
  Deploy
</OpexButton>

Version History

Changelog

AUG 04, 2026

v1.2.0

Added Installation section with npm, CSS, and Tailwind setup guides
Added scroll-reveal animations with IntersectionObserver
Added film grain overlay and ambient mesh gradient in cover
Introduced layout variation across sections (bento, asymmetric, full-bleed)
Added 3 new sections: Installation, Changelog, Resources
Stripped AI tells: removed scroll cues, reduced section-number eyebrows
Added copy-to-clipboard on all code blocks
Upgraded button micro-interactions with scale(0.97) on active

AUG 03, 2026

v1.1.0

Master build with 21 sections, full Figma token parity
Working interactions: toggles, toasts, combobox, streaming text
Data table with sparkline SVGs and status pills
AI-native primitives with feedback loop
Theme toggle with full dark/light token mapping

JUL 29, 2026

v1.0.0

Initial brand and design system release
Logo system with 4 lockup variants and grid construction
7-color palette with HEX, RGB, CMYK values and tint strips
Typography scale with 10-level hierarchy
Global tokens: spacing, radius, borders, layout grids

JUL 28, 2026

v0.9.0 - Beta

Tokens extracted from Figma source
Logo SVG path extracted and verified
Dark and light theme architecture defined
Component inventory planned across 6 categories

Downloads & Links

Resources & Downloads

Everything you need to build with Opexminds, in one place.

Logo Pack

SVG, PNG, and PDF variants of the Opexminds logo in all lockup configurations.

Token JSON

Complete design token file in JSON format with all colors, spacing, radius, and typography values.

Figma File

Full editable Figma source file with components, styles, and tokens. Open and duplicate to customize.

Component Library

npm package with all Opexminds React components. Token-aware, theme-responsive, accessible.

Icon Set

29 core utility icons as individual SVG files. 24x24px viewBox, 1.5px stroke, fully themeable.

Brand Guidelines PDF

Complete brand guidelines document covering logo usage, color, typography, and voice. Print-ready format.