Corporación Nicholas Negroponte

Overview

Corporación Nicholas Negroponte is a Colombian research, innovation, and scientific dissemination organization rooted in Antioquia's entrepreneurial spirit. The design system embodies 'Tech-Minimalist Regionalism'—a fusion of austere dark surfaces (rgb(49, 50, 49) body background, rgb(0, 0, 0) header) with vivid accent colors that signal clean energy and digital transformation: lime green (#22c55e) for primary CTAs and cyan (#22d3ee) for secondary emphasis. The aesthetic evokes clarity, precision, and forward momentum, transforming complex scientific concepts into approachable visual narratives.

The brand voice is warm yet authoritative, rooted in Colombian pride and scientific rigor. Vocabulary emphasizes collaboration ('juntos'), regional identity ('antioqueños'), and tangible impact ('energías limpias', '10 MW'). The tone avoids corporate jargon, instead using conversational Spanish that celebrates local achievement. Example sentence: 'Con una capacidad aproximada para generar 10 MW y financiado totalmente con inversión privada, es una prueba de lo que podemos lograr cuando soñamos en grande y trabajamos juntos.'

Colors

The color system is built on a dark-minimalist foundation with two strategic accent colors that drive visual hierarchy and emotional response. Primary surface (#313231, rgb(49, 50, 49)) provides the neutral canvas; surface-dim (#050505) anchors the darkest backgrounds (hero sections, footer), while surface-container layers (#111111 to #3a3a3a) create subtle depth without lightness. The primary accent is lime green (#22c55e, rgb(34, 197, 94)), used exclusively for call-to-action buttons, interactive dividers, and success states—it signals renewable energy and forward momentum. On hover, primary shifts to #2ee67c with a 0 0 35px rgba(34, 197, 94, 0.6) glow, creating tactile feedback. Secondary accent is cyan (#22d3ee, rgb(34, 211, 238)), deployed for secondary buttons, highlights ('PAIS-A' t

Typography

The type system prioritizes clarity and regional identity through Montserrat (primary font for headlines and UI) paired with Segoe UI (body text) and Inter (labels). Display and headline levels use Montserrat at weights 700–800 with tight letter-spacing (-0.04em to -0.01em) to create visual impact: h1 renders at 32px / 700 weight / -0.02em spacing on the page, scaling to 3rem (48px) in parallax sections. Body text uses Segoe UI at 16px / 400 weight / 24px line-height for readability over dark backgrounds; increase line-height to 1.8 (28.8px) for long-form content (carousel descriptions). Labels use Montserrat 600 / 14px / 20px line-height with 0.01em letter-spacing to maintain hierarchy. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) overlaid on busy parallax backgr

Layout

The layout system uses a fluid 12-column grid with a 1280px container max-width, adapting to mobile via CSS media queries (max-width: 900px, 768px, 600px, 480px). Page rhythm alternates between full-viewport hero sections (min-height: 100vh), content blocks with 2rem padding (24px gutter), and section separators using lg spacing (40px) for breathing room. The 'About Us' carousel section uses flexbox with flex: 2 for text (max-width: 700px) and flex: 1 for imagery, maintaining 2rem gap between columns; on mobile, flex-direction switches to column with 100% width. Project sections employ a split-screen layout (._container_12tv0_3: display: flex, height: 100vh) with a 10px green divider (._divider_12tv0_29: background: #02be02, cursor: col-resize) separating text (50% flex-basis, padding: 3re

Elevation & Depth

Depth is conveyed through layered shadows and background gradients rather than traditional z-index stacking. Level 1 (Base): Dark gradient backgrounds (radial-gradient(circle at top, #0b0b0b, #050505 60%)) establish atmospheric depth. Level 2 (Cards & Inputs): box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1a) lifts content slightly; inputs use 1px solid #d0d0d0 borders with rgba(0, 0, 0, 0) backgrounds for transparency. Level 3 (Modals & Overlays): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with backdrop-filter: blur(8px) (implicit via parallax overlay rgba(0, 0, 0, 0.5)). Accent elements use glow eff

Shapes

The shape philosophy is 'Tech-Organic Precision'—combining sharp technical edges with subtle softness to balance scientific rigor and approachability. Buttons use border-radius: 50px (full pill shape) for primary CTAs, creating a friendly, forward-facing gesture; secondary buttons and cards use 14px (lg) for a more structured feel. Input fields use 8px (DEFAULT) for a clean, functional appearance. Dividers and accent elements (the green split-screen divider) use 0px (sharp edges) to emphasize technical precision. Parallax section overlays use border-radius: 10px 0 (asymmetric rounding) to add

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#22c55e), textColor: {colors.on-primary} (#000000), padding: 9px 25px, border-radius: 50px, fontWeight: 700, with a 0.3s ease transition. On hover (button-primary-hover), backgroundColor shifts to {colors.primary-container} (#2ee67c) and transform: scale(1.05) with boxShadow: 0 0 35px rgba(34, 197, 94, 0.6). Secondary buttons use transparent background, textColor: {colors.secondary} (#22d3ee), border: 1px solid {colors.secondary}, padding: 16px 32px, border-radius: 14px, with boxShadow: 0 0 30px rgba(34, 211, 238, 0.4). On hover, backgroundColor becomes rgba(34, 211, 238, 0.08) and boxShadow expands to 0 0 50px rgba(34, 211, 238, 0.7). Navigation links us

Do's and Don'ts

**Do**

• Do use lime green (#22c55e) exclusively for primary CTAs and success states—it signals renewable energy and forward momentum, creating instant visual hierarchy.
• Do apply glow effects (box-shadow: 0 0 35px rgba(34, 197, 94, 0.6)) to primary buttons on hover to reinforce interactivity and brand energy.
• Do maintain the dark surface palette (#313231 body, #050505 hero) as the default; reserve white backgrounds only for contact forms and light-themed sections.
• Do use Montserrat 700 for all headlines and UI labels; pair with Segoe UI 400 for body text to balance technical precision with readability.
• Do layer parallax backgrounds with semi-transparent overlays (rgba(0, 0, 0, 0.5)) to ensure text legibility and create atmospheric depth.

**Don't**

• Don't use cyan (#22d3ee) as a primary accent—it's reserved for secondary buttons and highlights; overuse dilutes the lime green's impact.
• Don't apply border-radius: 0px to cards or buttons; minimum 8px (DEFAULT) maintains the brand's approachable-yet-technical aesthetic.
• Don't use shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15) on standard cards; excessive shadows flatten the minimalist aesthetic.
• Don't mix font families within a single headline; Montserrat is the primary brand typeface—use Inter or Segoe UI only for body and labels.
• Don't remove the green divider (._divider_12tv0_29) from project sections; it's a signature interaction pattern that guides user attention and enables content exploration.