Sókrates Wiki

Sókrates Landing Page and 'Icelandic Archive' Design System

2 min read

Sókrates Landing Page and ‘Icelandic Archive’ Design System

Summary

The Sókrates landing page is the primary public-facing web presence for the project, designed with a specific “Icelandic Archive” aesthetic. Originally prototyped as a single-page HTML file using Tailwind CDN, it was subsequently scaffolded into a production-ready Next.js application deployed on Vercel.

Details

Design Philosophy: “The Icelandic Archive”

The visual identity of Sókrates is defined by the “Icelandic Archive” aesthetic, detailed in the project’s DESIGN.md specification. This system prioritizes an editorial feel with intentional asymmetry and generous spacing. Key visual characteristics include:

  • Palette: A charcoal and slate base with tonal layering instead of traditional borders or shadows. The signature accent color is an amber gold (#f2ca50).
  • Typography: Uses Manrope for display/headings and Inter for body text. Typography scales are implemented via Tailwind utilities (e.g., text-6xl to text-8xl with tracking-tighter for display elements).
  • Token System: Design tokens follow Material Design 3 (MD3) naming conventions, such as surface-container-high and on-primary.

Technical Stack

The frontend architecture transitioned from a static index.html prototype to a modern React stack:

  • Framework: Next.js (App Router) with Turbopack and SWC.
  • Styling: Tailwind CSS with Lightning CSS for processing.
  • Tooling: pnpm for package management and Biome for linting/formatting.
  • Icons: Material Symbols Outlined (Google Fonts).
  • Animations: A combination of Framer Motion for hero staggers and a custom useScrollReveal hook (Intersection Observer) for section entrance animations.

Page Structure and Content

The landing page is composed of eight primary sections, each serving a specific part of the Sókrates value proposition:

  1. Hero: Titled “Þú átt nú gervigreindardeild” (You now own an AI department), featuring a choreographed entrance of the headline, CTA, and a product image of the on-premises hardware.
  2. Stats: Highlights the AI adoption gap (48% vs 12%) using an animated useCountUp hook.
  3. The Box: A pitch for the on-premises hardware (NixOS-based appliances).
  4. Integration Journey: A 3-step guide to onboarding.
  5. Exit Policy: Documentation of the “no-lock-in” policy.
  6. Pricing: Tiered retainer from 400K–800K ISK/mo by company size.
  7. About/Team: Biographies of the founders, including Hákon Freyr.
  8. Footer: Standard navigation and metadata.

Deployment and Repository

The project is hosted in a private GitHub repository (RationallyPrime/Sokrates-AI) and deployed via Vercel at sokrates-ai.vercel.app. The deployment configuration ensures the site is served with lang="is" and includes OpenGraph metadata for social sharing. Images are optimized using next/image with priority loading for the LCP (Largest Contentful Paint) hero element.

Graph View

Backlinks