Light Mode UI Design System Board

{ "type": "Demonstrationsprojekt für ein UI-Designsystem", "theme": "{argument name=\"visuelles Thema\" default=\"Optische Wissenschaft und Lichtbrechung\"}", "overall_aesthetic": "Ein sauberer weißer Hintergrund, heller Farbmodus, futuristisches und anspruchsvolles Erscheinungsbild; sein besonderes Merkmal liegt in der {argument name=\"primäre Farbverlaufsfarbe\" default=\"Schillerndes, sanftes Orange, Gelb, Cyan, Lila, Rosa\"} Verzierung", "header": { "title": "{argument name=\"Systemname\" default=\"LIGHTCORE PRISM\"}", "subtitle": "UI-Designsystem - Hellmodus", "tags": [ "Futuristisch", "Anspruch auf Raffinesse", "Fokus" ], "hero_graphic": "3D-transparenter Glasring, der irisierendes Licht bricht" }, "layout": { "sections": [ { "title": "Farbe", "count": 5, "labels": [ "Weiß #FFFFFF", "Schneeweiß #FAFAFC", "Schiefergrau #F2F4F8", "Rahmenfarbe #E6E8EF", "Schwarz #0A0A0C" ], "description": "5 abgerundete quadratische Farbblöcke" }, { "title": "Prismenverlauf", "count": 1, "description": "Ein langer horizontaler Farbverlaufsbalken mit fünf Hexadezimal-Farbcodes darunter." }, { "title": "Schriftsatz", "description": "Die große Schriftart 'Aa' ist in vier Strichstärken (Light, Regular, Medium, Semibold) zusammen mit dem kompletten Alphabet und den Zahlen aufgeführt." }, { "title": "Symbol", "count": 12, "description": "12 minimalistische Liniensymbole, angeordnet in einem 2x6-Raster." }, { "title": "Button", "count": 8, "categories": [ "main", "secondary", "text", "icon" ], "description": "Es gibt insgesamt 8 Buttons, die den normalen und den deaktivierten Zustand für jede Kategorie anzeigen. Der Hauptbutton hat einen irisierenden Rahmen und den Text "Start using"." }, { "title": "navigation", "count": 2, "variants": [ "Desktop", "mobile" ], "description": "Die Desktop-Navigation umfasst ein Logo, vier Textlinks, eine Suchleiste, einen Anmeldebutton und eine mobile Navigationsleiste." }, { "title": "Komponenten", "count": 6, "items": [ "Karte: 'Photon Engine' mit abstrakter Regenbogengrafik und Schaltflächen", "Eingabefelder: eine beschriftete Suchleiste und ein E-Mail-Eingabefeld.", "Fortschrittsanzeige: 68% Regenbogen-Fortschrittsanzeige", "Registerkarten: Übersicht, Analyse, Einstellungen", "Schalter: 2 Schalter (Ein/Aus)", "Datenvisualisierung: ein Tortendiagramm mit 3 Legendenelementen und ein 7-Tage-Liniendiagramm." ] }, { "title": "Webseite", "description": "Desktop-Browser-Modell, einschließlich Titel '{argument name=\"hero headline\" default=\"Building the future with light and color\"} Das Design umfasst zwei Schaltflächen, eine fließende 3D-Regenbogenwellengrafik und fünf Partnerlogos am unteren Rand." }, { "title": "Mobile Anwendung", "description": "Das Smartphone-Modell zeigt einen Kontostand von 24.880 $, ein Liniendiagramm, vier Schnellaktionssymbole, eine Liste der letzten Aktivitäten mit drei Einträgen und eine untere Navigationsleiste mit vier Symbolen." } ] } }