Insulinopedia — Design System

Atmosfera

Ciepła, nie kliniczna

Miękkie różowo-zielone tinty na bieli. Zero zimnych błękitów i gęstych tabel.

Zaokrąglona i lekka

Duże promienie, delikatne ciepłe cienie, mnóstwo światła.

Prowadzona zdjęciem

Fotografia jedzenia to element pierwszej klasy — hero, kafle, scrim.

Semantyka światła

IG/ŁG zawsze w kolorach sygnalizacji — czyta się zanim padnie liczba.

Kolory

Primary · raspberry pink — --brand #d03459

Accent · vegetal green — --accent #1f873f

Neutral

Sygnalizacja IG / ŁG TWARDA REGUŁA

Nigdy nie zmieniaj tych progów ani barw — kodują dane zdrowotne. Identyczne na web i w aplikacji.

Typografia

Sans / Display

Poppins

Cały UI — nagłówki, treść, przyciski. Waga max 700 (przyjaźnie, nie ciężko).

Serif · editorial

Merriweather

Tylko light-italic — głos dietetyka i cytaty. Sygnał „człowiek", nie „dane".

Display · 56/700Insulinopedia

H1 · 40/700Twoja kolekcja

H2 · 28/600Banan dojrzały

H3 · 20/600Opinia Apetyt na Dietę

Body · 16/400Baza produktów z kolorowym kodowaniem IG.

Eyebrow · 12/500Dzień dobry

Editorial · 24Wraz z dojrzewaniem skrobia…

Przestrzeń, promień, głębia

Skala odstępów · 4px base

Promień · card 24 · pill 999

Elewacja · ciepłe, miękkie cienie

shadow-sm

shadow-md

shadow-lg

brand glow

Komponenty

Przyciski · jeden primary na ekran

Przycisk filtrów obok paska wyszukiwania (ekran 05)

Wariant 1: Domyślny (empty)

Brak aktywnych filtrów · biały przycisk + ciemna ikona

Wariant 2: Aktywny (filled)

Filtry aktywne · malinowy gradient + zielony licznik `3`

Chipy kategorii i szybkie filtry IG

WszystkoWarzywaOwoceNabiałKasze i ryżPieczywo

Wszystkie progi Niski IG (≤55) Średni IG (56–69) Wysoki IG (≥70)

Odznaki IG / ŁG

Karty produktów i warianty przycisku Ulubione (serduszko)

IG 47

Domyślny (outline)

Banan dojrzały

IG 38

Zaznaczony (wypełniony)

Jabłko świeże

Indeks glikemiczny

Węglowodany

23 g

Błonnik

2.6 g

Kalkulator ŁG

Oblicz ładunek dla swojej porcji

PREFERENCJE

JednostkiGramy (g)

Wyloguj się z konta

Dane osobowe · Pole edycji

Anna Kowalska

Boksy promocyjne · Od Apetyt na Dietę (ekran 04)

Rozkład makroskładników i opinia dietetyczna (ekran 07)

Rozkład makroskładników 89 kcal / 100g

Węgl. 94% Białko 4% Tłuszcz 2%

Ważne

Opinia Apetyt na Dietę

Wraz z dojrzewaniem skrobia w bananie ulega przekształceniu w łatwo przyswajalne cukry proste. Przez to jego indeks glikemiczny rośnie do średniego (IG 47).

Stany · ładowanie i pusty widok

Nie masz jeszcze ulubionych

Zapisuj produkty, które sprawdzasz najczęściej — będą tu czekać pod ręką.

Filtry i kalkulator

Panel filtrów · ekran 06

Kategoria

Sezon

Cały rokWiosnaLatoJesieńZima

Zakres IG

IG: 0 – 55 Niski

0255075100

Sortuj

Alfabetycznie (A–Z) IG rosnąco IG malejąco

Kalkulator ŁG · ekran 08 · na żywo

Masa porcji

150g

1 g500 g

14.4

Ładunek Glikemiczny porcji

dla 150 g produktu

Niski ≤10 Średni ≤19 Wysoki ≥20

ŁG = (IG × węgl. przysw. × porcja) ÷ 10 000

Nawigacja · Liquid Glass

Pływająca kapsuła Liquid Glass, która morfuje: w spoczynku szeroki pasek z ikoną i etykietą, a podczas przewijania kurczy się do kompaktowej pigułki z samymi ikonami. Płynne przejście (cubic-bezier(.32,.72,0,1)), mrożone szkło rozmywa treść pod spodem. Aktywna zakładka — różowy lozenge. Kliknij, aby przełączyć stan (i kliknij zakładki):

Ikony · Hugeicons

Jeden zestaw: Hugeicons — wariant stroke-rounded, 24px, obrys ~1.5px, zaokrąglone końce. Serwowane przez Iconify (<iconify-icon icon="hugeicons:…">). SVG — nigdy emoji. Podpisy poniżej to nazwy z Hugeicons.

Zasady

Rób

Poppins w UI, Merriweather light-italic tylko dla głosu dietetyka.
Progi IG/ŁG dokładnie jak w specyfikacji — to sygnał zdrowotny.
Miękkie ciepłe cienie, duże promienie, dużo światła.
Cyfry tabularne. Eyebrow w różu marki.
Jeden primary CTA na ekran. Ikony Hugeicons (stroke-rounded), min. 44 pt dotyk.

Nie rób

Bez klinicznego chłodu — żadnych zimnych błękitów i gęstych tabel.
Nie przebarwiaj i nie zmieniaj progów IG/ŁG.
Waga nagłówków nigdy powyżej 700.
Bez czarnych, twardych cieni; bez emoji jako ikon.
Bez kilku konkurujących różowych przycisków na ekranie.

Overlaye i stany

Elementy przejściowe i stany danych — te same tokeny, ta sama ciepła estetyka. Pełne przykłady w kontekście telefonu: other.html.

Toast · potwierdzenie

Dodano do ulubionych Cofnij

Nieblokujący, 2–3 s. Warianty: sukces (zielony), info (róż), błąd (czerwony).

Modal · bramka / decyzja

Zapisz swoje ulubione

Zaloguj się, aby zapisywać produkty.

Może później

Alert systemowy · destrukcja / zgoda

Wylogować się?

Ulubione pozostaną na koncie.

Anuluj

Wyloguj

Natywny wygląd iOS. Akcja destrukcyjna na czerwono.

Dolny sheet · sort / picker

Sortuj według

Alfabetycznie (A–Z)

IG rosnąco

IG malejąco

Splash Screen · Animowany loader

Insulinopedia

Ładowanie…

Pętla SVG: obrys -> miąższ -> pestki -> unoszenie.

Ładowanie · skeleton

Shimmer 1.5 s. Respektuje prefers-reduced-motion.

Pusty widok · empty state

Nie masz jeszcze ulubionych

Zapisuj produkty pod ręką.

Ikona + tytuł + zachęta + jeden CTA. Warianty: brak wyników, 0 po filtrach.

Offline / błąd

Brak połączenia — dane zapisane

Baner u góry + pełny stan błędu z „Spróbuj ponownie". Aplikacja działa offline na ulubionych.