DESIGN.md inspired by AMBOSS

---
name: AMBOSS
tagline: Clinical learning presented through teal confidence and
  audience-specific navigation.
spec: webdesignhot/0.2
profile: catalog
source_url: https://www.amboss.com/us
quality: auto
published_at: 2026-09-12T05:42:29.725Z
updated_at: 2026-09-12T05:42:29.725Z
categories: [healthcare, education]
tags: [light, blue, sans, search]
preview_swatch: ["#ffffff", "#047a88", "#293b47"]
x-webdesignhot:
  author: webdesignhot
  quality: auto
  featured: false
  published_at: 2026-09-12T05:42:29.725Z
  updated_at: 2026-09-12T05:42:29.725Z
  categories:
    - healthcare
    - education
  tags:
    - light
    - blue
    - sans
    - search
  preview_swatch:
    - "#ffffff"
    - "#047a88"
    - "#293b47"
  related:
    - mayo-clinic
    - cleveland-clinic
    - openstax
  description: 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.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
colors:
  bg: "#ffffff"
  text: "#293b47"
  brand: "#047a88"
  on-brand: "#ffffff"
  surface: "#f9fafb"
  hero-dark: "#052c31"
  accent: "#c84678"
typography:
  display:
    family: LatoLocal, Lato, sans-serif
    weights:
      - 600
  body:
    family: LatoLocal, Lato, sans-serif
    weights:
      - 400
      - 600
  scale:
    h1:
      fontSize: 48
      fontWeight: 600
      fontFamily: LatoLocal, Lato, sans-serif
    body:
      fontSize: 16
      fontWeight: 400
      fontFamily: LatoLocal, Lato, sans-serif
radius:
  action: 8
components:
  button-primary:
    base:
      bg: brand
      text: on-brand
      radius: 8
---

Scope: public homepage sampled at 1440px and 390px on 2026-09-12. Font names are observed CSS declarations, not redistributed font assets. Body size outside an explicitly measured role is a 16px implementation baseline; focus, validation, timing, and alternate themes below are recommendations, not audited source states. No transactional flow was submitted.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

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.

## 4. Component Stylings

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.

## 5. Layout Principles

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.

## 6. Shapes & Radius Scale

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.

## 7. Depth & Elevation

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.

## 8. Interaction & Motion

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.

## 9. Accessibility & A11y

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.

## 10. Responsive Behavior

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.

## 11. Content & Voice

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.

## 12. Dark Mode & Theming

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.

## 13. Lineage & Influences

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.

## 14. 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.

## 15. Agent Prompt Guide

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.