Obsonis

Overview

Obsonis is a security-first attack surface management platform designed for enterprise teams who need to discover and defend every unmanaged device across their infrastructure. The visual identity embraces a "Security Minimalism" aesthetic: a deep purple foundation (#211531) paired with a vibrant coral accent (#ff8672) that signals urgency and action without sacrificing clarity. The UI conveys precision, control, and the calm confidence of a team that sees what others miss. The brand personality is direct, technical, and unflinching—it speaks to security professionals who value substance over style. Voice example: "Every unpatched device is a breach waiting to happen. Obsonis finds them first."

Colors

The color system is built on a dark, high-contrast foundation optimized for security dashboards and extended viewing sessions. Primary (#ff8672, coral) is reserved exclusively for call-to-action buttons, active states, and critical alerts—it commands attention without aggression. Secondary (#7de8a8, soft green) indicates healthy or resolved states, while tertiary (#b8a0ff, lavender) provides a third accent for supporting UI elements. The surface stack ranges from near-black (#0f0a18 for surface-container-lowest) to a slightly lighter purple (#3a2250 for surface-container-highest), creating visual separation without harsh contrast. On-surface text is pure white (#ffffff) for maximum legibility over the dark canvas. Use primary (#ff8672) for all primary CTAs, hover states apply a 0.25 opacit

Typography

The type system pairs Archivo (geometric, bold, security-forward) for all display and headline levels with IBM Plex Sans (neutral, highly legible) for body and label text. This pairing creates a visual hierarchy that feels both authoritative and approachable. Display (76px, 700 weight, -0.03em letter-spacing) is used for hero headlines and commands the page; Headline-lg (48px, 700 weight) for section titles; Headline-md (32px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) handles standard paragraph text. Label-md (15px, 700 weight, 0.02em letter-spacing) is applied to all button text and form labels to ensure crisp, scannable UI. On small labels over busy backgroun

Layout

The page uses a 12-column grid with a max-width of 1200px, maintaining a fluid layout on mobile that collapses to single-column at breakpoints below 768px. The gutter spacing is consistently 24px (md spacing token), creating breathing room between sections without excess white space. Hero sections use lg spacing (40px) for vertical separation between headline, subheadline, and CTA. Cards and containers are padded with md spacing (24px) internally. The container-max-width of 1200px ensures content remains scannable on ultra-wide displays. Spacing scale follows an 8px base unit: xs (4px) for tight micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions.

Elevation & Depth

Depth is conveyed through subtle layering and strategic use of borders and shadows rather than aggressive drop shadows. Level 1 (Base): the surface background (#211531) with no shadow. Level 2 (Standard Card): transparent background with a 1px border at rgba(255, 134, 114, 0.2) and a soft shadow of 0 3px 8px rgba(255, 134, 114, 0.1). Level 3 (Elevated/Hover): the same border but with increased opacity (rgba(255, 134, 114, 0.35)) and a stronger shadow of 0 8px 24px rgba(255, 134, 114, 0.25). This approach keeps the UI feeling cohesive while using the brand coral as a visual anchor for depth. Av

Shapes

The shape philosophy is "Technical Precision"—rounded corners are used strategically to soften hard edges without sacrificing the security-forward aesthetic. Buttons and primary interactive elements use lg radius (1rem / 16px) for a modern, approachable feel. Cards and containers use xl radius (1.5rem / 24px) to create visual breathing room. Input fields and smaller components use DEFAULT radius (0.5rem / 8px) for a tighter, more technical appearance. Badges and pills use full radius (9999px) to signal completeness and status. This graduated approach ensures that the most important interactive

Components

Action Elements Buttons are the primary driver of user intent. Primary buttons (#ff8672 background, #2e1a46 text, 48px height, 14px 24px padding, 1rem border-radius) use label-md typography (15px, 700 weight) and transition to a darker coral (#ff6b4d) on active state. Hover state adds a 0 8px 24px rgba(255, 134, 114, 0.25) shadow for depth feedback. Secondary buttons use a transparent background with a 1px coral border and coral text; on hover, they fill with rgba(255, 134, 114, 0.08). All button transitions use a 200ms ease-out timing function.

Containers & Surfaces Cards are the primary content container, using a transparent background with a 1px border at rgba(255, 134, 114, 0.2) and 24px internal padding. On hover, the border opacity increases to 0.35 and the background fills

Do's and Don'ts

**Do**

• Do use primary coral (#ff8672) exclusively for CTAs, active states, and critical alerts—never for decorative elements or backgrounds.
• Do maintain the 24px gutter spacing between major sections to ensure content breathes and remains scannable.
• Do apply the coral-tinted shadow (0 8px 24px rgba(255, 134, 114, 0.25)) on button hover to reinforce the brand's visual language.
• Do use Archivo for all headlines and display text to maintain the security-forward, geometric aesthetic.
• Do pair dark backgrounds with high-contrast white text (100% opacity) for accessibility on security dashboards.
• Do use the secondary green (#7de8a8) for success states and resolved alerts to create a clear visual distinction from warnings.

**Don't**

• Don't use coral (#ff8672) for body text, backgrounds, or non-interactive elements—reserve it for actions and critical states only.
• Don't apply shadows with pure black (0, 0, 0)—always tint shadows with the brand coral (rgba(255, 134, 114, ...)) to maintain visual cohesion.
• Don't exceed 1200px container width; content becomes difficult to scan on ultra-wide displays.
• Don't use border-radius values smaller than 0.5rem (8px) on buttons or cards; the technical aesthetic should not feel harsh.
• Don't mix Archivo and IBM Plex Sans within the same headline or body paragraph—use Archivo for headlines, IBM Plex Sans for body.
• Don't apply transparency or opacity to the primary coral; use the fixed color values (#ff8672, #ff6b4d, #ffb3a0) to maintain brand consistency.