---
version: alpha
name: "AMBOSS"
description: "Clinical learning presented through teal confidence and audience-specific navigation."
colors:
  bg: "#ffffff"
  text: "#293b47"
  brand: "#047a88"
  on-brand: "#ffffff"
  surface: "#f9fafb"
  hero-dark: "#052c31"
  accent: "#c84678"
typography:
  display:
    fontFamily: "LatoLocal"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "LatoLocal"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

AMBOSS combines a white audience-oriented header with a deep teal statement band. A prominent announcement precedes the centered message; a pink editorial action and institution marks provide a second layer of hierarchy. The page addresses learning and clinical work together.

## Colors

The observed trial action uses #047a88 and the institution strip uses #052c31. White and #f9fafb support later sections, with #293b47 ink. The pink action is #c84678. The hero has a changing teal treatment; hero-dark is a measured strip color, not an assertion that the entire image is flat.

## Typography

LatoLocal is the measured font throughout navigation and display. The heading is 48px at weight 600 on desktop and approximately 37px at mobile. Keep readable sentence-case headings; do not substitute a high-contrast serif to imply clinical authority.

## Layout

Audience navigation precedes a centered statement and a separate institution-logo strip. Mobile stacks the announcement contents above the headline. Follow with light reading sections rather than introducing multiple competing dark cards.

The 390px view keeps the announcement above a multi-line headline and near-full-width pink action. Its long vertical introduction is a source behavior, not a requirement to hide the next section. Check compact phones and allow the announcement to collapse accessibly.

## Elevation & Depth

Dark teal tonal separation and the white header establish layers. Institution marks sit on a darker strip without individual cards. Prefer borders and tonal surfaces to strong shadows when adding menus or disclosure panels.

## Shapes

The observed trial control has 8px corners. Announcement panels may be more rounded, but the main page remains full-width bands. Reuse the compact radius for controls and avoid treating the whole hero as a floating card.

## Components

The header distinguishes login from a filled teal trial action. The hero uses a pink editorial action, while the announcement contains its own link and dismiss control. Keep these command roles distinct and label every dismiss icon.

Dismissal should remove only the announcement and retain focus appropriately. No trial or clinical workflow was opened. Derived interactions should provide stable navigation and avoid auto-moving logos for reduced-motion users.

Clinical claims require evidence beyond institutional logos. Make audience menus keyboard-operable and distinguish the pink action by label, not color alone. Medical content should have clear scope and not imply this visual design establishes clinical validity.

Use precise audience labels for students, clinicians, and institutions. Separate learning benefits from clinical performance claims. Evidence links belong near the claims they support and should identify their destination.

White navigation and content coexist with a dark hero and partner strip. No app-wide dark theme was verified. A derived dark variant must retain a readable article surface rather than making all clinical text teal-on-black.

This extraction covers the public US AMBOSS homepage after rejecting optional cookies. It does not represent the authenticated medical library, question bank, or clinical assistant interaction design.

## Do's and Don'ts

Preserve audience navigation, distinguish trial from editorial actions, and keep evidence links explicit. Avoid suggesting that logos prove safety, copying consent dialog styles, or inventing medical application states from the acquisition page.

Create a medical-learning homepage with white audience navigation, a teal statement band, pink editorial action, and a dark institution strip. Test announcement dismissal and long mobile headlines without implying unverified clinical claims.