Colores

En este apartado establecemos las clasificaciones de los colores permitidos en nuestra aplicación.

Colores de básicos

Son el blanco y el negro los colores por primarios de la aplicación.

Aura Token
Ejemplo

$Black
Raíz de la aplicación. #212121 (black)

$White
Fondo base de la aplicación. #ffffff (white)

Colores Aura

Los colores aura son establecidos como colores claros y son usados como fondos en su primera instancia. Cada color tiene un significado al igual que el aura. Estos colores son oscurecidos en un 20% si se usan como color de acción.

Aura Token
Ejemplo

$Blue
#e8f7fe (blue)

$TealGreen
#e8fef7 (teal-green)

$Snow
#fafafa (snow)

$Purple
#e8ebfe (purple)

$Orange
#fee8ef (orange)

$OrangeRose
#fee8ef (orange-rose)

$Pink
#fee8fc (pink)

$PinkPurple
#f3e8fe (pink-purple)

$LemonGreen
#f3fee8 (lemon-green)

$Green
#e8feea (green)

$Yellow
#fefbe8 (yellow)

Tipografía

En esta sección se definen la reglas elementos tipográficos y su jeraquía dentro de nuestra aplicación.

Ryo Gothic PlusN

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
  • Uso: General exceptuando frases.
  • Descripción: Designed by Masahiko Kozuka 小塚昌彦 and Ryoko Nishizuka 西塚涼子. From Adobe Originals.

Adobe Garamond

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
  • Uso: Fuente para uso decorativo en las frases.
  • Descripción: Designed by Robert Slimbach. From Adobe Originals.

Tamaños y características

Los tamaños tipográficos están definidos por escalas visuales (Visual scale) que va desde el 1 hasta el 6 al igual que los headlines adiconal a eso existe la visual scale base y small.

Visual scale 1

Size: 3.052em | Large: 100% | Medium: 85% | Small: 75% | -.022em

Visual scale 2

Size: 2.441em | Large: 100% | Medium: 85% | Small: 75% | -.022em

Visual scale 3

Size: 2.28em | Large: 100% | Medium: 85% | Small: 75% | -.022em

Visual scale 4

Size: 1.953em | Large: 100% | Medium: 85% | Small: 75% | -.022em
Visual scale 5
Size: 1.563em | Large: 100% | Medium: 80% | Small: 80% | -.022em
Visual scale 6
Size: 1.25em | Large: 100% | Medium: 90% | Small: 90% | -.022em

Visual scale base

Size: 1em | Large: 100% | Medium: 90% | Small: 90% | -.022em