---
name: LearnWinning Identity and Brand Manual
description: An index-first identity system for applying LearnWinning with wayfinding precision and a concentrated progress signal.
colors:
  brand-black: "#111111"
  app-dark: "#0B0B0B"
  warm-offwhite: "#F7F7F2"
  signal-lime: "#8BE600"
  paper-quiet: "oklch(92.194% 0.01074 112.38)"
  paper-recessed: "oklch(88% 0.012 116)"
  ink-secondary: "oklch(34% 0.014 124)"
  text-muted: "oklch(48% 0.01794 123.38)"
  rule: "oklch(80% 0.013 114)"
  rule-strong: "oklch(66% 0.016 118)"
  signal-soft: "oklch(91% 0.085 132.345)"
  focus: "oklch(70% 0.2 132.345)"
  selection: "oklch(86% 0.17 132.345)"
typography:
  display:
    fontFamily: "LearnWinning Montserrat, sans-serif"
    fontSize: "clamp(2.65rem, 7vw, 5.25rem)"
    fontWeight: 800
    lineHeight: 0.98
    letterSpacing: "-0.04em"
  headline:
    fontFamily: "LearnWinning Montserrat, sans-serif"
    fontSize: "clamp(2.441rem, 5vw, 3.052rem)"
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: "-0.035em"
  title:
    fontFamily: "LearnWinning Montserrat, sans-serif"
    fontSize: "1.5625rem"
    fontWeight: 800
    lineHeight: 1.12
    letterSpacing: "-0.025em"
  body:
    fontFamily: "LearnWinning Montserrat, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "normal"
  label:
    fontFamily: "LearnWinning Montserrat, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "normal"
rounded:
  small: "0.5rem"
  medium: "0.75rem"
  large: "1rem"
  pill: "999rem"
spacing:
  2xs: "0.25rem"
  xs: "0.5rem"
  sm: "0.75rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "2rem"
  2xl: "3rem"
  3xl: "4rem"
  4xl: "6rem"
  5xl: "8rem"
components:
  action-outline:
    backgroundColor: "transparent"
    textColor: "{colors.brand-black}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0.75rem 1rem"
    height: "2.75rem"
  action-outline-hover:
    backgroundColor: "{colors.brand-black}"
    textColor: "{colors.warm-offwhite}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0.75rem 1rem"
    height: "2.75rem"
  action-copied:
    backgroundColor: "{colors.signal-soft}"
    textColor: "{colors.brand-black}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0.75rem 1rem"
    height: "2.75rem"
  index-item:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.small}"
    padding: "0 0.75rem"
    height: "2.75rem"
  index-item-active:
    backgroundColor: "{colors.paper-quiet}"
    textColor: "{colors.brand-black}"
    typography: "{typography.label}"
    rounded: "{rounded.small}"
    padding: "0 0.75rem"
    height: "2.75rem"
  specimen:
    backgroundColor: "{colors.warm-offwhite}"
    textColor: "{colors.brand-black}"
    rounded: "0"
    padding: "2rem"
---

# Design System: LearnWinning Identity and Brand Manual

## Overview

**Creative North Star: "The Progress Wayfinding Manual"**

This record applies only to the LearnWinning identity, its production assets, and the adjacent brand-manual surface. It does not define the visual system for unrelated WMS products. Within this boundary, the identity behaves like a precise reference instrument: warm paper and near-black rules organize decisions, generous specimen fields make production assets authoritative, and electric lime marks progress rather than decorating the page.

The system is quiet, practical, capable, and forward-moving. It favors an index-first reading path, direct implementation guidance, and production-ready assets over promotional composition. The flat material language is deliberate: hierarchy comes from rule weight, scale, contrast, spacing, and small background shifts.

**Key Characteristics:**

- Index-first navigation that turns a long brand page into a reference instrument.
- A single Montserrat family with decisive 400, 500, and 800 weight contrast.
- Warm off-white and near-black fields interrupted by a rare electric-lime progress signal.
- Flat, square specimen stages with direct downloads beside the guidance they implement.
- Production assets remain the source of truth; collaborators choose and apply rather than rebuild.
- Wordmark SVGs use outlined Montserrat letterforms, preserving the approved `n → w` optical gap and the same 22-degree signal alignment without relying on installed fonts.
- Raster and SVG artwork always retains its intrinsic aspect ratio; presentation sizing never distorts the approved geometry.
- The live brand page pins its favicon, stylesheet, and script to query revision `v1.2` to prevent stale linked styling or behavior.

## Colors

The identity uses near-black and warm off-white as its field, with electric lime reserved for recognition, current state, focus, selection, and progress.

### Primary

- **Signal Lime:** The signature progress cue. Every approved full-color wordmark places the same lime terminal at a 22-degree forward angle over the second `i`; one-color production variants preserve that exact signal geometry in their single ink. Elsewhere, lime marks only meaningful identity or interface state.

### Neutral

- **Brand Black:** The primary light-field wordmark color and strongest rule or text tone.
- **App Dark:** The approved dark field for reversed marks, app icons, and the manual footer.
- **Warm Off-White:** The primary reading field and reversed identity color.
- **Quiet Paper and Recessed Paper:** Small tonal shifts for active navigation, demonstrations, avatars, and course-signature fields.
- **Secondary Ink and Muted Text:** Supporting copy and metadata that must recede without losing legibility.
- **Rule and Strong Rule:** The thin and emphatic divider vocabulary that replaces decorative cards and shadow.

### Named Rules

**The Signal, Not Fill Rule.** Lime communicates identity, current location, selection, focus, or progress; it is not a general-purpose section background or decorative wash.

**The Approved Field Rule.** Use the supplied primary assets on warm off-white and the supplied reverse assets on app dark or comparably dark approved fields.

## Typography

**Display Font:** LearnWinning Montserrat (with sans-serif fallback)  
**Body Font:** LearnWinning Montserrat (with sans-serif fallback)

**Character:** One geometric sans family creates continuity from production wordmark to operating manual. Hierarchy comes from scale, tight display tracking, and sharp shifts among Regular, Medium, and ExtraBold—not from introducing another font.

### Hierarchy

- **Display:** ExtraBold, fluid and tightly tracked, for the single page thesis; keep it short and balanced.
- **Headline:** ExtraBold with compact leading for major manual sections.
- **Title:** ExtraBold for specimen names, rules, and decisive local headings.
- **Body:** Regular with relaxed leading for explanations; prose and list items stay within a readable 68-character measure.
- **Label:** Medium for navigation and metadata; action labels move to ExtraBold while retaining the same compact size.

### Named Rules

**The One-Family Rule.** Use Montserrat throughout this LearnWinning identity surface; create hierarchy with the implemented weight, scale, spacing, and case before considering another face.

**The Weight Carries Meaning Rule.** Regular explains, Medium orients, and ExtraBold names decisions and actions.

## Layout

The brand page is a continuous manual capped at 92rem. Below 64rem, the guideline index is a sticky disclosure above a single reading column. At 64rem and wider, it becomes a 17rem sticky rail beside the reading field; the main sections increase to 6rem block padding and up to 6rem inline padding. At 40rem, rules, metadata, palettes, and selected specimen groups begin using two-column arrangements. Website mock-header examples deliberately remain one column through 1407px and split into equal columns only at 88rem; their mock navigation links become visible earlier, at 64rem. The palette reaches four columns at 64rem.

Spacing follows the observed quarter-rem-to-eight-rem scale. Dense control interiors use 0.75–1rem, component groups use 1.5–2rem, and page sections use 4–8rem. The body never creates page-level horizontal scrolling from 320px upward. Specimens stack before their contents become cramped, every raster and SVG image preserves its intrinsic aspect ratio, and safe-area insets are honored in sticky and footer chrome.

**The Index-First Rule.** A collaborator must be able to choose a usage context before browsing the full asset catalog.

**The Continuous Manual Rule.** Prefer rules, aligned fields, and section rhythm over independent floating cards.

## Elevation & Depth

The system is flat by intent and has no canonical box-shadow vocabulary. Depth is conveyed through dark/light field changes, 1px and 2px rules, sticky positioning, clipped specimen boundaries, and the header's translucent paper with a restrained 14px backdrop blur. The only drop shadow in the shipped page appears inside an explicitly incorrect logo-use demonstration and is not a reusable style.

### Named Rules

**The Flat-by-Intent Rule.** Do not add ornamental shadows to specimens, navigation, or content containers; use contrast, rule weight, and background shift to express hierarchy.

## Shapes

Most reading and specimen geometry stays square. Thin rectangular rules create the page skeleton, and production marks keep their native silhouettes. A small 0.5rem radius is limited to index hit areas; the fully rounded pill is reserved for actions and the lime signal. Social-avatar circles are output-context masks, while app-icon rounding is delegated to platform masks rather than baked into the master artwork.

**The Native Silhouette Rule.** Never reshape, stretch, rotate, or manually round a supplied LearnWinning asset; raster and SVG presentation must preserve intrinsic aspect ratio at every viewport.

## Components

### Action Links and Copy Buttons

- **Shape:** Fully rounded outline control with a 2.75rem minimum height.
- **Primary:** Transparent field, current-color 1px border, compact ExtraBold label, and 0.75rem by 1rem internal padding.
- **Hover / Focus:** Hover inverts to ink and paper; keyboard focus uses a 3px lime-family outline with 4px offset; active presses down by 1px.
- **Copy state:** A successful copy uses the soft lime field and signal border; failure changes the border to dashed without inventing a new warning color.

### Index Navigation

- **Style:** Compact Medium labels in a sticky disclosure on smaller screens and a persistent left rail at desktop.
- **Default / Hover / Active:** Default items use secondary ink. Hover and current items move onto quiet paper; current location adds one small lime dot.
- **Tracking:** Current location is deterministic from scroll position: on each animation-frame-throttled scroll or resize pass, the active item is the last section whose top has crossed a marker 22% into the viewport, capped at 180px. This avoids intersection-order ambiguity.
- **Mobile treatment:** The disclosure closes after a destination is selected and opens automatically again when the viewport crosses the desktop breakpoint.

### Context and Download Rows

- **Style:** Full-width linked rows separated by rules, with no card fill or corner treatment.
- **Responsive behavior:** The name and explanation stack on narrow screens and split into asymmetric columns from 40rem upward.

### Specimen Containers

- **Corner Style:** Square, clipped boundaries.
- **Background:** Warm off-white for primary artwork and app dark for reverse artwork.
- **Shadow Strategy:** None.
- **Border:** Strong 1px rule around the container, with a standard 1px rule separating stage and metadata.
- **Internal Padding:** 2rem in the artwork stage and 1.5rem in metadata.

### Sticky Header

- **Style:** A quiet 4.5rem mobile and 5rem desktop bar with the approved flow wordmark, compact version metadata, a bottom rule, translucent warm paper, and backdrop blur.
- **Behavior:** It stays above the index and reading field without adding shadow.

### Website Mock Headers

- **Arrangement:** Light and dark header examples remain stacked through 1407px, then become two equal columns at 88rem.
- **Navigation visibility:** Mock links stay hidden on compact layouts and appear at 64rem, independently of the later two-column split.
- **Artwork:** Header wordmarks retain their intrinsic aspect ratio and cap at 14rem wide.

### Brand-Page Asset Delivery

- **Revision:** The favicon, stylesheet, and script load with the shared `v1.2` query revision so a hosted or live-opened manual does not combine stale styling or behavior with current markup.

**The Live Asset Revision Rule.** Increment and keep the favicon, stylesheet, and script query revisions aligned whenever any of those linked assets changes.

### Lime Terminal

- **Style:** A small fully rounded, 22-degree terminal attached to the cover thesis.
- **Motion:** It settles once over 720ms using exponential ease-out; reduced-motion preference collapses animations and transitions to effectively immediate feedback.

## Do's and Don'ts

### Do:

- **Do** use the horizontal lockup as the preferred identity and the standalone wordmark when the monogram is unnecessary. Every full-color wordmark uses the same lime 22-degree signal over the second `i`; monochrome variants preserve the same geometry in one ink.
- **Do** use the Path Monogram when the full name cannot remain legible, especially in square and small digital contexts.
- **Do** keep at least half the monogram's height clear on every side of a lockup.
- **Do** use the wordmark at 120px wide or larger and the horizontal lockup at 180px wide or larger.
- **Do** use the prepared square, circular-crop, app-store, and Android adaptive exports for their stated destinations.
- **Do** keep the complete wordmark level and preserve the forward-angled lime signal over the second `i`.
- **Do** preserve the clear optical gap between the regular `n` and ExtraBold `w`; it is part of the approved vector geometry.
- **Do** preserve intrinsic aspect ratio for every raster and SVG image at every responsive size.
- **Do** respect keyboard focus, forced-color behavior, and reduced-motion preference on the brand-manual surface.

### Don't:

- **Don't** stretch, compress, rotate, redraw, or reposition any supplied LearnWinning mark.
- **Don't** add glow, bevel, outline, gradient, extrusion, or decorative drop shadow to the identity.
- **Don't** use the full wordmark below 120px wide or use it where a prepared monogram export is intended.
- **Don't** retype or re-space the outlined SVG wordmark; use the supplied master file.
- **Don't** manually round app-icon masters; platform masks supply the corner shape.
- **Don't** flood a composition with lime or use it without a signal, state, progress, focus, or identity purpose.
- **Don't** force the WMS logo into every customer-facing LearnWinning lockup; reserve the parent relationship for legal, corporate, and partner contexts.
- **Don't** apply this brand-local manual as the design system for unrelated WMS surfaces.
