ZasadyLink do sekcji Zasady
Desenie są dekoracją: nie niosą znaczenia, są ukryte przed technologiami asystującymi i nigdy się nie poruszają. Deseń ma 7 procent koloru produktu w motywie dziennym i 14 procent w motywie nocnym i wysokiego kontrastu, więc tekst główny zachowuje kontrast 4,5:1 (7:1 w wysokim kontraście) na deseniu na każdej powierzchni strony, a tło nigdy nie waży więcej niż 3 procent; mierzy to test/patterns.test.ts. W trybie wysokiego kontrastu systemu Windows i w druku desenie znikają.
Desenie markiLink do sekcji Desenie marki
Siatka strony .sk-pattern--grid
Spokojna siatka kwadratów 1,5 rem z małym blokiem na każdym skrzyżowaniu. Do długich stron i ekranów narzędzi.
Tekst główny na deseniu
Tekst drugorzędny w kolorze wyciszonym
<section class="sk-pattern sk-pattern--grid sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Kropkowany margines .sk-pattern--dots
Kolumna kropek wzdłuż krawędzi początkowej, szeroka na 3 rem, chyba że --sk-pattern-margin mówi inaczej. Do artykułów i paneli bocznych.
Tekst główny na deseniu
Tekst drugorzędny w kolorze wyciszonym
<section class="sk-pattern sk-pattern--dots sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Mozaika bloków .sk-pattern--mosaic
Powtórzone bloki znaku. Do przerw między sekcjami i tła kart z niewielką ilością tekstu.
Tekst główny na deseniu
Tekst drugorzędny w kolorze wyciszonym
<section class="sk-pattern sk-pattern--mosaic sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Notes w linie .sk-pattern--ruled
Linie co 2 rem, jak strona notesu. Do notatek, cytatów i formularzy.
Tekst główny na deseniu
Tekst drugorzędny w kolorze wyciszonym
<section class="sk-pattern sk-pattern--ruled sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Tekstura nagłówka .sk-pattern--hero
Rozrzucone bloki i kropki, które wygasają ku dołowi. Do górnej części strony.
Tekst główny na deseniu
Tekst drugorzędny w kolorze wyciszonym
<section class="sk-pattern sk-pattern--hero sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Brak danych .sk-pattern--empty
Mały obrazek otwartego notesu, szeroki na 10 rem, dla pustej listy albo strony bez danych. To obrazek o własnym rozmiarze, nigdy tło, i stoi nad słowami, które mówią, czego brakuje.
Tekst drugorzędny w kolorze wyciszonym
<div class="sk-pattern sk-pattern--empty sk-product--skribly" aria-hidden="true"></div>W kodzieLink do sekcji W kodzie
import { Pattern } from '@skribly/ui/brand'
<Pattern pattern="ruled" product="skribly" as="section" className="p-6">
<h2>…</h2>
</Pattern>
<Pattern pattern="empty" product="skribly" />---
import Pattern from '@skribly/ui/astro/Pattern.astro'
---
<Pattern pattern="hero" product="skribly" as="header">
<h1>…</h1>
</Pattern>@import '@skribly/ui/patterns.css';
.notes {
--sk-pattern-margin: 4rem;
}