0xcipher

Overview

0xcipher is a technical portfolio system designed for Web3 developers, security researchers, and fullstack engineers who demand precision and sophistication. The brand embodies 'Cryptographic Minimalism'—a design philosophy that pairs monochromatic restraint (pure white surfaces, deep charcoal text at #1a1a1a, neutral grays at #505050) with a commanding purple accent (#4c2976) that signals both technical authority and blockchain innovation. The interface evokes a sense of controlled power: clean, purposeful, never ornamental. Users encounter a tech-noir aesthetic where every pixel serves function, and the purple accent acts as a beacon for critical interactions—portfolio downloads, project links, and service calls-to-action.

The brand voice is direct, confident, and technically literate. Vocabulary favors precision: 'smart contracts,' 'security audits,' 'penetration testing,' 'dApps'—never vague marketing speak. Tone is calm and assured, reflecting the developer's mastery of complex domains. Example sentence in brand voice: 'I build secure blockchain solutions for NFTs and DeFi, then hunt for the vulnerabilities others miss.'

Colors

The color system is anchored in a high-contrast, accessibility-first palette. Primary (#4c2976) is the signature purple—used exclusively on CTAs, active navigation states, and interactive focus rings. It commands attention without aggression, appearing on the 'Portfolio' button (48px height, 12px 24px padding), the active 'Home' nav link, and all primary form inputs on focus. Secondary (#35254a) is a deeper, near-black purple reserved for backgrounds and secondary containers, creating visual hierarchy through darkness rather than saturation. Tertiary (#7951a9) is a lighter purple used for badges, accent icons, and tertiary buttons—it bridges primary and secondary while maintaining the cryptographic aesthetic.

The surface stack is deliberately minimal: white (#ffffff) as the base, with sub

Typography

The type system balances technical precision with approachability. Faculty Glyphic (monospace, 700 weight) anchors display and headline-lg levels at 56px and 40px respectively, reinforcing the cryptographic identity—this font choice signals 'code,' 'security,' 'precision.' Poppins (600 weight) handles headline-md and title-lg at 28px and 20px, providing warmth and readability for section titles and service descriptions. DM Sans (400 weight) is the workhorse for body-lg and body-md (18px and 16px), chosen for its geometric clarity and excellent screen rendering. Kanit (600–700 weight) is reserved for labels and UI text (14px and 12px), its tight letter-spacing (0.05em to 0.08em) reinforcing technical precision. All body text uses 24px or 28px line-height for comfortable reading; headlines u

Layout

The layout employs a 12-column fluid grid with a max-width of 1300px, centered on the viewport. Section separation uses lg spacing (40px) between major blocks (hero, services, portfolio, contact), creating a rhythm that feels spacious without excess. The gutter is consistently 24px, applied to left/right padding on containers and between grid items. Hero section uses a two-column split: left column (profile image, 40% width) and right column (headline, role, CTA, 60% width), with md spacing (24px) between them on desktop, collapsing to single-column on mobile. Cards within portfolio and services sections use md spacing (24px) internal padding and lg spacing (40px) between cards. Container max-width of 1300px prevents text from stretching beyond comfortable reading width; all content respec

Elevation & Depth

Depth is conveyed through a three-level shadow system that avoids heavy drop-shadows, maintaining the clean aesthetic. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to all cards, input fields, and standard containers. This subtle shadow lifts elements 2–3px from the surface, creating clear separation without drama. Level 2 (Hover/Interactive): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) applied on card-hover, button-hover, and project-card-hover states, signaling interactivity and lifting elements 6–8px. Level 3 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.

Shapes

The shape philosophy is 'Technical Softness'—sharp enough to feel modern and precise, rounded enough to avoid coldness. Buttons use rounded: 10px (DEFAULT) for primary and secondary buttons, creating a subtle pill-like appearance that feels approachable without being playful. Cards and containers use rounded: 30px (lg) for larger surfaces like project cards and service containers, providing visual warmth while maintaining geometric clarity. Input fields use rounded: 10px (DEFAULT) to match button styling, creating visual cohesion across interactive elements. Navigation pills use rounded: 9999p

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#4c2976), textColor: white, 48px height, 12px 24px padding, rounded: 10px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover (button-primary-hover), backgroundColor shifts to {colors.primary-container} (#7851a9) with a 200ms transition. Secondary buttons (button-secondary) use transparent background, 2px solid border in primary color, and full rounded corners (9999px), creating a pill-shaped outline button. The 'Portfolio' button in the hero is a primary button with an SVG arrow icon (margin-left: 8px), using fontFamily: Faculty Glyphic for the text to maintain cryptographic identity.

Containers & Surfaces Cards (card component) use backgroundC

Do's and Don'ts

**Do**

• Do use primary purple (#4c2976) exclusively on CTAs, active states, and focus rings—never on backgrounds or body text.
• Do apply 24px gutter spacing between grid items and 40px between major sections to maintain the spacious, minimalist rhythm.
• Do use Faculty Glyphic (monospace) for display and headline-lg to reinforce the cryptographic, technical identity.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all cards and containers; escalate to 0 8px 24px on hover with 200ms transition.
• Do use rounded: 10px for buttons and inputs, rounded: 30px for cards, and rounded: 9999px for pills and badges—never use 0px radius.
• Do maintain high contrast: near-black (#1a1a1a) for primary text, #505050 for secondary, ensuring WCAG AA compliance.

**Don't**

• Don't use purple outside of primary interactions—avoid purple backgrounds, purple body text, or purple borders on non-interactive elements.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); the aesthetic demands restraint and clarity, not dramatic depth.
• Don't mix typefaces within a single section—use Faculty Glyphic for headlines, DM Sans for body, Kanit for labels; never blend them.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the technical precision.
• Don't apply transitions longer than 300ms or easing functions outside cubic-bezier(0.2, 0, 0.38, 0.9)—motion should feel snappy and purposeful.
• Don't reduce padding below 12px on buttons or inputs; the 12px sm spacing is the minimum for touch targets and readability.