Five radius steps, lines that carry meaning, and depth without shadows – from a veil, an outline and a tilt. Plus sticky notes, playful shapes and the anatomy of a card.
Hey Albert’s shapes are soft and flat. Everything is paper on paper. Nothing shines, nothing casts a shadow.
Five radii, each with a job. Without a token there is no radius.
--radius-karte16pxKarten und Menüs--radius-klein12pxTagesreiter, kleine Karten--radius-leiste24pxiPhone-Leiste--radius-block22pxMac-Block--radius-pille999pxPillen, Kreise, Knöpfe
No free radius. Without a token there is no radius.
--radius-karte for cards, menus, dialogs.
--radius-klein for day tabs and small cards.
--radius-leiste for the iPhone tab bar, --radius-block for the black block of the Mac sidebar.
--radius-pille for pills, circles and every button. Our buttons are always round.
The card is what Today, Week and the calendar are made of. It always has the same structure.
Surface by kind: appointment --flaeche-karte, drive --flaeche-karte-fahrt, family --flaeche-karte-familie, suggestion --flaeche-karte-vorschlag with a dashed grey outline, open with a dashed open-pink outline.
Radius--radius-karte, padding--karte-innen, gap to the next card --karte-abstand.
Outline: a hairline as a placeholder for the stronger outline. No shadow.
Header: on the left the symbol of the thing in a light circle, on the right the dots of the people. Nothing in between: no menu, no chevron.
Title in --grad-karten-titel, below it time and place in --grad-zweit.
Pills for states, for example “Kein Fahrer” (no driver).
Buttons at the bottom, in a Knopfreihe. A suggestion always has two: “Übernehmen” (accept) and “Rückgängig” (undo), or a question with two answers.
Three carriers in three places: the card colour tells the kind. The symbol tells the thing. The dots tell the people.
Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
knoepfe={<Knopf>Ich fahre</Knopf>} />
<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
unterzeile="Vorschlag von Albert"
knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
Register Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst "ohne Zuständigen". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still.
Types (.d.ts)
/**
* Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
*/
export interface KarteProps {
/** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
/** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
titel: string;
/** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
ort?: React.ReactNode;
/** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
zeit?: string;
/** Wer dabei ist; der Zustaendige zuerst. */
leute?: string[];
/** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
symbol?: string;
/** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
hoehe?: "kurz" | "hoch";
/** Zustands- und Fahrt-Pillen. */
pillen?: React.ReactNode;
/** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
knoepfe?: React.ReactNode;
/** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
unterzeile?: React.ReactNode;
/** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
kompakt?: boolean;
klickbar?: boolean;
/** Leicht gekippt, wie ein liegender Klebezettel. */
gekippt?: boolean;
children?: React.ReactNode;
style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;
