Rion Tuscano

Overview

Rion Tuscano is a freelance full-stack developer portfolio built on a foundation of technical precision and bold visual confidence. The design embodies 'Technical Maximalism'—a movement that rejects minimalist restraint in favor of direct, energetic communication of capability. The aesthetic combines a clean white canvas with two signature accent colors (vivid orange #ff3c00 for primary CTAs and electric blue #2f6bff for secondary actions) that create visual hierarchy without clutter. The brand personality is unambiguous and results-driven: 23+ shipped builds, 9 hackathon wins, top 12 at EY Techathon 6.0—these are facts, not claims. The UI voice is conversational yet authoritative, avoiding corporate jargon. Example: "NO FORMS. NO HOOPS. JUST THIS." reflects the brand's disdain for friction and preference for directness.

The typography system centers on Clash Display, a geometric sans-serif that conveys modernity and technical sophistication. Every interaction—from button hover states to input focus rings—is deliberate and snappy, with 150ms transitions that feel responsive without being sluggish. The design system prioritizes accessibility (2px solid focus outlines at #ff3c00 with 3px offset) and legibility across all device sizes. The brand does not apologize for its ambition; it celebrates shipped work and measurable outcomes.

Colors

The color palette operates on a principle of 'Accent-Driven Clarity': a neutral white surface (#ffffff) serves as the canvas, while two carefully chosen accent colors drive all interactive and hierarchical decisions. Primary (#ff3c00, a vivid orange-red) is reserved exclusively for the most important call-to-action elements—the 'View Resume' button, primary CTAs, and focus states. This color appears at 166 instances across the site, making it the visual anchor. Secondary (#2f6bff, a saturated electric blue) supports secondary actions, badges, and informational highlights, appearing 113 times. Tertiary (#38bdf8, a bright cyan) is used sparingly for accent highlights and tertiary UI elements. The surface stack is deliberately minimal: white (#ffffff) for primary surfaces, light slate (#f8faf

Typography

The typography system is built on a single typeface—Clash Display—to reinforce visual cohesion and technical identity. Clash Display is a variable font (preloaded as ClashDisplay-Variable.woff2 to eliminate swap flash), supporting weights from 400 (regular) to 700 (bold) without requiring multiple file requests. The hierarchy spans eight levels: display (72px, 700 weight, -0.04em letter-spacing for tight, confident headlines), headline-lg (48px, 700 weight), headline-md (32px, 700 weight), title-lg (24px, 600 weight), body-lg (18px, 400 weight), body-md (16px, 400 weight), label-md (14px, 600 weight, 0.01em tracking for UI labels), and label-sm (12px, 500 weight, 0.05em tracking, monospace fallback for technical labels). Line-height is set to 1.5 for body text (24px for 16px body-md) and t

Layout

The layout operates on a 12-column grid with a max-width of 1280px (container-max-width: 1280px), centered horizontally with mx-auto. The spacing scale is semantic and hierarchical: unit (8px) as the base, xs (4px) for micro-spacing, sm (12px) for compact elements, md (24px) for standard gutter and card padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Margin and padding are applied using these tokens consistently: cards use padding: {spacing.md} (24px), buttons use padding: 12px 24px (1.5x and 3x the unit), and section gaps use margin-top: {spacing.lg} (40px) or margin-bottom: clamp(0.5rem, 2dvh, 2rem) for responsive breathing room. Container max-widths scale responsively: 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl). The grid uses display

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids the flat aesthetic while remaining minimal and technical. Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06)—used for subtle hover states and input focus. Level 2 (md): 0 3px 8px rgba(0, 0, 0, 0.15)—the default shadow for cards, dropdowns, and standard elevated surfaces; this is the most frequently applied shadow on the site. Level 3 (lg): 0 8px 24px rgba(0, 0, 0, 0.12)—reserved for modals, popovers, and the highest-priority surfaces. Shadows are applied via box-shadow property and never combined with background gradients or blur effect

Shapes

The shape philosophy is 'Technical Softness'—a balance between the precision of sharp corners and the approachability of rounded edges. The rounded scale progresses from sm (4px) for small UI elements like focus rings and dropdown borders, to DEFAULT (9px) for primary buttons and standard interactive elements, md (16px) for input fields and smaller cards, lg (28px) for larger cards and containers, xl (40px) for hero sections and major layout blocks, and full (9999px) for pill-shaped badges and fully rounded elements. Primary buttons use border-radius: {rounded.DEFAULT} (9px), creating a subtle

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#ff3c00), textColor: {colors.on-primary} (#ffffff), typography: {typography.label-md}, rounded: {rounded.DEFAULT} (9px), padding: 12px 24px, and height: 48px (touch-target minimum). Font-size is 15px with font-weight: 500. On hover, button-primary-hover shifts backgroundColor to #e63800 (a darker orange) with transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1). On active/pressed, button-primary-active uses backgroundColor: #cc3200 and applies inset box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) for tactile feedback. The button-secondary component uses backgroundColor: rgba(255, 255, 255, 0.9), textColor: {colors.on-surface} (#000000), rounded: {round

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff3c00) exclusively for primary CTAs and focus states—never for secondary or tertiary actions.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive elements for consistent, snappy feedback.
• Do maintain the 12-column grid layout and respect the container-max-width: 1280px constraint on all pages.
• Do use Clash Display as the sole typeface; fallback to ui-sans-serif only if the variable font fails to load.
• Do apply :focus-visible with outline: 2px solid #ff3c00 and outline-offset: 3px to all interactive elements for accessibility.
• Do use the spacing scale (unit: 8px, sm: 12px, md: 24px, lg: 40px, xl: 64px) for all margins and padding—never use arbitrary values.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces; use 0 8px 24px rgba(0, 0, 0, 0.12) for modals and highest-priority surfaces.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no opacity variations beyond rgba(x, x, x, 0.5) or rgba(x, x, x, 0.9).
• Don't apply border-radius values outside the rounded scale (sm: 4px, DEFAULT: 9px, md: 16px, lg: 28px, xl: 40px, full: 9999px).
• Don't use shadows other than the three defined levels (sm, md, lg); never combine shadows with blur effects or glassmorphism.
• Don't apply font-family values other than 'Clash Display' for body/heading text; monospace is only for label-sm and technical labels.
• Don't use arbitrary padding or margin values—always reference the spacing tokens (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px).
• Don't apply transition durations shorter than 150ms or longer than 300ms; always use cubic-bezier(0.4, 0, 0.2, 1) as the timing function.
• Don't use {colors.primary} (#ff3c00) for backgrounds, disabled states, or secondary UI; reserve it for CTAs and focus indicators only.