Beyond

Overview

Beyond embodies Architectural Minimalism—a design philosophy that treats digital interfaces as precision instruments for complex technical work. The aesthetic rejects ornament in favor of structural clarity: warm neutrals (Glint #e6eae6, Snow Drift #c9cac9) provide a calm, professional canvas, while the signature burnt-orange accent (#eb461f) punctuates key moments of interaction and decision-making. This is not austere; it is intentional. The brand personality is direct, confident, and grounded in outcomes: every pixel serves a function, every interaction removes friction. Voice: measured, technical without jargon, outcome-focused. Example: 'Our infrastructure handles 50,000 transactions per second—so your teams focus on what matters.'

Colors

The color system is built on a foundation of warm, desaturated neutrals that evoke trust and professionalism. Primary (#eb461f, burnt-orange) is the signature accent—used exclusively on CTAs, active states, and brand-defining moments. It appears sparingly but decisively, commanding attention without aggression. Secondary (#3898ec, tech blue) supports data visualization and secondary actions. The surface stack progresses from pure white (surface, #ffffff) through carefully calibrated grays (surface-container #e6eae6, surface-container-high #dddddd) to create visual hierarchy without relying on darkness. On-surface text (#0c0402, near-black) maintains 15:1+ contrast for accessibility. Tertiary (#241d1b, deep charcoal) anchors typography and structural elements. Error states use a clinical re

Typography

The type system pairs Instrument Serif for display and headlines (60px–28px, 400 weight) with Inter Tight for body and labels (18px–12px, 400–500 weight). Serif headlines convey authority and precision; sans-serif body text ensures legibility at small sizes and on screens. Letter-spacing is tight (–0.02em on display, 0em on body) to reinforce density and focus. Line-height is generous (68px on display, 24px on body) to prevent visual fatigue during extended reading. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm) when layered over busy backgrounds to ensure legibility. Weights are used sparingly: 400 for body, 500 for labels and interactive elements, 400 for headlines (serif weight carries visual weight naturally).

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. Gutter spacing is 24px on desktop, collapsing to 12px on tablet and mobile. Section separation uses lg spacing (40px) to create breathing room between major content blocks. Container padding follows the gutter scale: 24px on desktop, 12px on mobile. White-space is treated as a design material—negative space around primary CTAs and headlines creates visual rest and directs attention. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently to padding, margins, and gaps. Cards and containers use md spacing (24px) internally; list items use sm spacing (12px). This creates a rhythm that feels both spacious and efficient.

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Card): 1px solid border at rgba(0, 0, 0, 0.1) + box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Hover): same border + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Interactive elements (buttons, inputs) use no shadow at rest; on hover, they shift to a lighter surface-container color (e.g., #dddddd) with a 200ms transition. Focus states use a 0.125rem solid outline at #4d65ff with 0.125rem offset. This rest

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the precision of the grid without introducing organic curves. Buttons and inputs use 0.5rem (4px) radius—just enough to feel contemporary without appearing playful. Cards and larger containers use 0.75rem (6px) radius. Badges and pill-shaped elements use full (9999px) radius. This hierarchy ensures that the most interactive elements (buttons) feel slightly more refined, while larger surfaces (cards) maintain a subtle geometric quality. Avoid sharp 0px corners on interactive elements; they feel dated. Avoid

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#eb461f on white, 48px height, 12px 24px padding) use label-md typography and transition to #d63a1a on hover over 200ms. Secondary buttons are transparent with a 1px border at #eb461f; on hover, they fill with primary-container (#ffe5d6) and shift text to on-primary-container (#150a08). Ghost buttons (transparent, no border) are used for tertiary actions; they shift to surface-container-high (#dddddd) on hover. All buttons must include a focus state: outline: 0.125rem solid #4d65ff with outline-offset: 0.125rem.

Containers & Surfaces Cards are the primary container pattern. Standard cards use surface (#ffffff) background, 1px solid outline at rgba(0, 0, 0, 0.1), 0.75rem radius, and 24px padding. On hover

Do's and Don'ts

**Do**

• Do use primary (#eb461f) exclusively on CTAs, active states, and brand moments—never on backgrounds or body text.
• Do apply generous line-height (28px on body-lg, 24px on body-md) to prevent visual fatigue in long-form content.
• Do use the surface-container stack (light grays #e6eae6 → #dddddd) to create visual hierarchy without introducing darkness.
• Do transition interactive elements over 200ms (buttons, inputs, cards) to signal interactivity without feeling sluggish.
• Do maintain 15:1+ contrast between on-surface (#0c0402) and surface (#ffffff) for WCAG AAA compliance.
• Do use 0.5rem–0.75rem border-radius on interactive elements; avoid sharp corners and large radii (>1.5rem).

**Don't**

• Don't use primary (#eb461f) on backgrounds or as a fill for large surfaces—it should feel like an accent, not a dominant color.
• Don't mix serif and sans-serif within a single headline or body paragraph; use Instrument Serif for display/headlines, Inter Tight for body/labels.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08)—the interface should feel grounded, not floating.
• Don't use color alone to convey status; pair color with iconography or text labels (e.g., error red + error icon + error message).
• Don't apply letter-spacing wider than 0.05em on body text; it reduces legibility. Reserve wide spacing (0.05em+) for labels and all-caps text.
• Don't introduce new colors outside the defined palette; if a new accent is needed, derive it from primary or secondary using consistent lightness shifts.