# Design System: Sciensa ## 1. Visual Theme & Atmosphere Sciensa's site is built on a principle of **warm minimalism through containment** — every content section lives inside a `#ffffff` card with `16px` radius, floating on a warm light-gray page surface (`#f5f5f5`). The overall effect reads like a premium editorial layout: clean, airy, authoritative. The gray-on-white card system is borrowed directly from ElevenLabs' design language, but Sciensa injects energy through a signature two-color brand accent — a teal-to-green gradient (`#22AEA4` → `#5EB359`) that appears in the hero, the CTA banner, and select interactive highlights. The hero section is the site's most dramatic moment: a full-viewport rounded card with a looping AI-generated video background, overlaid with an animated `linear-gradient(135deg, #22AEA4 0%, #5EB359 50%, #22AEA4 100%)` at `mix-blend-mode: multiply`. On top of this, a base dot grid (`rgba(255,255,255,0.14)` at 28px pitch) creates texture, and a secondary spotlight dot grid appears only around the cursor — an interactive depth effect where the dots brighten from `0.14` to `0.35` opacity within a `420px` radial mask. Headlines rotate between three copy lines every 3.4 seconds with a subtle fade/translateY transition. The font is **Space Grotesk** from Google Fonts — a geometric sans-serif with personality, used in all weights from 300–700. At display sizes, weight 300 is used for headlines, echoing the "light as authority" principle. Every section header is prefaced by a `MonoLabel` — an eyebrow in all-caps, `12px`, `0.08em` tracking, rendered in Space Grotesk itself (not a true monospace), following the `// EYEBROW` format. Navigation is frosted glass: `rgba(245,245,245,0.82)` background with `blur(40px) saturate(180%)` backdrop-filter — nearly indistinguishable from the page surface but with a physical glass quality. On scroll past 12px, it picks up a 1px bottom shadow and slight background opacity increase to `0.88`. **Key Characteristics:** - Space Grotesk at weight 300 for all display/section headlines — lightness as confidence - `#f5f5f5` page surface with `#ffffff` floating card panels — warm card-bento layout - Teal-to-green brand gradient (`#22AEA4` → `#5EB359`) as the only color in the system - Cursor-reactive spotlight dot grid — interactive without being distracting - `// EYEBROW` monolabel pattern with uppercase + wide tracking as section signatures - Multi-layer sub-0.1-opacity shadow system — elevation without visual noise - `16px` card radius throughout; `9999px` (full pill) for buttons - Animated hero with video + gradient overlay + dot grid — immersive brand entry --- ## 2. Color Palette & Roles ### Brand - **Teal** (`#22AEA4`): Primary brand color. Hero gradient start/end, CTA gradient, link highlights in body content, tag accent backgrounds, active states. The anchor of the entire system. - **Green** (`#5EB359`): Secondary brand color. Hero gradient midpoint, CTA gradient midpoint. Never used standalone — always paired with teal in a gradient. - **Brand Gradient**: `linear-gradient(135deg, #22AEA4 0%, #5EB359 50%, #22AEA4 100%)` at `backgroundSize: "300% 300%"` animated with `heroGradient` keyframe (8s infinite). Used in hero overlay and CTA banner. ### Text - **Text Primary** (`#000000`): Headlines, section titles, stat numbers, strong labels. - **Text Secondary** (`#4e4e4e`): Body copy, pillar descriptions, nav link hover state. - **Text Muted** (`#717171`): Captions, section labels, timestamps, `MonoLabel` text on light backgrounds. - **White** (`#ffffff`): Text on dark/video backgrounds (hero, CTA banner). Multiple opacity variants: `/70` for subheadlines, `/60` for body, `/50` for labels, `/30` for fine print. ### Surfaces - **Page Surface** (`#f5f5f5`): Root background, the "stage" that all cards sit on. - **Card Surface** (`#ffffff`): All section cards, dropdowns, article backgrounds. - **Warm Stone** (`rgba(245,242,239,0.8)`): Subtle warm tint for tertiary surfaces and warm-stone button variant. - **Dark** (`#000000`): CTA banner base, nav mobile contact button, `black-pill` button variant. ### Interactive - **Primary Link / Tag** (`#22AEA4`): Anchor links in article body, tag badges, `prose-a` color. - **Tag Background** (`rgba(34,174,164,0.10)`): Tinted pill background for content tags. - **Nav Active** (`#f5f5f5`): Background on active/hovered nav item (same as page surface — creates a subtle inset effect). ### Borders - **Border Default** (`#e5e5e5`): Card dividers, stat separators, form borders. - **Border Subtle** (`rgba(0,0,0,0.05)`): Ultra-light separators for nested containers. - **Dropdown Border** (`rgba(0,0,0,0.07)`): The 1px ring on floating dropdown cards. - **Article Divider** (`#f0f0f0`): Lighter separator for article-internal sections (author block, mobile accordion). ### Neutral Scale - `#9CA3AF` — Nav section labels ("Platforms", "Capabilities" dropdown headers), meta text - `#6B7280` — Nav icon hover - `#D1D5DB` — Nav icon default - `#374151` — Nav link text (default in dropdown) - `#F3F4F6` — Column separator in multi-column dropdowns --- ## 3. Typography Rules ### Font Family - **Primary**: `Space Grotesk` (Google Fonts variable font) - CSS variable: `--font-space-grotesk` - Weights loaded: 300, 400, 500, 600, 700 - Applied globally via `font-family: var(--font-space-grotesk), system-ui, -apple-system, sans-serif` - `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` globally - **No dedicated monospace** in the main site — `MonoLabel` uses Space Grotesk despite the name ### Hierarchy | Role | Class / Style | Size | Weight | Line Height | Letter Spacing | Notes | |------|---------------|------|--------|-------------|----------------|-------| | Display / Hero | `.text-display` | `clamp(2.5rem, 5vw, 3.5rem)` | 300 | 1.08 | -0.02em | Hero rotating headline, white on dark | | Section Heading | `.text-heading` | `clamp(1.75rem, 3vw, 2.25rem)` | 300 | 1.17 | -0.01em | All `

` via `SectionHeader`, black or white | | Sub-heading | `.text-subheading` | `clamp(1rem, 1.5vw, 1.125rem)` | 400 | 1.60 | 0.011em | Lead / intro text below section headings | | Pillar Title | inline `text-xl font-light` | 20px (1.25rem) | 300 | default | -0.025em (tight) | `

` in feature pillars | | Section Label / Eyebrow | `.text-label` | 12px (0.75rem) | 500 | — | 0.08em | `MonoLabel`, all-caps, `#717171` | | Body | inline `text-[15px]` | 15px | 400 | relaxed (1.625) | 0.01em | Standard description text | | Body Small | inline `text-[13px]` | 13px | 400-500 | tight | 0.01em | Nav links, dropdown links | | Caption | inline `text-[11px]` or `text-xs` | 11-12px | 400-500 | normal | 0.08-0.12em | Ticker label, nav sub-labels, timestamps | | Stat / Counter | `.text-3xl font-light` | 30px (1.875rem) | 300 | tight | -0.025em | `CountUp` animated numbers | | Article Body | Tailwind `prose` | 15px base | 400 | relaxed | 0.01em | markdown via ReactMarkdown | | Quote / Testimonial | inline `italic text-[15px]` | 15px | 400 italic | relaxed | default | CTA banner blockquote, `text-white/60` | | Cite | `text-xs tracking-wide not-italic` | 12px | 400 | — | wide | Attribution under testimonial | ### Principles - **Weight 300 as headline signature**: All `

`, `

`, `

` use `font-light` (weight 300). The system never uses 700 for brand headlines. - **Negative tracking only at display sizes**: -0.02em at hero (56px), -0.01em at section heading (36px). Body text at +0.01em. Labels at +0.08em. - **Size via clamp**: Display and heading sizes use `clamp()` to scale smoothly — no hard mobile overrides needed for most elements. - **Eyebrow format**: `// ALL-CAPS TEXT` — the double-slash prefix is a code/terminal reference that reinforces Sciensa's engineering identity. --- ## 4. Component Stylings ### Buttons **`black-pill`** (Primary CTA) - Background: `#000000` - Text: `#ffffff`, 13px, weight 500 - Padding: `6px 16px` (py-1.5 px-4) - Radius: `9999px` (full pill) - Hover: `#111111` - Active: `#1a1a1a` - Use: "Contact us" nav CTA, primary actions on light backgrounds **`white-pill`** (On-dark CTA) - Background: `#ffffff` - Text: `#000000`, 15px, weight 500 - Padding: `10px 20px` (py-2.5 px-5) - Radius: `9999px` - Shadow: `rgba(0,0,0,0.40) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` - Hover: `#f0efed` - Active: `#e8e3de` - Use: CTAs on dark/gradient backgrounds (hero, CTA banner) **`warm-stone`** (Signature standout) - Background: `rgba(245,242,239,0.95)` - Text: `#000000`, 15px, weight 500 - Padding: `12px 20px` (py-3 px-5) - Radius: `9999px` - Shadow: `rgba(78,50,23,0.06) 0px 6px 16px` - Hover: `#e8e3de` - Use: Special emphasis CTAs, assessment page **`ghost`** (Tertiary / text link) - Background: transparent - Text: `#000000`, 15px, weight 500 - Padding: `8px 16px` (py-2 px-4) - Radius: `9999px` - Hover: `#f5f5f5` - Use: Secondary nav-level links ("Learn about us →"), text actions **Hero inline link buttons** (not using Button component): - Primary: `bg-white text-black px-5 py-2.5 rounded-full text-[14px] font-medium` - Secondary: `bg-white/10 text-white px-5 py-2.5 rounded-full text-[14px] font-medium` ### Cards & Section Panels - **Standard section card**: `bg-white rounded-2xl px-5 md:px-10 py-12|16` - **Shadow** (`.el-card`): `rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px` - **Shadow large** (`.el-card-lg`): same but `0px 2px 4px` and `0px 4px 8px` - Radius: `16px` standard (`rounded-2xl`), `20px` for large (`rounded-[20px]`) - All sections share `max-w-[1336px] mx-auto px-4 3xl:px-0 py-3` as outer wrapper ### Navigation Header - Position: `fixed top-0`, full width, `z-50` - Height: `h-14` (56px) - Background: `rgba(245,245,245,0.82)` → `0.88` on scroll - Backdrop: `blur(40px) saturate(180%)` - Shadow on scroll: `0 1px 0 rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.05)` - Logo: SVG, `h-[55px] w-auto` - Nav links: `text-[13px] font-medium text-[#4e4e4e]`, `px-3 py-2`, radius `4px`, hover `text-black bg-[#f5f5f5]` - Active dropdown trigger: `text-black bg-[#f5f5f5]` - Chevron: 11px SVG, rotates 180° when open ### Dropdown Cards - `bg-white rounded-2xl p-5` - Shadow: `0 0 0 1px rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06)` - Enter animation: `opacity 0 → 1, translateY(-6px → 0)` over 150ms ease - Section header: `text-[11px] font-medium uppercase tracking-[0.1em] text-[#9CA3AF]` - Column divider: `border-l border-[#F3F4F6]` - Link row: `flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-[#f5f5f5]` - Icon: 13px Lucide, `text-[#D1D5DB]` default → `text-[#6B7280]` on hover ### Platform Dropdown Cards - 3-column grid, each card: `rounded-xl overflow-hidden hover:bg-[#f5f5f5]` - Preview tile: `h-24`, gradient background, dot grid at `0.15` opacity, centered icon (white, inverted) - Label: `text-[13px] font-medium`, description: `text-[11px] text-[#9CA3AF]` ### MonoLabel (Eyebrow) - Font: Space Grotesk, 12px, weight 500, uppercase - Tracking: `0.08em` - Color: `#717171` on light, `rgba(255,255,255,0.50)` on dark - Content pattern: `// SECTION NAME` ### Logo Ticker (Marquee) - Container: gradient fade mask on edges (`transparent 0%, black 12%, black 88%, transparent 100%`) - Animation: `marquee` — `translateX(0 → -50%)` at 28s linear infinite (20s on mobile) - Logo tiles: `w-36 h-16` (`sm: w-40 h-[72px]`) - Images: `max-h-9`, `object-contain`, `mix-blend-multiply` (removes white backgrounds) ### Stat Grid - Values: `text-3xl font-light text-black tracking-tight` + `CountUp` animation - Labels: `.text-label text-[#717171]` ### FadeIn Animation - Intersection Observer-based scroll reveal - `opacity 0 → 1`, `translateY(12px → 0)` - 600ms ease-out, configurable delay ### Mock UI Components (Hero pillars) - `MockTerminal`: simulated terminal with animated line fade-in (`fadeSlideIn` keyframe) - `MockDashboard`: stylized analytics/chart mockup - `MockSquad`: team/squad visualization - All use card styling with internal dark or white surfaces ### CTA Banner - Full-width black base, `rounded-2xl overflow-hidden` - Video layer: `opacity: 0.5`, same Cloudinary source as hero - Gradient layer: `linear-gradient(135deg, #22AEA4 0%, #5EB359 50%, #22AEA4 100%)`, `opacity: 0.6`, `mix-blend-mode: color` - Dark overlay: `bg-black/45` - Animated radial gradients: two ellipses (10%/80% and 90%/20%), `ctaGradientShift` keyframe (8s alternate) - Dot grid: same 28px pattern, same spotlight cursor effect as hero - Glow orb at cursor: `480px circle`, `rgba(255,255,255,1) → transparent`, `opacity: 0.03` - Content: `px-10 py-20`, `max-w-2xl` ### Article / Prose - Container: `prose prose-neutral max-w-none` - Headings: `font-light tracking-tight` - Body: `text-[15px] leading-relaxed text-[#4e4e4e]` - Links: `text-[#22AEA4] no-underline hover:underline` - Code inline: `text-[#22AEA4] bg-[#f5f5f5] px-1.5 rounded` - Code block: `bg-[#0b0d14] rounded-xl` - Blockquote: `border-l-[#22AEA4] text-[#717171]` - Images: `rounded-xl w-full` - Divider: `border-[#f0f0f0]` --- ## 5. Layout Principles ### Container & Grid - **Max content width**: `1336px` (`max-w-[1336px]`) - **Custom breakpoint `3xl`**: `1400px` — at this point `px-4` becomes `px-0` (content bleeds to window edge) - **Section wrapper**: `max-w-[1336px] mx-auto px-4 3xl:px-0 py-3` - **Inter-section gap**: `py-3` (12px) between every card section — creates a tight, bento-grid feel - **Card internal padding**: `px-5 md:px-10 py-12` or `py-16` ### Spacing System - Base unit: 4px (Tailwind default) - Dense scale: 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24... - Standard card gap: `py-3` between sections, `py-12`–`py-20` inside sections - Pillar rows: `py-[60px]` vertical padding inside feature rows ### Page Structure (Home) 1. **Header** — fixed, frosted glass, 56px 2. **Hero** — `pt-20 pb-3`, card with `h-[86vh]`, video + gradient 3. **Logo Ticker** — `py-3` 4. **Stats** — `py-3` 5. **Why Sciensa** (3 feature pillars) — `py-3` 6. **Industries Grid** — `py-3` 7. **Capabilities Grid** — `py-3` 8. **Platform Spotlight** (carousel) — `py-3` 9. **Insights** — `py-3` 10. **CTA Banner** — `py-3 pb-6` ### Feature Pillar Grid - Outer: `grid grid-cols-1 lg:grid-cols-2 gap-6 py-[60px]` - Reverse: `lg:[&>*:first-child]:order-last` for alternating layout - Text side: `p-10 flex flex-col justify-center gap-6` - Mock side: takes the full remaining column ### Hero Grid - `grid grid-cols-1 lg:grid-cols-2 gap-10 h-full` - Left: `flex flex-col justify-between` — eyebrow at top, headline+subheadline+CTA at bottom - Right: empty (reserved for future content) ### Whitespace Philosophy - **Contained emptiness**: Large amounts of whitespace exist *inside* white cards, not on the gray page itself. The inter-card gap (12px) is intentionally tight — cards feel like tiles, not isolated islands. - **Section rhythm**: Every section is the same container type (white card on gray), creating total visual consistency. Hierarchy comes from content, not background color changes. - **Exception — CTA Banner**: The only section that breaks the white card pattern. It uses a dark/video background to signal a "now act" moment. ### Border Radius Scale - **Buttons**: `9999px` (full pill) — Sciensa's most distinctive UI choice - **Cards / sections**: `16px` (`rounded-2xl`) — consistent across all content panels - **Card large variant**: `20px` - **Nav items**: `4px` (`rounded-[4px]`) — deliberately tight vs. the pill buttons - **Dropdown rows**: `6px` or `8px` (`rounded-lg`, `rounded-xl`) - **Platform preview tiles**: `12px` (`rounded-xl`) - **Article cover**: full-bleed top, no radius; inner content `rounded-2xl` --- ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (0) | No shadow | Page background, `#f5f5f5` surface | | Card (1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px` | Standard white section cards (`.el-card`) | | Card Large (2) | Same but `0px 2px 4px, 0px 4px 8px` | Large cards (`.el-card-lg`) | | Dropdown (3) | `0 0 0 1px rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06)` | Nav dropdowns, floating panels | | Button white (4) | `rgba(0,0,0,0.40) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | `white-pill` button variant | | Warm button (5) | `rgba(78,50,23,0.06) 0px 6px 16px` | `warm-stone` button variant | | Focus ring | `2px solid rgb(147,197,253,0.8)` outline, offset 2px | Keyboard focus (WCAG AA+) | **Shadow Philosophy**: All shadows use near-zero opacity (max `0.40` on button border, typically `0.04`–`0.10` on panels). This creates elevation that is *felt* rather than *seen* — the card separates from the page surface without casting dramatic shadow. The 1px zero-blur ring (`rgba(0,0,0,0.06) 0px 0px 0px 1px`) acts as a border replacement, defining the card edge on the white-on-white surface without a hard line. ### Z-Index Stack - `z-50`: Nav header (fixed) - Dropdowns inherit from nav context - Hero/CTA overlays use `absolute` within their `relative` containers --- ## 7. Do's and Don'ts ### Do - Use Space Grotesk weight 300 for all `

`, `

`, `

` — lightness is the signature - Use `rounded-2xl` (16px) for all section cards — never mix radius sizes on cards - Use full-pill (`rounded-full`) for all buttons — the pill is the system's most recognizable element - Prefix all section eyebrows with `// ` — e.g. `// WHY SCIENSA` — the double-slash is brand voice - Use `mix-blend-multiply` on logo images in the ticker to strip white backgrounds - Apply the teal/green gradient only as an overlay (via `mix-blend-mode: color` or `multiply`), not as a flat fill on text or buttons - Keep inter-card spacing at `py-3` (12px) for the tight bento feel - Use `clamp()` for display/heading sizes to avoid abrupt mobile overrides - Track muted labels wide (`0.08em`) and display text tight (`-0.02em`) - Use the spotlight dot grid pattern only on dark/video backgrounds (hero, CTA banner) ### Don't - Don't use any color other than the teal-green gradient as a brand accent — no blue, orange, or purple - Don't use `font-bold` (700) for section headings — weight 300 only at headline sizes - Don't break the white-card-on-gray-surface pattern for regular content sections (only the CTA banner is an exception) - Don't use drop shadows with high opacity — all shadows stay under `rgba(0,0,0,0.10)` - Don't use hard borders (`border border-[#e5e5e5]`) as the primary card definition — use the 1px inset shadow instead - Don't use the teal `#22AEA4` as a button background color — it's a gradient-only brand color - Don't use non-pill shapes for primary/secondary buttons — rectangle or square buttons break the design language - Don't add `mix-blend-multiply` to hero/CTA gradient layers — these use `multiply` and `color` blend modes precisely; changing them breaks the color math - Don't use positive letter-spacing on headlines — only labels and eyebrows track wide - Don't use the 3xl breakpoint (`1400px`) for anything other than the `px-0` edge-bleed rule — it's a layout utility, not a design breakpoint --- ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px (`sm`) | Single column layouts, hero headline 32px, marquee 20s, sticky CTAs | | Tablet | 640–768px (`sm`–`md`) | 2-col grids emerging, card padding increases to `px-10` | | Desktop | 768–1024px (`md`–`lg`) | Full nav appears, feature pillar 2-col grid | | Large | 1024–1400px (`lg`–`3xl`) | Full layout, hero `3.5rem` headline, all features visible | | XL | >1400px (`3xl`) | Container edge padding drops to 0 — content touches viewport edges | ### Navigation - **Desktop** (`md+`): Horizontal nav with mega-menu dropdowns, CTA button - **Mobile** (`