PASDEV

Overview

PASDEV is a high-velocity software development studio built for startups that refuse to wait. The brand embodies "Aggressive Minimalism"—a design philosophy that strips away all visual noise to expose pure, uncompromising functionality. The aesthetic is deliberately stark: pure black (#000000) canvas, stark white (#ffffff) typography in the bold Unbounded typeface (900 weight, -0.06em tracking), and a single vivid emerald accent (#34d399) that punctuates CTAs and brand moments. The emotional response is one of confidence and speed: every pixel serves a purpose, every interaction feels instantaneous, and the visual language communicates "we ship fast" before a single word is read.

The brand voice is direct, technical, and unapologetically ambitious. PASDEV speaks in declarative sentences with concrete timelines: "From idea to launch in weeks, not months." The vocabulary avoids marketing fluff—no "innovative solutions" or "cutting-edge tech." Instead: MVP, POS, React Native, TypeScript, fixed price, no scope creep. The tone is precise and matter-of-fact, as if the founder is explaining the business model to a peer over coffee. Example: "We scope the work together, give you a fixed price before anything starts, and ship on schedule."

Colors

The color system operates on a high-contrast, accent-driven model. The surface stack is anchored in pure black (#000000) for maximum visual authority and reduced eye strain during extended viewing. Secondary surfaces layer in near-blacks (surface-container at #1a1a1a, surface-container-high at #2d2d2d) to create subtle depth without breaking the monochromatic aesthetic. The on-surface text is pure white (#ffffff) for 100% contrast; on-surface-variant (#a1a1aa) is used for secondary text and disabled states, maintaining legibility while signaling hierarchy.

Primary is white (#ffffff) because the most prominent CTA ("Book a Call" button in the hero) is rendered as white text on a white background with black text inside—a bold, high-contrast statement. Secondary is the vivid emerald (#34d399

Typography

The type system is built on a two-typeface hierarchy: Unbounded (900 weight, ultra-bold) for all display, headlines, and labels—creating visual dominance and brand recognition—and Inter (400 weight, regular) for body copy and secondary text. This pairing communicates technical sophistication paired with accessibility. Display text (102px, -0.06em tracking, 110px line-height) is used only for the hero headline and sets an aggressive, all-caps tone. Headline-lg (48px, -0.04em tracking) is reserved for section titles. Body-lg (18px, 28px line-height) is used for hero copy and key messaging. Label-md (14px, 0.1em tracking, 900 weight) is applied to all buttons and navigation, ensuring CTAs are unmistakable. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)

Layout

The page uses a fluid, full-width layout with a max-width container of 1280px (80rem) for content sections, allowing the hero to bleed edge-to-edge for maximum impact. The grid is 12 columns on desktop, collapsing to 1 column on mobile. Spacing follows a semantic scale: lg (24px) is used for section separation and major vertical rhythm; md (16px) for component padding and internal spacing; sm (8px) for tight groupings. The hero section occupies 100vh (full viewport height), centering content vertically and horizontally, with 32px (md) padding on mobile and 48px (2xl) on desktop. The marquee section below the hero uses 24px (lg) vertical padding and 12px (sm) horizontal gaps between tech stack items. White-space is aggressive: sections are separated by 96px (3xl) gaps, creating breathing ro

Elevation & Depth

Depth in PASDEV is achieved through stark contrast and precise layering, not soft shadows. The elevation system uses three levels: Level 1 (Base) is the pure black background (#000000) with no shadow. Level 2 (Standard Card/Dropdown) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px solid border at rgba(0, 0, 0, 0.2), creating subtle separation from the base. Level 3 (Elevated/Modal) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) with the same border treatment. Buttons do not use shadows; instead, they rely on color contrast and scale transforms (hover: scale(1.05)) to signal intera

Shapes

The shape philosophy is "Architectural Sharpness"—a deliberate rejection of rounded corners in favor of sharp, 90-degree angles that reinforce the technical, no-nonsense brand identity. Buttons use 0px border-radius (perfect rectangles), creating a bold, industrial aesthetic that contrasts with the soft, rounded UI patterns of competitors. Secondary buttons and badges use full border-radius (9999px) to signal they are secondary or decorative. Cards and containers use lg (1rem / 16px) border-radius, providing just enough softness to avoid harshness while maintaining the architectural aesthetic.

Components

Action Elements Buttons are the primary interaction pattern. The primary button ("Book a Call") uses backgroundColor: #ffffff, textColor: #000000, padding: 20px 48px, height: 56px, with 0px border-radius and no border. On hover, it scales to 1.05 and transitions backgroundColor to #e4e4e7 over 200ms. The secondary button ("View Work") uses a transparent background with a 1px border at rgba(255, 255, 255, 0.2), textColor: #ffffff, and the same 0px border-radius. On hover, backgroundColor becomes rgba(255, 255, 255, 0.05) and the border brightens to rgba(255, 255, 255, 0.4). Navigation links use typography: label-sm (10px, 700 weight, 0.05em tracking), textColor: #a1a1aa, and transition to #34d399 on hover with a 200ms ease-out timing. The active nav link adds a 2px bottom border in #34d

Do's and Don'ts

**Do**

• Do use pure white (#ffffff) and pure black (#000000) as the dominant colors—they create maximum contrast and reinforce the technical aesthetic.
• Do apply the emerald accent (#34d399) sparingly and only to primary CTAs, active states, and brand moments—overuse dilutes its impact.
• Do use Unbounded 900 weight for all headlines and labels—the ultra-bold weight is the brand's visual signature.
• Do maintain 0px border-radius on primary buttons and major UI elements to communicate precision and speed.
• Do use 0.05em to 0.1em letter-spacing on all uppercase text to prevent visual crowding and enhance readability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns—it's the only shadow value used in the system.
• Do use cubic-bezier(0.4, 0, 0.2, 1) timing over 200ms for all transitions to create snappy, responsive interactions.

**Don't**

• Don't use rounded corners on primary buttons or CTAs—they soften the brand's technical authority.
• Don't apply the emerald accent to non-interactive elements or backgrounds—it must remain exclusive to actions and highlights.
• Don't use Inter for headlines or display text—Unbounded 900 is the only typeface for brand-defining moments.
• Don't add drop shadows beyond the three defined elevation levels (0 3px 8px, 0 8px 24px)—additional shadows create visual noise.
• Don't use color to convey hierarchy alone—always pair color with typography weight, size, or spacing.
• Don't apply opacity or transparency to the primary black background—it must remain pure #000000 for maximum contrast.
• Don't use transitions longer than 200ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1)—they feel sluggish and undermine the 'fast' brand promise.