First implementation

Qml/Controls/Button.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.Button {
+    id: control
+
+    leftPadding: 12
+    rightPadding: 12
+    topPadding: 8
+    bottomPadding: 8
+
+    property color backgroundColor: Palette.blueButtonColor
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: Palette.alternativeTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        color: control.pressed ? Qt.darker(control.backgroundColor, 1.4) :
+                                 control.backgroundColor
+        radius: 8
+    }
+}

Qml/Controls/ColoredLabel.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.Label {
+    id: control
+
+    font.family: "Roboto"
+    font.pixelSize: 14
+    font.weight: Font.Normal
+    color: Palette.labelTextColor
+
+    leftPadding: 12
+    rightPadding: 12
+    topPadding: 8
+    bottomPadding: 8
+
+    property color backgroundColor: Palette.backgroundColor
+    property int backgroundRadius: 15
+
+    background: Rectangle {
+        color: control.backgroundColor
+        radius: control.backgroundRadius
+    }
+}

Qml/Controls/Label.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.Label {
+    font.family: "Roboto"
+    font.pixelSize: 14
+    font.weight: Font.Normal
+    color: Palette.labelTextColor
+}

Qml/Controls/TextField.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12 as Controls
+
+import Palette 1.0
+
+Controls.TextField {
+    id: control
+
+    readOnly: true
+    selectByMouse: true
+    implicitHeight: 34
+
+    horizontalAlignment: Text.AlignRight
+    verticalAlignment: Text.AlignVCenter
+
+    topPadding: 6
+    bottomPadding: 6
+    leftPadding: 12
+    rightPadding: 12 + Math.ceil(indicatorLabel.width) + (indicatorLabel.visible ? 12 : 0)
+
+    font.family: "Roboto"
+    font.pixelSize: 22
+    font.weight: Font.Bold
+
+    color: Palette.labelTextColor
+
+    property string indicatorText
+
+    background: Rectangle {
+        radius: 8
+        color: Palette.controlBackgroundColor
+        border.width: 1
+        border.color: Palette.borderColor
+
+        width: control.width
+        height: control.height
+
+        Controls.Label {
+            id: indicatorLabel
+            visible: control.indicatorText.length > 0
+            text: control.indicatorText
+
+            anchors.right: parent.right
+            anchors.rightMargin: 12
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 6
+
+            font.family: "Roboto"
+            font.pixelSize: 17
+            font.weight: Font.Normal
+
+            color: Palette.descriptionTextColor
+        }
+    }
+}

Qml/Controls/qmldir

@@ -0,0 +1,5 @@
+module Controls
+Button 1.0 Button.qml
+ColoredLabel 1.0 ColoredLabel.qml
+Label 1.0 Label.qml
+TextField 1.0 TextField.qml