Entdecken Sie die tatsächlichen Farbfunktionen von Ripple, die 14-stufige Abstandsfolge und responsive Typografiereferenzen anhand eines vollständigen Workshop-Ablaufs mit schrittweiser Offenlegung, Fortschrittsanzeige und Tastaturfokus auf den nächsten Schritt.
Vollständige, eigenständige Umsetzung von HTML/CSS/JavaScript mit dokumentierten Ripple-Werten; Arial-Fallback, keine native Ripple-Laufzeit. · Implementierungsreferenz
02
Ripple – Designreferenz zum Designsystem
Für diese Studie geprüfte, veröffentlichte Ripple-Designdokumentation: standardmäßige Farbrollen, Abstände, Schriftgrößen-/Zeilenhöhenpaare und Fokusfarben. Dies sind Designreferenzen und keine Behauptung, dass eine native Ripple-Version mitgeliefert wird.
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
rpl-type-h1
32/36px small · 56/60px large · 700
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
rpl-type-h2
24/32px small · 32/40px large · 700
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
rpl-type-h3
20/28px small · 24/32px large · 700
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
rpl-type-p
16/24px
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
rpl-type-p-small
14/20px
Größen-/Zeilenhöhenpaare aus den veröffentlichten Schriftrollen. Das eigenständige Beispiel verwendet den dokumentierten Arial-Fallback, nicht die VIC-Schrift.
Ripple – Grundlagen und Laufzeitumfang des Designsystems
Eine Designreferenz klar von einer Komponentenlaufzeit abgrenzen
Die Referenz beschreibt das veröffentlichte Ripple-Designsystem. Die umgesetzte Workshop-Zeitachse ist eine vollständige, eigenständige Interpretation ausgewählter Werte in HTML, CSS und JavaScript. Sie führt keine Ripple-Vue-Komponenten aus, verwendet keinen undokumentierten Paketspiegel und gibt nicht vor, ein Dienst der Regierung des australischen Bundesstaats Victoria zu sein. Diese Abgrenzung ist in der Vorschau sichtbar und bleibt auch im herunterladbaren Quelltext erhalten.
Die native Integration bewusst auswählen
Ripple stellt über sein Kernpaket einen Vue-orientierten Paketpfad und einen Pfad bereit, der nur Styles enthält. Für die offizielle Installation ist der Zugriff auf GitHub Packages erforderlich. Auch beim Styles-only-Ansatz bleiben Markup und Verhalten Aufgabe der Anwendung. Verwende bei der Integration dieser Distribution die verlinkte offizielle Anleitung zum Zugriff und lege eine gewünschte Version fest. Die eigenständige Studie weiter unten benötigt weder Authentifizierung noch eine Paketinstallation.
Ripple – Farbrollen und Tastaturfokus im Designsystem
Marken- und Inhaltsfarben klar voneinander unterscheiden
Der Zeitachsenkopf verwendet den dunkleren Primärwert, seine Kante den Akzent und der Lesetext die neutrale Textrolle. Im bereitgestellten Quelltext sind dies separate CSS-Variablen. Das eigenständige Statusfeld verwendet die helle Akzentfläche. Die Referenz enthält sowohl die Rollennamen als auch die Werte. So kann ein künftiger Theme-Wechsel die beabsichtigte Beziehung aktualisieren, statt eine Reihe voneinander unabhängiger Hexadezimalwerte zu ändern.
Tastaturfokus deutlich sichtbar machen
Der Fokus ist orange mit dunklem Inhalt und nicht einfach ein weiterer Blauton. Die Fokusregel für die eigenständige Schaltfläche und Zusammenfassung ändert deren Fläche und zeichnet einen dunklen Umriss. Der Fokus des Kontrollkästchens bleibt ein Umriss. Dies ist eine Umsetzung des veröffentlichten Ansatzes für Fokusfarben und keine Behauptung, dass das Beispiel die nativen Fokus-Utilities von Ripple importiert oder Barrierefreiheit für jedes mögliche Theme gewährleistet.
Ripple – Abstände und responsive Typografie im Designsystem
Die tatsächliche Abstandsfolge verwenden
Der Quelltext verwendet benannte Abstände von 8, 16, 24, 32 und 48 px für den Lesefluss. Die vollständige Referenz dokumentiert auch größere Abstände. Die Folge entspricht nicht mehr dem mit vier multiplizierten Index: rpl-sp-9 beträgt daher 40 px statt 36 px. Der Abstand im erstellten Raster und der Abschnittsinnenabstand verwenden bewusst Werte derselben Skala, erfüllen jedoch unterschiedliche Layoutfunktionen.
Die Schriftartengrenze klar angeben
Ripple dokumentiert VIC mit Arial und Helvetica als Fallbacks. Diese Studie enthält keine VIC-Schriftdatei und verwendet ausdrücklich Arial. Die Überschrift wechselt am Beispiel-Breakpoint von 992 px von 32/36 px auf 56/60 px, während der Fließtext bei 16/24 px bleibt. Diese Schriftgrößen und Zeilenhöhen sind dokumentierte Referenzwerte; die Zeitachsenkomposition ist eigenständig und sollte nicht als pixelgenaue native Komponente bezeichnet werden.
Ripple – Zeitachseninhalte und schrittweise Offenlegung im Designsystem
Jeder Phase eine eigene Aufgabe geben
Die erste Phase legt die Entscheidung fest, die zweite bereitet die Teilnahme vor und die dritte hält eine Maßnahme fest. Relative Zeitangaben vermitteln die Reihenfolge, ohne eine behördliche Frist oder ein Serviceversprechen zu erfinden. Jede Phase hat eine kurze, dauerhaft sichtbare Zusammenfassung und zusätzliche Vorbereitungshinweise in einem nativen details-Element. Die Abfolge bleibt eine geordnete Liste, auch wenn die visuellen Markierungen individuell gestaltet sind.
Relative Zeitangaben beschreiben den Ablauf des Workshops.
Sichtbare Zusammenfassungen vermitteln den Zweck jeder Phase.
Die Bereitschaft wird ausdrücklich per Kontrollkästchen bestätigt.
Lesen ist nicht dasselbe wie Bereitschaft
Fortschritt im Ripple-Designsystem, Fokus auf den nächsten Schritt und Zurücksetzen
Den nächsten Schritt aus dem aktuellen Status ableiten
Mit „Zum nächsten offenen Schritt“ wird die erste Phase ohne Häkchen gefunden, deren Hinweise werden aufgeklappt und ihr Kontrollkästchen erhält den Fokus. Eine Phase wird nicht übersprungen, nur weil sie zuvor geöffnet wurde. Sobald alle drei Kästchen ausgewählt sind, wird die Schaltfläche für den nächsten Schritt deaktiviert und der Status zeigt an, dass alle Vorbereitungsschritte bereit sind. Wird ein Kästchen wieder abgewählt, steht die Aktion erneut zur Verfügung.
Alle zusammengehörigen Status zurücksetzen
Beim Zurücksetzen werden die drei Kontrollkästchen abgewählt, die Hinweise geschlossen, das Fortschrittselement aktualisiert und der Fokus auf das erste Kontrollkästchen gesetzt. Ein Hinweis auf den Abschluss bleibt dabei nicht stehen, und es wird nicht vorgetäuscht, dass ein entfernter Eintrag gelöscht wurde. Der Status wird für diese lokale Studie bewusst nur im Arbeitsspeicher gehalten. Ein sichtbarer Hinweis erklärt, dass er weder gespeichert noch übermittelt wird.
Vollständiger Quellcode und Überprüfung des Ripple-Designsystems
Die eigenständige Studie ausführen
Speichern Sie das vollständige bereitgestellte Dokument als index.html und stellen Sie dessen Verzeichnis bereit. Das Dokument enthält eigene Design-Tokens, Markup, gut lesbare Beispielinhalte und Interaktionscode. Es benötigt daher weder externe Laufzeitbibliotheken noch Schriftarten. Prüfen Sie anhand der Referenzlinks die nativen Ripple-APIs, Versionsentscheidungen und autorisierten Markenressourcen, bevor Sie einen echten Service entwickeln.
Das vollständige HTML-Beispiel als index.html speichern.
Das Verzeichnis lokal bereitstellen.
Mit der Tastatur den Fokus beim nächsten Schritt, den Abschluss und das Zurücksetzen testen.
Für eine separate native Ripple-Integration den offiziellen Paketzugriff und festgelegte Versionen verwenden.
Den gesamten Statuswechsel überprüfen
Markieren Sie den ersten Eintrag als bereit, verwenden Sie die Aktion für den nächsten Schritt und prüfen Sie, ob der Fokus zum zweiten Kontrollkästchen wechselt und die zugehörigen Hinweise aufgeklappt sind. Schließen Sie alle Einträge ab und bestätigen Sie, dass die Aktion für den nächsten Schritt deaktiviert wird. Wählen Sie dann einen Eintrag ab und prüfen Sie, ob die Aktion wieder verfügbar ist. Setzen Sie alles zurück und überprüfen Sie Fortschritt und aufklappbare Bereiche. Bei Smartphone-Breite wird das Statusfeld unterhalb der Zeitleiste angezeigt; alle Steuerelemente bleiben verfügbar.
Beispiele für Komponenten des Ripple-Designsystems
index.html — vollständige Workshop-Zeitleiste
Alle Tokenwerte, responsiven Formatierungen, Inhalte sowie das Fortschritts- und Fokusverhalten in einem ausführbaren Dokument.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
Dies ist eigens erstellter Anwendungscode, nicht der Quellcode einer Ripple-Vue-Komponente.
Es sind weder eine externe Laufzeitbibliothek noch eine Schriftartanfrage, ein Konto oder eine Datenübermittlung erforderlich.
04
Einrichtung des KI-Agenten für das Ripple-Designsystem
Ausgangspunkt für die Implementierung
Mit diesem Befehl wird die eigenständige Umsetzung bereitgestellt. Folgen Sie für natives Ripple der verlinkten offiziellen Anleitung zum Zugriff auf GitHub Packages und zur Einrichtung mit Vue oder nur mit Styles.
sh
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie anhand des bereitgestellten Dokuments die vollständige, eigens entwickelte Workshop-Zeitleiste. Übernehmen Sie die dokumentierten Rollenwerte und Abstände von Ripple, den expliziten Fallback auf Arial, die getrennten Status für Lesen und Bereitschaft, den Fokus auf den nächsten offenen Schritt, den Abschluss und das vollständige Zurücksetzen. Kennzeichnen Sie das Ergebnis als Umsetzung auf Basis von HTML/CSS und nicht als native Ripple-Vue-Implementierung.
05
Quellen und Geltungsbereich des Ripple-Designsystems
Eine Umsetzung auf Basis von HTML/CSS für OpenDesign, die veröffentlichte Designwerte von Ripple und den dokumentierten Fallback auf Arial verwendet. Diese Vorschau führt keine Vue-Komponenten von Ripple aus und enthält keine VIC-Schriftdateien.
