Harmattan AI

Overview

Harmattan AI embodies Tactical Minimalism—a design philosophy that strips away ornament to expose pure function and precision. The brand serves defense-tech operators and autonomous systems engineers who demand clarity under pressure. The visual language is monochromatic and high-contrast, anchored by a vivid lime-yellow accent (#fcff55) that signals critical action and operational readiness. Every element is positioned to reduce cognitive load: white text on near-black (#0c0c0c), geometric sans-serif typography in uppercase, and sparse use of warm neutrals (#baae9b) as secondary structure. The emotional response is one of controlled intensity—calm authority paired with latent urgency.

The brand voice is direct, technical, and unadorned. Harmattan speaks in imperative sentences and precise terminology: 'Coordinated saturation at the edge.' 'Operational dominance through a two-layer autonomy model.' There is no marketing breathlessness, no hedging. The vocabulary is military-adjacent but not militaristic—terms like 'forces,' 'saturation,' and 'edge' are used literally, not metaphorically. The tone is confident without arrogance, expert without condescension. Example sentence: 'Deploy autonomous swarms with sub-millisecond coordination across distributed networks.'

Colors

The color system is built on extreme contrast and strategic accent deployment. Surface (#0c0c0c) is the dominant near-black canvas, creating a low-light environment that reduces eye strain during extended use and emphasizes the primary accent. On-surface (#ffffff) is pure white, ensuring maximum legibility and visual separation. The primary color, #fcff55 (vivid lime-yellow), is reserved exclusively for call-to-action buttons, critical alerts, and focus states—it appears sparingly but commands immediate attention. Secondary color #baae9b (warm taupe) is used for borders, dividers, and tertiary UI elements; it provides visual rhythm without competing with the primary accent. Tertiary #71865d (muted sage-green) is used for status indicators and supporting data visualization. Error #dd1413 (r

Typography

The type system uses two families in strict separation: Figtree for all body, heading, and UI text; IBM Plex Mono exclusively for labels, buttons, and system-level indicators. This dual-family approach creates a clear hierarchy between narrative content (Figtree, humanist sans-serif) and operational/technical content (monospace, precise). Display sizes (80px, 600 weight, 0.85 line-height) are set in uppercase with tight leading to create visual impact and authority. Headline and body text use Figtree at 500–600 weight with generous line-height (1.3–1.4) for readability on dark backgrounds. All labels and button text use IBM Plex Mono at 500 weight with 0.04em letter-spacing (uppercase) to evoke technical precision and command-line aesthetics. Small text (12px and below) is always rendered

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible responsive behavior across mobile (1 column), tablet (6 columns), and desktop (12 columns). Spacing follows an 8px unit system: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter width is 20px, creating breathing room around content without excessive whitespace. Container padding is consistently 24px on desktop, 16px on tablet, and 12px on mobile. Vertical rhythm is maintained through consistent use of lg spacing (40px) between major sections, ensuring the page feels composed and intentional. The hero section uses full-viewport height with centered text and a

Elevation & Depth

Depth is achieved through layered transparency and subtle shadows rather than dramatic elevation. Level 1 (Base) is the surface (#0c0c0c) with no shadow. Level 2 (Standard Card) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(186, 174, 155, 0.16) and backdrop-filter: blur(20px), creating a frosted-glass effect that sits slightly above the base. Level 3 (Elevated/Modal) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with backdrop-filter: blur(40px) and a 1px border at rgba(186, 174, 155, 0.2), signaling modal prominence. Navigation bars use a hybrid approach: backdrop-f

Shapes

The shape philosophy is Architectural Precision—sharp corners and minimal rounding that evoke technical systems and military hardware. Border-radius is used sparingly and consistently: buttons and small UI elements use 0.25rem (4px), cards and containers use 0.5rem (8px), and only modals or full-width overlays use 1rem (16px). This graduated approach prevents the interface from feeling soft or approachable; instead, it maintains a sense of control and exactitude. The primary CTA button uses 0.25rem radius with sharp corners to emphasize its critical function. Input fields use 0.25rem radius to

Components

Action Elements Primary buttons use #fcff55 background with #0c0c0c text, 0.25rem radius, 9.6px vertical / 16px horizontal padding, and IBM Plex Mono label-md typography. On hover, the background transitions to #e8ec3d (primary-fixed-dim) over 100ms with cubic-bezier(0.37, 0, 0.63, 1) easing. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) to create a tactile depression effect. Secondary buttons use rgba(186, 174, 155, 0.08) background with backdrop-filter: blur(40px), white text, and the same radius and padding as primary. On hover, the background becomes white (#ffffff) with #0c0c0c text, creating a high-contrast inversion. Disabled buttons reduce opacity to 0.5 and remove pointer-events.

Containers & Surfaces Cards use transparent background with 1px bor

Do's and Don'ts

**Do**

• Do use #fcff55 exclusively for primary CTAs, critical alerts, and focus states—never use it for backgrounds or large surfaces.
• Do maintain uppercase typography for all labels, buttons, and system-level text to reinforce technical precision.
• Do apply backdrop-filter: blur(40px) to all glass-morphic elements and pair with rgba(12, 12, 12, 0.4) backgrounds for consistent frosted-glass depth.
• Do use the 8px spacing unit consistently across padding, margins, and gaps to create visual rhythm and predictability.
• Do transition all interactive states (hover, focus, active) over 100–200ms with cubic-bezier(0.37, 0, 0.63, 1) easing for snappy, responsive feedback.

**Don't**

• Don't use rounded corners larger than 1rem except for full-width overlays—sharp corners reinforce the technical aesthetic.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.2) on standard elements; excessive shadow depth dilutes the minimalist approach.
• Don't mix Figtree and IBM Plex Mono within the same text block—use Figtree for narrative content and IBM Plex Mono exclusively for labels and system text.
• Don't use color to convey information alone—always pair color with text, icons, or other visual indicators for accessibility and clarity.
• Don't reduce opacity below 0.5 on interactive elements; use color or border changes instead to maintain sufficient contrast and usability.