Styleguide
Zwei Systeme, eine Sprache. Zuerst das der App — abgeschrieben aus ihrem eigenen Styleguide-Schirm. Dann, wo der Browser anders liegt. Zuletzt das dieser Seite.
Die App
Das Gestaltungssystem der App — Referenz für Entwicklung und Design.
01 · Farben
- Washi#F5F2EA
- Sumi#211E19
- Zinnober#B5442C
- Grün#5A7D5AAusschließlich für die „Weiterlaufen“-Wahl.
02 · Typografie
03 · Bedienelemente
04 · Flächen & Linien
Hell (Washi)
Aa 風
Tusche (Sumi)
Aa 風
05 · Zeichen
風 静 寂 時 鍵 心 型
Bedeutungen im Glossar: Einstellungen → Die Zeichen.
06 · Regeln
- Hairlines statt Karten, keine Schatten.
- Viel Leerraum; Seitenrand 26 pt, Radien 12–14.
- Restzeiten h:mm, minutengenau aufgerundet — einzige Ausnahme: der 15-Sekunden-Stopper.
- Grün ausschließlich für die „Weiterlaufen“-Wahl.
- Keine Statistiken, Streaks, Accounts — bewusst einfach.
Wo der Browser anders liegt als das Telefon
Diese Seite ersetzt den Styleguide-Schirm der App. Wo ein Wert im Browser nicht derselbe sein kann, steht er hier benannt statt still angepasst.
Die Schrift ist dieselbe nur auf Apple-Geräten
Die App setzt Hiragino Mincho ProN — auf iOS vorinstalliert. Diese Seite verlangt dieselbe Schrift zuerst; wo es sie nicht gibt, greift sie auf Yu Mincho, Noto Serif JP, Source Serif 4 und zuletzt Georgia zurück. Auf einem Windows-Rechner sehen die Proben oben deshalb anders aus als am Telefon.
Größen stehen in Pixeln, nicht in Punkten
Die App misst in pt und skaliert über Dynamic Type mit der Systemeinstellung. Diese Seite misst in px und skaliert mit der Schriftgröße des Browsers. Die Zahlen sind deshalb nicht direkt vergleichbar; die Verhältnisse sind es.
Der Dunkelmodus hat eigene Töne
Die App leitet ihr dunkles Schema aus denselben drei Grundtönen ab (Grund Sumi #211E19, Akzent Zinnober #B5442C). Diese Seite trägt für den Dunkelmodus eine eigene, in der Design-Vorlage eingefrorene Reihe — Grund #171511, Akzent #C9563C. Die vier Werte im Abschnitt Farben sind deshalb immer die der App und nicht die der Seite, in der Sie sie gerade lesen.
Die Bedienelemente sind Abbilder, keine Bedienelemente
Schalter, Knopf und Kapsel unten sind nachgebaut, um Form, Farbe und Maß zu zeigen. Sie sind keine iOS-Bausteine und tun nichts.
Diese Webseite
Diese Werte stehen so in der Stilvorlage der Seite. Sie stammen aus derselben eingefrorenen Design-Vorlage wie die der App — deckungsgleich sind sie deshalb nicht überall.
Farben
Sieben Werte, jeder zweimal: die Seite folgt der Hell-/Dunkel-Einstellung des Systems. Die App tut das auch, mit eigenen dunklen Tönen — deshalb stehen hier andere Zahlen als oben.
| Hell | Dunkel | |
|---|---|---|
Grund--ground | #f5f2ea | #171511 |
Fläche--card | #fbf9f3 | #1e1b16 |
Schrift--ink | #211e19 | #eae5da |
Schrift, gedämpft--ink-soft | #6e675c | #a39b8c |
Linie--line | #e0dacb | #33302a |
Akzent (Zinnober)--accent | #b5442c | #c9563c |
Akzent für kleinen Text--accent-ink | #933723 | #d8735c |
Schrift
--serifÜberschriften, der Name in der Kopfleiste, die Zeichen im Glossar.
"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Source Serif 4", Georgia, serif
--sansFließtext, Beschriftungen, Zahlen in Tabellen.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Größen
17 px · Zeilenabstand 1,7Grundmaß der Seite.2 – 2,9 rem (Startseite bis 4 rem)Eine je Seite, in Zinnober.1,35 remAbschnitte.1 rem · Schriftstärke 500Die Anker im Handbuch, die Einträge im Glossar.16 px, MinchoGrößer als der Fließtext gemessen, damit sie gleich groß aussieht.höchstens 62 ZeichenAb etwa 75 verliert das Auge die Zeile.Navigation
- Fünf Inhaltsseiten in der Kopfleiste, in Tusche und in der Mincho.
- Datenschutz, Impressum und dieser Styleguide stehen ausschließlich in der Fußleiste, gedämpft.
- Die aktuelle Seite trägt eine Unterstreichung in Zinnober — sie ist das einzige Signal, seit alle Punkte dieselbe Farbe haben.
- Unter 640 px klappt ein Menü auf; darüber steht die Leiste ausgeschrieben.
Icons
Nicht im Styleguide-Schirm der App — auf der Webseite ergänzt.
32 pxBrowser-Reiter
180 pxStartbildschirm (Apple)
192 pxKopfleiste dieser Seite
Ein Zeichen, ein Verhältnis, drei Größen. Alle aus derselben Quelle gerendert wie das App-Icon: Hiragino Mincho ProN W6 auf Zinnober, Zeichenhöhe 660/1024 der Kantenlänge, deckend ohne Transparenz. Unter 32 px wird kein eigenes Bild ausgeliefert — 風 hat neun Striche und ist dort in keiner Strichstärke mehr lesbar; was die Wiedererkennung dann trägt, ist der Grund und nicht das Zeichen.