Instance.io - Identity Protocol

Overview

Colors

• Surfaces: #F4F3EF (Canvas/Background), #ECEBE5 (Badge primary), #FCFBF9 (Screen/Inner surface).
• Typography: #1A1918 (Primary text), #8E8B82 (Secondary/UI metadata).
• Accents: #E4573D (Action/Identifier), #34D399 (Status/Success).
• Structural: #E0DED6 (Borders), #2D2B2A (Depth/Shadow anchors).

Typography

• Display: Large, clean geometric san-serifs utilized for core value propositions, using non-standard orientations (vertical-rl) for decorative structural elements.
• Headline: Generous tracking and balanced line heights with consistent sentence-case or uppercase utility for technical labels.
• Label/Mono: Monospaced, uppercase micro-typography (text-xs) used exclusively for system telemetry, status indicators, and versioning.
• System Styling: Standardized antialiased rendering with subtle, high-contrast tracking (tracking-wider) for secondary UI metadata.

Layout

• Spatial Cadence: Wide, symmetrical margins allow the primary container to float as a distinct object. Section rhythm is governed by an anchor-point approach, where core components are centered within the viewport.
• Content Width: A rigid max-w-[1280px] container ensures consistent reading comfort and structural integrity across breakpoints.
• Grid Logic: Subtle 1px lines at 25% intervals define a crosshair-like grid, providing a mathematical sub-structure to the composition.
• Padding: Padding patterns are generous to allow negative space to act as a frame, moving from 3-8 units responsive scaling.

Elevation & Depth

• Surface Recipe: Surfaces use a white-to-neutral paper gradient, often layered with a 0.025 opacity linear-gradient texture to break flatness.
• Shadow Character: Heavy, multi-layered drop shadows (0_100px_80px_rgba) provide high elevation, while inset shadows are used to denote screen glass and component cutouts.
• Blur: Backdrop-blur (backdrop-blur-sm) is reserved for floating HUD elements, simulating glass-top overlays.
• Tacticility: Edge highlights (mix-blend-overlay) are applied at the top and inner-corners to simulate physical metallic or plastic edges.

Shapes

• Corner Radius: A tiered hierarchy exists; 32px for primary container outer-edges, 20px for internal frames, and a strict 6px for the ID badge, reinforcing the look of a physical identification card.
• Geometry: Rectilinear dominance with specific circular hardware motifs (lanyard loops, connector ports).
• Iconography: Linear-style icons (solar icon set) with 26px default sizing for primary markers, scaled down to 14px for metadata badges to maintain spatial alignment.

Components

• ID Badge: A complex compound component with nested internal screens, cutouts, and technical "cable" attachments. It acts as the primary "hero" element.
• Indicator Chips: Small 5px circular nodes featuring green glow (box-shadow) to denote "online" states.
• Telemetry Bar: A persistent top-bar component within screens, using monospaced labels and status indicators.
• Buttons: Custom-branded button using a dual-layer technique: a 1px padding frame for an external glow/stroke, with an internal dark-surface base for a "depressed" tactile click feel.

Do's and Don'ts

• Do keep the background neutral; the system relies on the contrast between off-white surfaces and sharp, technical accents.
• Do use vertical-text for decorative branding only; it should never compromise legibility.
• Do maintain consistent padding for grid-based structural markers to ensure the "Identity Protocol" look remains cohesive.
• Don't add excessive decorative illustrations. All visuals must serve a technical or structural purpose.
• Don't use drop shadows that lack multi-step layers; single-step shadows destroy the "physical" feel of the components.
• Don't mix non-monospaced fonts into UI status bars or technical labels.

Motion

• Entrance: Entry animations utilize power4.out timing with cascading stagger effects on both opacity and vertical translation (revealing text from masks).
• Tilt: Interactive hover behavior employs CSS transform (rotateX/Y) with a 1000px perspective, creating a tangible, object-like response to mouse positioning.
• Persistence: Use will-change: transform, opacity for any element undergoing animation to ensure performance parity with the graphics layer.
• Ease: All non-canvas motion should lean toward cubic-bezier timing functions (0.25, 1, 0.5, 1) to emulate physical weight rather than digital acceleration.

WebGL

• Canvas Placement: An absolute positioned, full-bleed layer (z-index: 10) placed inside the main content container.
• Effect: A particle-field simulation that reacts to mouse proximity. Particles move within a radial-gradient light falloff (rendered via 2D canvas context).
• Implementation: The animation loop uses requestAnimationFrame. Particles have individual speedX/Y properties and a "repulsion" interaction logic triggered when the mouse distance is < 80px.
• Density: Controlled via devicePixelRatio scaling to ensure sharp rendering on high-density displays. The resize() handler dynamically recalculates bounds to ensure the canvas remains flush with its container parent.