BACK_TO_TYPOGRAPHY
SPINX_V.1.0 // STYLE_GUIDE

Design System

Digital Brand Guidelines.

01 / Typography

A high-contrast pairing of Swiss-style grotesque and technical monospace.

Display H1 (Inter Light)System Architect
and Engineer
Body (Inter Regular)

Legibility is prioritized. Line height is kept at 1.6 for optimal scanning on all devices.

Meta (JetBrains Mono)
// SYS_CHECK: OPTIMAL
return "Design_Language";
02 / Color Physics

Anchored in void black, illuminated by acid accents and specific gradients.

Void Black#000000
Acid Pink#FF00FF
Cyber Cyan#00FFFF
Gray 100#F3F4F6
03 / Grid System

Asymmetric 4+8 column grid creates tension and directs focus.

MODULE A: ASYMMETRIC (4+8)
SIDEBAR
MAIN CONTENT
04 / Components

Expertise Accordion

A horizontal expansion component with specific RGB gradients and rotated text states.

01

Discovery

Discovery is about deeply understanding your organization's vision, goals, and user needs.

02

Strategy

03

Design

05 / Mobile Protocol
  • 01MIN_FONT_SIZE: 16px (No scaling down)
  • 02STACK_ORDER: MEDIA_FIRST
  • 03NAV: VISIBLE_ON_SCROLL_UP
07 / Gradient Architecture

Gradients are used as hierarchy tools, not just decoration. They breathe and flow.

Electric Violet

from-[#6366f1] via-[#a855f7] to-[#ec4899]

Spinx Blue

from-[#0055ff] via-[#0088ff] to-[#00d4ff]

Sunset Logic

from-[#f59e0b] via-[#ea580c] to-[#b91c1c]

08 / Sticky Grid

Persistent Context.

The left column anchors the user while content flows on the right. Note the divider line is not a gap, but a border.

CONTENT_BLOCK_01
CONTENT_BLOCK_02
CONTENT_BLOCK_03
09 / Visual Overlap

Breaking the grid with negative margins and z-index layering creates volume.

DEPTH

The Floating Card

This element breaks out of the container boundary, sitting on top of the visual below. It uses -mt-32 to pull itself up and backdrop-blur to ground the effect.

z-index: 10; margin-top: -8rem;

// END OF TRANSMISSION // SPINX-2026