Design System Basis

Colors

Vores farvevalg er udvalgt med fokus på at balancere æstetik og funktionalitet. Farverne er designet til at formidle systemets tilstande og guide brugeren på en intuitiv måde. De tre tilstandsfarver – blå, orange og grå – repræsenterer brugerens aktivitet og systemets status:

Blå (Asleep): Blå er valgt som tilstandsfarve for søvn, da den symboliserer ro, stabilitet og afslapning. Dette gør den ideel til at repræsentere nattens tilstand/temperaturindstilling. Derudover bruges blå til menuen i systemet, fordi den skaber en følelse af overblik og struktur. Denne farve giver en neutral og pålidelig effekt, der understøtter navigationen og hjælper brugeren med at holde fokus.

Orange (At Home): Orange fungerer som vores accentfarve og repræsenterer tilstanden “hjemme”. Den bruges til at signalere aktivitet og varme, hvilket gør den ideel til at fremhæve handlinger og aktive elementer på siden. Orange skaber en intuitiv forbindelse til hjemmets komfort og energi, og som accentfarve bruges den til at vise, når noget er aktivt, hvilket forstærker dens funktionelle rolle i systemet.

Grå (Away): Grå repræsenterer tilstanden “væk” og bruges til at kommunikere passivitet eller en deaktiveret status. Den forbindes ofte med neutralitet og inaktivitet, hvilket gør den velegnet til at symbolisere fravær. Grå bidrager til at skabe visuel kontrast og styrker de aktive elementers fremtræden, samtidig med at den sikrer en klar formidling af systemets tilstand.

Denne farveopdeling sikrer en harmonisk brugeroplevelse, hvor hver farve tydeligt kommunikerer sin funktion. Kombinationen af blå, orange og grå skaber ikke kun visuel balance, men hjælper også brugeren med hurtigt at afkode systemets status og funktioner. Farvernes rolle i systemet understøtter både navigation og overblik, samtidig med at de styrker brugerens forståelse af vores schedules tre tilstande.

Primitives

App Colors

Neutrals

Functional

Semantics

Container

Border