Linguaggio di design

Canvas

Le icone sono disegnate su un canvas di 31×29 unità, con il disegno centrato in (15.5, 12.5). Quattro keyline, cioè forme guida che mantengono le icone alla stessa dimensione visiva, ne fissano i limiti esterni: un cerchio di 23 unità di diametro, un quadrato di 20.6 unità, un rettangolo orizzontale di 23×18.4 e un rettangolo verticale di 18.4×23. Le icone sono centrate, non allineate in basso.

Livelli

Un'icona ha un pezzo posteriore di tono medio con un'ombra portata e, di solito, un pezzo anteriore più chiaro con una morbida luce lungo il bordo superiore. Il contenuto bianco, come un simbolo o delle linee, può stare tra i due. Un'icona senza pezzo anteriore ha un contenuto bianco abbastanza grande da formare un secondo livello. Gli angoli superiori del pezzo anteriore sono arrotondati separatamente, il che lascia scoperto il pezzo posteriore agli angoli.

Contorni e angoli

I contorni sono larghi 1 unità e stanno fuori dal riempimento. Il raggio degli angoli è 2.2 per il corpo di un'icona (3.2 con il contorno) e 1.2 per il contenuto. Una fascia colorata all'interno di un contorno è larga almeno 2 unità, altrimenti viene omessa.

Colore

Ogni tonalità è progettata su un blu di riferimento e poi spostata sul colore principale, mantenendo la sua luminosità rispetto a quel colore. I segni sono bianchi sui pezzi di tono medio e scuri sui pezzi chiari.

Segni

I segni sono le linee e i simboli disegnati su un'icona. Le linee del contenuto usano un tratto di 1.6, i segni direzionali come le frecce 2.2 e i contorni 1. Le parti simili a puntatori fanno eccezione e usano 2.6 o 2.0. L'elemento più piccolo è di 2.4 unità. Le punte delle frecce sono triangoli pieni.

Animazione

L'animazione ha due keyframe, lo stato di riposo e lo stato hover, e dura 460ms. Un'icona mostra solo ciò che fa l'oggetto reale: una cartella si apre, una busta si apre, un calendario gira una pagina. L'animazione non sostituisce un'idea astratta.

Le regole complete sono in PROMPT.md, scritto in cinese semplificato.