Design Grundlagen

Abstände und Zeilen

Als Grundlage dient Material Design von Google. Abstände, Typographie-Arten und Icons werden 1:1 aus Material verwendet, insbesondere für Android und Web zu Beginn. iOS wird im späteren Verlauf evaluiert.

Farben

Material Design fordert eine Primary Color, aus der sich eine helle und eine dunkle Abstufung ergeben. Die Primarycolor ist #2e7d32, die helle Abstufung ist #60ad5e und die dunkle Abstufung ist #005005. Die Abstufungen werden vom Material Color Tool selbst generiert. Auf eine Secondary Color wird vorerst verzichtet, da sie optional ist und bisher nicht notwendig ist.

Farbschema

Schriftart

Von der Standardschriftart Roboto wird abgewichen. Stattdessen wird Rubik verwendet, vor allem da die H6 schlanker aussieht.

Schriftarten groß

Schriftarten klein

Durch den Material Type Scale Generator ergeben sich folgende Werte für Flutter:

TextTheme(
  headline1: GoogleFonts.rubik(
    fontSize: 98,
    fontWeight: FontWeight.w300,
    letterSpacing: -1.5
  ),
  headline2: GoogleFonts.rubik(
    fontSize: 61,
    fontWeight: FontWeight.w300,
    letterSpacing: -0.5
  ),
  headline3: GoogleFonts.rubik(
    fontSize: 49,
    fontWeight: FontWeight.w400
  ),
  headline4: GoogleFonts.rubik(
    fontSize: 35,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.25
  ),
  headline5: GoogleFonts.rubik(
    fontSize: 24,
    fontWeight: FontWeight.w400
  ),
  headline6: GoogleFonts.rubik(
    fontSize: 20,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.15
  ),
  subtitle1: GoogleFonts.rubik(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.15
  ),
  subtitle2: GoogleFonts.rubik(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    letterSpacing: 0.1
  ),
  bodyText1: GoogleFonts.rubik(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.5
  ),
  bodyText2: GoogleFonts.rubik(
    fontSize: 14,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.25
  ),
  button: GoogleFonts.rubik(
    fontSize: 14,
    fontWeight: FontWeight.w500,
    letterSpacing: 1.25
  ),
  caption: GoogleFonts.rubik(
    fontSize: 12,
    fontWeight: FontWeight.w400,
    letterSpacing: 0.4
  ),
  overline: GoogleFonts.rubik(
    fontSize: 10,
    fontWeight: FontWeight.w400,
    letterSpacing: 1.5
  ),
)