Skip to content
DesignMunkDesignMunk Submit a site

Learniverse

learniverse.app
Zero-effort AI training platform that turns scattered knowledge into courses.
AI Software Next.js Tailwind Homepage DM Sans General Sans
Share Visit site
learniverse.app DESKTOP · 1440
Learniverse

AI Breakdown

Design export

---
version: alpha
name: Learniverse
description: Zero-effort AI training platform that turns scattered knowledge into courses.
colors:
  primary: "#101828"
  secondary: "#9cacfc"
  tertiary: "#3c4ffb"
  neutral: "#ffffff"
  border: "#000000"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: DM Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.019em
  headline-md:
    fontFamily: Familjen Grotesk
    fontSize: 39px
    fontWeight: 500
    lineHeight: 1.23
    letterSpacing: -0.062em
  headline-sm:
    fontFamily: Familjen Grotesk
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.03
    letterSpacing: -0.019em
  headline-xs:
    fontFamily: GeneralSans-Medium
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: GeneralSans-regular
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.63
rounded:
  sm: 24px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 78px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 10px 24px
    height: 50px
  button-secondary:
    textColor: "#09090b"
    rounded: "{rounded.sm}"
    padding: 10px 24px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#020817"
    rounded: "{rounded.sm}"
    padding: 0px 48px
---

# Learniverse: Blue Pill CTAs and Soft, Floating Mockups

## Overview

Learniverse presents a modern, friendly SaaS surface aimed at training managers who need speed and clarity. The interface is light and spacious, with saturated blue accents guiding action. Hierarchy is handled with confident headlines, roomy body copy, and generous spacing that keeps sections scannable. When a token is absent, default to clean white surfaces, dark ink text, and a single blue accent for action.

## Colors

- **primary (#101828):** Deep ink for headlines, core text, and high-contrast UI copy.
- **secondary (#9cacfc):** Soft tint for supporting accents, subtle highlights, and charts.
- **tertiary (#3c4ffb):** Primary action color for buttons, links-on-light, and active states.
- **neutral (#ffffff):** Base canvas and default card background.
- **border (#000000):** High-contrast keylines and focus rings; apply with reduced opacity on light surfaces when needed.
- **surface ({colors.neutral}):** Alias to neutral; use for cards and modals.
- **on-surface ({colors.primary}):** Alias to primary; default text on light surfaces.

## Typography

- Headline LG — DM Sans, 48px, 600, tight letter-spacing. Freely available on Google Fonts; use for the main hero claim and major section intros where a single line must carry weight.
- Headline MD — Familjen Grotesk, 39px, 500. Google Fonts; use for section headers and pricing plan titles.
- Headline SM — Familjen Grotesk, 31px, 500. Google Fonts; use for card titles, step headings, and FAQs.
- Headline XS — GeneralSans-Medium, 25px, weight 400. Proprietary/self-hosted; substitutes: Inter, Plus Jakarta Sans, or Manrope for similar x-height and modern warmth.
- Body MD — GeneralSans-regular, 20px, 400, 1.63 line-height. Proprietary/self-hosted; substitutes: Inter, Plus Jakarta Sans, or Manrope. Include Noto Color Emoji for consistent emoji rendering when used in copy.

## Layout

- Spacing scale: 8, 16, 32, 48, 78px. Compose vertical rhythm in 32–48px strides; reserve 78px for hero and section breaks.
- Grid: responsive 12-column with content gutters built on md (32px). Keep content widths generous and whitespace clear around the product mock.
- In cards and panels, use sm (16px) for intra-component padding; use md (32px) for card gutters and grid spacing.

## Elevation & Depth

- Shadows are subtle and functional. Use sm (rgba(0,0,0,0.05) 0 4px 10px) for inputs and small floating elements.
- Use md (two-layer 0,10,15/0,4,6 at 0.1 alpha) for large cards and the browser-style app mock.
- lg and xl are none; depth beyond md is expressed with whitespace, contrast, and scale, not heavier shadows.
- The inner shadow token provides a soft inset highlight for pressed or sunken panels when needed.

## Shapes

- rounded.sm = 24px: cards, secondary buttons, modal corners, pricing panels.
- rounded.full = 9999px: primary CTAs, input pills, badges, and chips.
- Link buttons are square (0px) to remain text-like. Keep radius usage consistent to signal click priority: full for primary action, sm for containers, none for links.

## Components

- Button Primary: background #3c4ffb, text #ffffff, 9999px radius, 10px × 24px padding, 50px height.
- Button Secondary: text #09090b, 24px radius, 10px × 24px padding, 50px height.
- Button Link: text #101828, square corners (0px), no fill.
- Card: background #ffffff, text #020817, 24px radius, horizontal padding 48px (0 48px). Apply md shadow when lifted.

### Hero Email Capture
- One-line input pill paired with a primary CTA. Use rounded.full, sm shadow, and body-md text (20px). Place helper text (trial terms) below with ample sm–md spacing.

### Social Proof Row
- Avatar stack plus star rating under the hero. Use rounded.full for avatars, body-md for copy, and tertiary accents for stars or count.

### App Preview (Browser Mock)
- Wide card with 24px radius and md shadow. Inside, use headline-sm (31px) for "New training" and body-md for rows. Spacing: md (32px) gutters, sm (16px) between list items.

### Before/After Split
- Two stacked cards titled BEFORE and AFTER using headline-xs (25px). Use tertiary for check/lead markers and md spacing between items.

### Three-Step Builder
- Numbered steps (01–03) with headline-sm titles. Use tertiary as the active dot/bar color and md spacing between steps.

### Metrics Strip
- Compact counters ("Hours saved", etc.) in a single card. Use headline-xs for numbers, body-md for labels, 24px radius, sm shadow.

### Pricing Cards
- Two cards (TEAM, ENTERPRISE) with headline-md (39px) titles. Feature lists in body-md; CTAs use button-primary. Billing toggle styled as small pills with rounded.full.

### FAQ Accordion
- Question rows in headline-xs (25px) and body-md answers. Divider lines use border color with reduced opacity; spacing md inside each item.

## Do's and Don'ts

- Do use the spacing scale; default to 32px vertical rhythm and step up to 48–78px for major breaks.
- Do keep primary actions in the 50px, rounded.full button with #3c4ffb fill and #ffffff text.
- Do set major headlines in DM Sans (48px) and section headers in Familjen Grotesk (39/31px).
- Don't introduce heavier shadows than md; depth is handled with whitespace and contrast.
- Don't mix corner radii within a component; reserve 24px for containers and 9999px for CTAs/inputs.
- Don't use secondary (#9cacfc) for primary actions; keep it for supportive highlights only.

## Agent Prompt Guide

Quick reference — Text: #101828 · Background: #ffffff · Border: #000000 · Accent (primary action): #3c4ffb · Support tint: #9cacfc

1) Build the hero
- Canvas #ffffff. H1 set in DM Sans 48px/1.21, 600, letter-spacing -0.019em, color #101828.
- Body copy in General Sans Regular 20px/1.63 (substitute Inter if unavailable), color #101828.
- Email field pill: 9999px radius, height 50px, sm shadow, inner padding 16px.
- CTA button: background #3c4ffb, text #ffffff, height 50px, padding 10px 24px, radius 9999px. Place 32px below the body copy.

2) App preview card
- Card background #ffffff, radius 24px, md shadow, outer margin 48px from surrounding content.
- Title "New training" in Familjen Grotesk 31px/1.03, 500, color #101828.
- List items in General Sans Regular 20px/1.63. Internal spacing: 16px between rows, 32px side padding.

3) Pricing section
- Two cards on a 12-col grid with 32px gutters. Card background #ffffff, radius 24px, md shadow.
- Plan titles in Familjen Grotesk 39px/1.23, 500. Features in General Sans Regular 20px/1.63.
- Primary CTA per card uses #3c4ffb on #ffffff, 50px height, 10px 24px padding, radius 9999px.
- Billing toggle: small pills with background #9cacfc for active, text #101828, radius 9999px.

4) Testimonial carousel
- Container card #ffffff, radius 24px, sm shadow. Quote body in General Sans Regular 20px/1.63; author in Familjen Grotesk 31px/1.03, 500.
- Avatar images clipped to rounded.full; star rating accents in #3c4ffb.

5) FAQ accordion
- Question row: General Sans Medium 25px/1.2 (or Inter 600 substitute), color #101828; answer: General Sans Regular 20px/1.63.
- Dividers: 1px border color #000000 at low opacity. Spacing: 16px inside items, 32px between items.

## Similar Brands

- Notion — Similar light canvas, dark text, and restrained color; Notion is more monochrome with less emphasis on saturated CTA color.
- Linear — Crisp type and soft depth; Linear stays darker and denser, while Learniverse is brighter with pill CTAs.
- Webflow — Clear sectioning and staged product visuals; Webflow uses more gradients and editorial art direction.
- Intercom — Blue-forward CTAs and conversational tone; Intercom leans heavier on illustrations and multi-color accents.

More like this

Browse AI →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 3 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago