Nasif S.

Overview

Nasif S. is a premium web design and development practice built on the aesthetic of **Organic Glassmorphism**—a fusion of soft, natural green tones with frosted-glass UI elements that evoke clarity, precision, and approachability. The brand serves ambitious businesses across the UK, Italy, and Spain seeking conversion-focused websites without agency overhead. The visual language combines technical rigor (monospace code snippets, geometric grids) with organic warmth (soft green gradients, floating blob animations, rounded pill buttons), creating an interface that feels both trustworthy and human. The emotional response is one of calm competence: users sense that complex technical work is happening, but the interface never overwhelms. Voice: direct, confident, never jargon-heavy. Example: 'We build sites that turn visitors into clients—no fluff, just results.'

Colors

The color system centers on a sophisticated green palette grounded in nature and growth, paired with a near-white surface for clarity. **Primary (#2A5430)** is the deep forest green used on all CTAs ('Book a Consultation', 'Start Your Project'), focus states, and brand-critical interactive elements. It conveys trust and conversion intent. **On-Primary (#ECFAE5)** is a pale mint that ensures text legibility over the primary green at WCAG AA+ contrast (7.2:1). **Secondary (#3D6B44)** is a mid-tone green for supporting accents, navigation links, and secondary UI elements. **Tertiary (#6B9B70)** is a muted sage used for muted text, disabled states, and tertiary information hierarchy. **Surface (#FAFDF8)** is an off-white with a hint of green undertone, creating visual warmth without coldness.

Typography

The type system pairs **Space Grotesk** (geometric, technical, 600–700 weight) for all display and headline levels with **Manrope** (warm, humanist, 400–500 weight) for body copy and UI labels. This pairing communicates 'precision meets approachability.' Display (72px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines like 'Websites that turn visitors into clients.' Headline-lg (48px, 600 weight) is used for section titles. Body-lg (18px, 400 weight, 28px line-height) is used for hero subtitles and long-form copy, with 1.7 line-height for readability. Body-md (16px, 400 weight) is the default for body text and card descriptions. Label-md (14px, 600 weight, Space Grotesk) is used for button text, nav links, and UI labels. Label-sm (12px, 600 weight, 0.05em letter-spacing) i

Layout

The layout uses a **fluid 12-column grid** with a max-width of 1200px and 24px horizontal gutter. Sections are vertically spaced at 100px (lg spacing) to create breathing room and visual rhythm. The hero uses a 2-column grid (1fr 1fr) with 60px gap, allowing the left column (content) and right column (mockup visual) to balance. Container padding is 24px on all sides, reducing to 16px on mobile. The spacing scale follows a 8px unit system: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, xl (64px) for hero-to-content spacing. White-space is generous: section margins are 100px top/bottom, card padding is 32px, button padding is 14px vertical / 28px horizontal. This creates a sense of luxury and breathing

Elevation & Depth

Depth is achieved through **layered glassmorphism** rather than traditional shadows. Level 1 (Base) is the primary surface (#FAFDF8) with animated glow blobs (radial-gradient circles at rgba(176, 219, 156, 0.2) with 20s float animations). Level 2 (Standard Card) uses backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.55), border: 1px solid rgba(176, 219, 156, 0.35), and box-shadow: 0 4px 20px rgba(27, 59, 31, 0.04). Level 3 (Elevated/Modals) uses backdrop-filter: blur(24px), background: rgba(255, 255, 255, 0.75), border: 1px solid rgba(176, 219, 156, 0.6), and box-shadow: 0 12px 40

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are generous enough to feel approachable and organic, yet precise enough to maintain technical credibility. Buttons use 9999px (full pill) to emphasize action and friendliness. Cards and glass containers use 24px (xl) for a soft, inviting feel. Input fields use 12px (DEFAULT) for a balanced, modern look. Icons and badges use 12px for consistency. The nav bar uses 20px for a distinctive, floating appearance. The rationale: pill buttons (9999px) signal 'click me'—they're the most approachable shape and are used exclusively for CTAs. Car

Components

Action Elements Buttons are the primary interactive element. **button-primary** (background: #2A5430, color: #ECFAE5, padding: 14px 28px, border-radius: 9999px, font-family: Space Grotesk, font-weight: 600, box-shadow: 0 4px 20px rgba(42, 84, 48, 0.2)) is used for all primary CTAs. On hover, the background shifts to #CAE8BD (primary-fixed), shadow increases to 0 6px 30px rgba(42, 84, 48, 0.3), and the button translates up 2px (transform: translateY(-2px)) over 0.3s ease. **button-secondary** (background: rgba(255, 255, 255, 0.5), color: #2A5430, border: 1px solid rgba(176, 219, 156, 0.35), backdrop-filter: blur(12px)) is used for secondary actions like 'View Packages'. On hover, the background brightens to rgba(255, 255, 255, 0.8) and the border shifts to rgba(176, 219, 156, 0.6). Both

Do's and Don'ts

**Do**

• Do use the primary green (#2A5430) exclusively on CTAs and high-priority interactive elements—it signals conversion intent and must never be diluted.
• Do apply glass-card styling (backdrop-filter: blur(20px), rgba(255, 255, 255, 0.55) background, 1px border) to all card containers to maintain the frosted-glass aesthetic.
• Do use Space Grotesk at 600–700 weight for all headlines and button text to reinforce technical credibility and visual hierarchy.
• Do maintain 100px vertical spacing between major sections and 24px padding inside cards to create breathing room and premium feel.
• Do animate all interactive elements with 0.3–0.4s transitions using cubic-bezier(0.25, 0.46, 0.45, 0.94) for smooth, organic motion.

**Don't**

• Don't use the primary green on body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and focus states.
• Don't apply shadows without glassmorphism; all depth must come from backdrop-filter blur, border opacity shifts, and layered glass backgrounds.
• Don't mix rounded radii arbitrarily; use 9999px only for buttons, 24px for cards, 12px for inputs and icons, and 20px for the nav bar.
• Don't use Manrope for headlines or Space Grotesk for body copy—the pairing is intentional and must not be reversed.
• Don't reduce padding or spacing below the 8px unit scale; white-space is a core part of the premium positioning and must be preserved.