Abrum 2.0 · Design-System

Styles und Komponenten

Alles, woraus die Screens gebaut sind. Jedes Muster hier ist dieselbe Komponente wie in der App (packages/ui). Ändert sich etwas hier, ändert es sich überall. Quelle: das Wireframe in documentation/.

Darstellung

Hintergrund

Schrift

Zwei Familien, wie auf abrum.ai. DM Sans für alles, JetBrains Mono für Labels, Codes und Zahlen. Acht Größen und vier Schnitte, mehr gibt es nicht.

DM Sans

--font-sans · Text, Überschriften, Knöpfe

JetBrains Mono

--font-mono · Labels, Codes, URLs

Schnitte

Ag.font-normal · 450 · Text

Ag.font-medium · 500 · Medium

Ag.font-semibold · 600 · Semibold

Ag.font-bold · 650 · Titel

Größen

Display · 27 / 650.type-display · Login, große Zahlen

Willkommen zurück

Titel · 21 / 650.type-title · Seitentitel

Einstellungen

Überschrift · 15 / 600.type-heading · Kartennamen

Abrum Launch

Zwischentitel · 13 / 600.type-subhead · Dialoge, Karten

Nachricht melden

Text · 12 / 450.type-body · Nachrichten, Zeilen

Ich kann den Entwurf heute fertig machen.

Klein · 11 / 450.type-small · zweite Zeilen, Knöpfe

Europa/Berlin

Hinweis · 10 / 450.type-fine · Zeiten, Kleingedrucktes

Der Code gilt nur einmal.

Label · Mono 9 / 500.type-label · auch Zähler

Konnektoren des Teams

Schriftfarben

Text.text-fg · --p-fg

Zweitrangig.text-fg-muted · --p-muted

Leise.text-fg-subtle · --p-subtle

Icons.text-fg-icon · --p-icon

Link, Aktiv.text-blue · --p-blue

Erfolg.text-ok · --p-ok

Warnung.text-warn · --p-warn

Gold.text-gold-text · --p-gold-text

Farben

Sunrise-Palette von abrum.ai. Navy und Blau tragen, Gold setzt Akzente. Die App-Farben passen sich dem gewählten Hintergrund an.

Sunrise

Navy--sr-navy

Blau--sr-blue

Himmel--sr-sky

Gold--sr-gold

Hell-Gold--sr-light

Nacht--sr-night

Papier--sr-paper

Tinte--sr-ink

Verläufe

Tiefe · Primärknopf--sr-depth

Pro--sr-pro

Ultra--sr-ultra

Hero · Login--sr-hero

App-Hintergründe

Papierdata-pg=papier

Himmeldata-pg=himmel

Blaue Stundedata-pg=stunde

Horizontdata-pg=horizont

Warmdata-pg=warm

Flächen

Glas · Karten--p-glass

Papier · aktiv--p-paper

Eigene Blase--p-bubble

Füllung--p-fill

Knöpfe und Links

Ein Knopf, wenige Arten. Primär gibt es pro Ansicht nur einmal.

Knöpfe

primary

default

paper

ghost

danger

danger-solid

muted

glass, auf dunkel

Größen

size="sm" · Zeilen, Karten

size="md" · Dialoge

size="lg" · volle Breite

Links und runde Knöpfe

Andere Methode wählenTextLink

Alle ErgebnisseLinkButton

IconButton

glass

plain

SendButton

ready

stop

Tabs, Segmente, Chips

Drei Formen für Auswahl. Tabs wechseln Inhalte, Segmente setzen einen Wert, Chips filtern.

Tabs

Alle Konnektoren des Teams.

Segmente

size="md" · Leiste oben

size="sm" · in Zeilen

zwei Werte

Filter-Chips

Auswahl-Chips, mehrfach

Badges und Zähler

Gastdefault

Ultragold

Aktivok

Neublue

Propro

4Counter

12Counter red

⌘KKbd

Felder und Schalter

Eingaben sind weiß auf Glas. Aktiv heißt blauer Rand. Schalter nur für An und Aus, sonst Segment.

Schalter und Haken

Switch an

Switch aus

Diesem Gerät 30 Tage vertrauenCheckbox

Ich habe den Code gesichertCheckbox leer

Felder

E-Mail

Field · Label im Feld

Ton

Input

SearchInput

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

InputOTP · 6-stellig

Textarea

Optionen

Wie im TeamSINA fragt vor jedem VersandEigene RegelnGilt nur für dichAusSINA schreibt keine Mails

Bausteine

Zeilen, Gruppen, Karten, Personen, Apps und Grenzen.

Gruppe mit Zeilen

Eigene Rechte

Abweichend vom Teamsonst gilt das Team

Mitglieder4 Konnektoren3 verbunden

Karte

Offene Anfragen

Lena Vogt · Angebot Relaunch9 Tage

Kanzlei Berg · Unterlagen Q38 Tage

Alle anzeigen

Personen, SINA, Apps

Avatar

AvatarStack

Orb

3AppIcon

Spinner

Grenzen

KI-Nutzung62 %

Neu ab 1. Dez.

Speicher91 %

Fast voll

Pro

Genutzt62 %

Neu ab 1. Dez.

Overlays

Dialoge, Menüs und Popover. Animiert mit motion.dev: Dialoge steigen leicht auf, Menüs wachsen aus ihrem Auslöser.

Zum Ausprobieren

Icons und Marke

Das Icon-Set aus dem Wireframe: dünn, rund, 24er Raster. Farbe folgt dem Text.

Marke

Logo

LogoMark

Logo auf dunkel

Icons · 58

back

chev

plus

mic

expand

collapse

check

trash

user

clock

link

card

sparkle

code

devices

shield

msg

info

logout

globe

key

send

calendar

file

folder

phone

arrow

mail

zap

store

down

swipe

grid

list

wmin

lock

download

copy

retry

pause

wmax

side

upload

gear

pages

database

apps

brain

notes

finance

chat

clip