Learning & Reference / iOS / Android / Web

Moodle

The Moodle app aims for dependable over stylish: plain blue actions, orange kept for the brand mark, a strict 4 pixel grid and accessibility baked into the tokens.

Download
  • #0F6CBF
  • #F98012
  • #357A32
  • #CA3120
  • #282828
  • #F8F9FA

Color

Every color token in the file, grouped by role.

Brand

  • primary#0F6CBF
  • brand orange#F98012
  • ink secondary#495057
  • on primary#FFFFFF

Surfaces

  • canvas#F8F9FA
  • paper#FFFFFF
  • dark bg#282828

Text

  • ink#282828
  • ink strong#343A40
  • ink muted#6A737B

Lines

  • stroke input#8F959E
  • stroke#DEE2E6

Status

  • success#357A32
  • danger#CA3120
  • warning#F0AD4E
  • info teal#008196

More

  • gray 400#CED4DA
  • gray 200#E9ECEF
  • category administration#5D63F6
  • category assessment#EB66A2
  • category collaboration#F7634D
  • category communication#11A676
  • category content#399BE2
  • category interface#A378FF
  • calendar category#8E24AA
  • course pastel cyan#81ECEC
  • course pastel blue#74B9FF
  • course pastel purple#A29BFE

Typography

Each style is set with the file's own family, size, weight and spacing.

  • system-uiSystem font, drawn with the default on your device.
  • heading128px / 400 / 130%

    Pack my box with five dozen liquor jugs

  • heading224px / 400 / 130%

    Pack my box with five dozen liquor jugs

  • heading420px / 500 / 130%

    Pack my box with five dozen liquor jugs

  • subtitle16px / 500 / 1.4

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body large16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • label12px / 500 / 16px

    Continue to checkout

  • label large14px / 500 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • none0px
  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl24px
  • round50%

Spacing

The spacing scale, drawn to size.

  • s14px
  • s28px
  • s312px
  • s416px
  • s624px
  • s832px
  • min target44px
  • bottom tabs56px
  • side tabs64px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • card
    card
  • input
    input
  • danger button
    danger-button
  • success badge
    success-badge
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 132 lines
version: alpha
name: Moodle-design-analysis
description: "A learning app with its own design system (the mdl tokens): a trustworthy blue (#0f6cbf) on neutral grays with the Moodle orange (#f98012) held back as the brand mark, a 4 pixel spacing multiple, a 44 pixel minimum target, a cool gray ramp and graded 4 to 24 pixel radii."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0f6cbf"
  brand-orange: "#f98012"
  success: "#357a32"
  danger: "#ca3120"
  warning: "#f0ad4e"
  info-teal: "#008196"
  ink: "#282828"
  ink-strong: "#343a40"
  ink-secondary: "#495057"
  ink-muted: "#6a737b"
  stroke-input: "#8f959e"
  stroke: "#dee2e6"
  gray-400: "#ced4da"
  gray-200: "#e9ecef"
  canvas: "#f8f9fa"
  paper: "#ffffff"
  dark-bg: "#282828"
  category-administration: "#5d63f6"
  category-assessment: "#eb66a2"
  category-collaboration: "#f7634d"
  category-communication: "#11a676"
  category-content: "#399be2"
  category-interface: "#a378ff"
  calendar-category: "#8e24aa"
  course-pastel-cyan: "#81ecec"
  course-pastel-blue: "#74b9ff"
  course-pastel-purple: "#a29bfe"
  on-primary: "#ffffff"

typography:
  heading1:
    fontFamily: "system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 130%
  heading2:
    fontFamily: "system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 130%
  heading4:
    fontFamily: "system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 130%
  subtitle:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
  body:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-large:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
  label-large:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  round: 50%

spacing:
  s1: 4px
  s2: 8px
  s3: 12px
  s4: 16px
  s6: 24px
  s8: 32px
  bottom-tabs: 56px
  side-tabs: 64px
  min-target: 44px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-large}"
    rounded: "{rounded.xs}"
    height: 44px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  input:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    height: 44px
  danger-button:
    backgroundColor: "{colors.danger}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-large}"
    rounded: "{rounded.xs}"
    height: 44px
  success-badge:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    padding: 4px

Overview

The Moodle app aims to feel dependable and school-like rather than stylish. Its styles live in a small design system with mdl- tokens for spacing, type, shape and shadows, on top of a cool gray ramp and a plain blue #0f6cbf. The Moodle orange #f98012 is the brand mark, but it is kept out of normal interface chrome. [Measured]

Three decisions define the look:

  1. A 4 pixel spacing multiple. Spacing tokens are generated as index x 4px, so every gap sits on a 4 pixel grid. [Measured]
  2. Accessibility is built into tokens. A minimum target size of 44px drives toolbar buttons, avatars, search bars and item dividers (44px + 8px), and font sizes pass through a dynamic-font helper so text scales with the user's setting. [Measured]
  3. Course color without chaos. Course images fall back to a pastel set (cyan #81ecec, blue #74b9ff, purple #a29bfe, and others), and activity types get category colors such as administration #5d63f6, assessment #eb66a2 and communication #11a676. [Measured]

Source for this file: the public repository, read on 2026-10-06. The moodle.org site could not be measured (it returned almost no styles). No on-device capture was done. See Known Gaps.

Core

Colors

RoleValue
Primary blue#0f6cbf
Brand orange#f98012
Success#357a32
Danger#ca3120
Warning#f0ad4e
Info (teal, noted as unused)#008196
Copy text#282828
Strong text#343a40
Secondary text#495057
Muted text#6a737b
Stroke on inputs#8f959e
Stroke#dee2e6
Gray 400, 200#ced4da, #e9ecef
Light canvas#f8f9fa
Dark background#282828 (comment notes #1a1a1a)

Activity category colors (light set): administration #5d63f6, assessment #eb66a2, collaboration #f7634d, communication #11a676, content #399be2, interface #a378ff. A second set uses #da58ef, #f90086, #5b40ff, #eb6200, #0099ad and #8d3d1b. Pure black is marked "avoid usage". All [Measured].

Typography

System fonts. [Measured] Token scale (px): body 12, 14 and 16; labels 10, 12 and 14 at medium weight with 16, 16 and 20 line heights; subtitles 14, 16 and 20 at medium; headings 28, 24, 22, 20, 18 and 16 with the first three at regular weight and the rest at medium, all at 130% line height; icons 16, 20 and 24. A monospace stack of Andale Mono, Monaco and Courier New is defined. Every size passes through a dynamic-font helper. [Measured]

Shape and spacing

  • Spacing: multiples of 4 (4, 8, 12, 16, 20, 24...). Bottom tabs are 56px high and side tabs 64px wide. [Measured]
  • Radii: none 0, xs 4, sm 8, md 12, lg 16, xl 24 and round 50 percent. Inputs use xs, modals md, cards lg, course images sm. [Measured]
  • Shadows: a Material-like elevation scale named 00, 01, 02, 03, 04, 06, 08, 12, 16 and 24, each with a double shadow tinted #282828 at about 20 percent, plus an outline shadow for focus. [Measured]
  • Touch: minimum target 44px. [Measured]

Iconography and motion

Icons at 16, 20 and 24. The app includes show and hide and slide animations. [Measured]

Themes

Light, dark, and a configurable site color from the connected Moodle site. A reading mode exists for long content. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

The iOS chevron and swipe back are available, but the app is mostly styled in one look. [Inferred]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

A bottom tab bar, 56px high, with side tabs on larger screens. [Measured]

Main action

Expected on iOS: nav bar or bottom bar button.

Toolbar buttons at 44px minimum. [Measured]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Modals with a 12px radius, and alerts. [Measured]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Controls styled by tokens, with a search bar at 44px height. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

A dynamic-font helper scales font sizes with the user's text setting. [Measured]

Touch and pointer targets

Expected on iOS: 44pt minimum.

A 44px minimum target token is applied across the app. [Measured]

Insets and system bars

Expected on iOS: safe areas, status bar.

Safe areas are handled by the layout. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

An icon font. [Inferred]

Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Sign-in is to a school or company Moodle site. Some sites use single sign-on through a browser. Account deletion is controlled by the site. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Medium. The app has an iOS look, and adds dynamic font scaling and a 44 target size. [Measured]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back is handled by the app. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A bottom tab bar (56px) that becomes side tabs (64px) on larger screens. [Measured]

Main action

Expected on Android: floating action button.

Toolbar and in-content buttons. No floating action button was found. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Modals and toasts. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material-style controls styled by tokens. [Inferred]

Text sizing

Expected on Android: font scale.

Scaled through the dynamic-font helper. [Measured]

Touch and pointer targets

Expected on Android: 48dp minimum.

A 44px token, slightly below the 48dp guideline. [Measured]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

An icon font. [Inferred]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Site-controlled accounts. Deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Partial. Material-like elevation names and a Material mode, without Material 3 color roles. The 44px target is under the 48dp Android guideline. [Measured]

Platform: Web

The moodle.org site. It could not be measured.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: page-level button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: browser zoom.

Not measured. [Inferred]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not measured. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Not measured. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

The moodle.org stylesheet returned only a single font family (Arial), so nothing reliable was captured. The app itself is built from web technology. [Measured]

Cross-platform consistency

The two mobile apps share one set of tokens. The Moodle web product (the learning site itself) is themeable per site and is not the same as the app's look. [Inferred]

Do's and Don'ts

Do

  • Build all spacing on multiples of 4 pixels.
  • Keep every interactive target at 44 pixels or larger.
  • Pass all font sizes through the dynamic-font helper.
  • Use the blue #0f6cbf for actions and keep the orange for the brand mark.
  • Use the elevation scale (01 to 24) instead of custom shadows.
  • Use the pastel set for course placeholder images.

Don't

  • Don't use pure black (the source marks it "avoid usage").
  • Don't use the unused teal info color as a primary.
  • Don't hard-code colors. Read the site and token variables.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The moodle.org site could not be measured.
  • The mapping of the site theme color to the app's primary color was not read in full.
  • Native shell behavior (safe areas, system bars) is inferred.
  • Account deletion and store policy rules were not verified.