MetaCogna.ai Landing Design Review

​

Project Overview

​

Purpose

• Marketing website for MetaCogna services
• Client portal dashboard for project updates
• Contact and lead generation
• Service showcase and methodology explanation

​

Design Philosophy

1. Digital Paper: Physical sheet metaphor with hard shadows
2. Functional Brutalism: Visible construction, technical aesthetic
3. High Contrast: Ink/Paper polarity with accent colors
4. Enhanced Animations: Framer Motion for smooth interactions
5. Dark Mode: Full dark mode support with CSS custom properties

​

Color System Implementation

​

Current Implementation

:root {
  --color-ink: 24 24 27;        /* Zinc 900 #18181b */
  --color-paper: 255 255 255;   /* White */
  --color-surface: 244 244 245; /* Zinc 100 #f4f4f5 */
  --color-accent: 16 185 129;   /* Emerald 500 #10b981 */
  --color-shadow: 24 24 27;     /* Zinc 900 */
  --color-dot: 228 228 231;     /* Zinc 200 */
}

.dark {
  --color-ink: 244 244 245;     /* Zinc 100 */
  --color-paper: 24 24 27;      /* Zinc 900 */
  --color-surface: 9 9 11;      /* Zinc 950 */
  --color-accent: 52 211 153;   /* Emerald 400 */
  --color-shadow: 0 0 0;        /* Black */
  --color-dot: 39 39 42;        /* Zinc 800 */
}

​

Tailwind Configuration

colors: {
  ink: 'rgb(var(--color-ink) / <alpha-value>)',
  paper: 'rgb(var(--color-paper) / <alpha-value>)',
  accent: 'rgb(var(--color-accent) / <alpha-value>)',
  surface: 'rgb(var(--color-surface) / <alpha-value>)',
}

​

Typography

​

Font Families

• Serif (Playfair Display): Hero headings, section titles
• Sans-Serif (Inter): Body text, descriptions
• Monospace (JetBrains Mono): Technical labels, badges, metadata
• Hand (Patrick Hand): Decorative elements (occasional use)

​

Typography Patterns

• Large serif font (text-6xl to text-8xl)
• Bold, tight leading (leading-[0.9])
• High contrast with background

• Serif font, text-5xl
• Bold, uppercase optional
• Clear hierarchy

• Sans-serif, standard weights
• Generous line-height for readability
• Dark mode variants with gray shades

• Monospace, uppercase
• Small size, wide tracking
• Badge-style presentation

​

Component Inventory

​

Core Components

• Enhanced with Framer Motion animations
• Supports headerAction prop
• noPadding option
• Smooth fade-in animations

• Variants: primary, secondary, ghost, danger
• Sizes: sm, md, lg
• Full-width support
• Active state animations
• Dark mode support

• Complete form component set
• Label and error support
• Focus states with hard shadows
• Dark mode variants

• Multiple color options (emerald, blue, purple, orange, red, gray)
• Dark mode support
• Proper font size (12px)
• Monospace, uppercase styling

• Full modal implementation
• Overlay with backdrop blur
• Smooth animations
• Close button in header

​

Application Components

• HeroSection: Landing page hero with animated text
• MethodologySection: Three-pillar explanation with visualizations
• AboutSection: Philosophy and team information
• ProjectGrid: Project showcase grid
• ServicesBase: Service offerings display
• PortalDashboard: Authenticated client portal
• DecisionLog: Decision tracking interface
• ContactModal: Lead generation form
• Footer: Site footer with links

​

Layout Patterns

​

Landing Page Structure

• Full-viewport height
• Centered content
• Animated background elements
• Call-to-action buttons

• Full-width sections with borders
• Max-width containers (max-w-7xl)
• Generous vertical padding (py-24)
• Border separators between sections

1. Hero Section
2. How We Work Section
3. Project Grid
4. Methodology Section
5. About Section
6. Footer

​

Portal Interface

• Grid-based project cards
• Update cards with timestamps
• Navigation to detailed views
• User menu and settings

​

Navigation Patterns

​

Landing Page Navigation

• Fixed Header: Top navigation bar
• Smooth Scrolling: Anchor links to sections
• View State Management: React state for portal/landing toggle

​

Portal Navigation

• Tab-based navigation (Projects, Decisions, Gallery, Services)
• View state management
• Modal-based detail views

​

Animation Patterns

​

Hero Animations

• Typing Effect: Terminal-style typing animation
• Glitch Effect: Text glitch animation for technical feel
• Morphing Separators: Animated line separators
• Fade-in Animations: Smooth content reveals

​

Component Animations

• Card Fade-in: Cards fade in with slight upward motion
• Modal Transitions: Scale and fade for modals
• Hover Effects: Shadow and color transitions
• Button Interactions: Active state translations

​

Background Patterns

• Dot Pattern: Radial gradient dot pattern background
• Decorative Elements: Geometric shapes with low opacity
• Animated Gradients: Subtle gradient animations

​

Unique Design Features

​

Glitch Effect

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  // Glitch styling
}

​

Terminal Aesthetic

• Terminal-style badges and labels
• Monospace fonts for technical content
• Terminal cursor animations
• Console-style interfaces

​

Three-Pillar Visualization

• Curiosity (Math visualization)
• Discipline (Tensor visualization)
• Delivery (Chaos visualization)

​

Marquee Text

• Technical status messages
• Continuous loop animation
• Monospace font

​

Responsive Design

​

Breakpoints

• Mobile-first approach
• md: breakpoint for tablets and up
• Grid layouts adapt to screen size
• Text sizes scale responsively

​

Mobile Patterns

• Stacked layouts on mobile
• Reduced padding on small screens
• Touch-friendly button sizes
• Simplified navigation

​

Dark Mode Implementation

​

Theme Toggle

• Toggle button in header
• LocalStorage persistence
• System preference detection
• Smooth theme transitions

​

Dark Mode Colors

• Ink/Paper polarity flips
• Accent colors brighten in dark mode
• Surface colors darken appropriately
• Text colors adjust for contrast

​

Form Patterns

​

Contact Forms

• PaperCard containers
• PaperInput/PaperTextArea components
• Validation and error states
• Submit with loading states

​

Portal Forms

• Settings forms
• Project configuration
• Update forms

​

Component Usage Patterns

​

Card Usage

• Hero cards with large content
• Feature cards in grids
• Update cards in portal
• Service cards with descriptions

​

Button Usage

• Primary: Main CTAs (Explore Services, Contact)
• Secondary: Alternative actions
• Ghost: Tertiary links
• Full-width: Form submissions

​

Badge Usage

• Status indicators (ACTIVE, ONLINE)
• Section labels (PHILOSOPHY, SERVICES)
• Metadata tags
• Color-coded by purpose

​

Consistency Assessment

​

Strengths

• ✅ Excellent dark mode implementation
• ✅ Consistent use of Paper UI components
• ✅ Proper CSS custom properties approach
• ✅ Enhanced animations improve UX
• ✅ Complete component set
• ✅ Responsive design patterns

​

Areas for Improvement

• ⚠️ Input font should be monospace (currently uses sans-serif)
• ⚠️ Button active state should include X translation (currently only Y)
• ⚠️ Some decorative elements could be simplified

​

Recommendations

​

High Priority

1. Fix Input Font
   • Change PaperInput font from sans-serif to monospace
   • Aligns with Paper UI principle for technical inputs
2. Fix Button Active State
   • Add X translation to active state
   • Should be: active:translate-x-[2px] active:translate-y-[2px]

​

Medium Priority

3. Document Patterns
   • Document animation patterns
   • Create reusable animation utilities
   • Standardize timing functions
4. Component Documentation
   • Document all custom components
   • Create usage examples
   • Provide prop documentation

​

Design Generalities Summary

• Enhanced animations and interactions
• Full dark mode support
• Technical/terminal aesthetic elements
• Professional marketing presentation
• Smooth user experience

​

Related Documentation

• Design System - Paper UI principles
• Application Review - Cross-application review
• Baseline Components - Standardized components
• Tailwind Configuration - Setup guide