Brand & Style

SINAPTIA is a software development company specializing in Ruby on Rails, React, and intelligent applications. The brand identity projects technical authority, precision engineering, and contemporary craft. The visual language is deliberately austere — it communicates confidence through restraint rather than ornament.

The design system follows an editorial-brutalist aesthetic: sharp corners, heavy typographic hierarchy, and a disciplined two-color glow system. There are no drop shadows, no rounded buttons, no soft gradients filling containers. Every surface is either flat black, flat white, or flat blue. Depth and interactivity are expressed exclusively through 2px borders, animated blur glows, and color inversion between the three page variants.

The emotional register is calm, expert, and slightly futuristic. The site reads like a high-end engineering journal crossed with a contemporary gallery space.

Colors

The palette is intentionally narrow. Three functional hues do almost all the work:

Neutrals are limited to a single warm-off-white (#fbfbfb) and a family of cool grays. There is no mid-tone background — pages are either pure black, pure white, or pure active blue (#448acc).

Background Variants:

The entire site operates on three invertible page modes:

  1. White Variant — White background, black text, black borders. Links and hover states use Electric Cyan Blue.
  2. Black Variant — Black background, off-white text, off-white borders. The dominant mode for case studies, blog, and services. Post content links use Mint Green with underline; navigation and footer links use off-white with Cyan Blue on hover.
  3. Blue Variant — Active Blue background, white text. Used sparingly for high-energy landing moments.

When a component sits on a Black Variant page, its borders, text, and hover glows all invert logically. The system is fully symmetrical.

Typography

Three typefaces divide the labor precisely:

Type Scale Rules:

Layout & Spacing

The layout is container-based and breakpoint-driven. There is no max-width wrapper in the traditional sense; instead, horizontal padding expands with viewport size:

This creates the effect of content floating in ever-wider gutters as the screen grows. Vertical section spacing follows an 80px / 120px rhythm (standard / large). Between major content blocks, gaps can reach 176px on desktop.

The grid is pragmatic: CSS Grid for technologies and complex dashboards, Flexbox for editorial rows and navigation. Case-study cards use CSS columns on desktop to create a masonry-like flow.

Responsive Philosophy:

Elevation & Depth

This design system rejects conventional shadow-based elevation. Depth is achieved through three alternative mechanisms:

  1. Border Weight — All cards, service blocks, and grid cells use 1px or 2px solid borders. A 2px border reads as “more important” than a 1px border. This is the primary elevation signal.

  2. Blur Glows — On hover, interactive surfaces reveal a soft, absolutely positioned orb of Cyan Blue behind them. These glows use extreme blur values:

    The glow orbs are never fully opaque; they feel like distant studio lights turning on.

  3. Background Inversion — The three page variants (white / black / blue) create elevation through contrast shifts. A white contact form dropped onto a black page instantly reads as a “raised” surface without any shadow.

Shapes

The shape language is radically rectilinear. There are no rounded corners on buttons, cards, inputs, tags, or containers. Every interactive element is a sharp rectangle. The only places border-radius appears are on the decorative ambient orbs (fully circular), the blur glow sources, and case-study/app images (rounded-lg, 8px).

This sharpness reinforces the engineering personality. Buttons are rectangular blocks. Form inputs are underlined, not boxed. Cards are bordered rectangles. The overall impression is of precision-milled components.

Icons (Lucide) maintain this logic: minimal line weight, sharp terminals, no filled states.

Components

The navigation is fixed to the viewport top and uses Headroom behavior: transparent when at the top of the page, solid background when scrolled, and hidden when scrolling down (reappears on scroll up).

Cards & Containers

Cards are border-driven, not shadow-driven.

Tags & Labels

Tags come in two variants:

Pill tags (post detail pages) — compact rectangles with a full 1px border:

Inline tags (post cards, case studies) — small items with a 0.5px right border only:

Buttons & CTAs

Buttons are rectangular blocks with bold uppercase Inconsolata text.

Footer service links are full-width bordered rows. The final CTA row inverts the entire color scheme (black becomes white, white becomes black) to create maximum contrast.

Forms

Text inputs use a floating label pattern: a single bottom border only (2px), no background, no box. The label sits inside the field at rest, then floats upward on focus. The intended focus state changes the bottom border to Cyan Blue, but the live site currently references a missing sinaptia-1 class, so the focus border color change is non-functional.

The submit button is a full-width or auto-width rectangular block depending on breakpoint.

Marquee Bands

Scrolling text bands appear between major sections. They use a 12-column grid of duplicated text nodes, animated with a continuous 2-second linear marquee. Font is PP Monument Extended at 22px, uppercase. Borders are 2px solid black above and below the band.

Code Blocks

Syntax-highlighted code blocks sit on a near-black background (#161617) with a 1px white border. The palette is custom and high-contrast:

Inline code within paragraphs uses bold Cyan Blue Inconsolata, no background.

Motion & Animation

Motion is restrained and purposeful. There are no bouncy springs, no fade-in cascades, no parallax.

The overall motion philosophy is: if it moves, it moves slowly and linearly. The brand gradient is the only exception — it provides a single point of ambient life in an otherwise still composition.