diff --git a/apps/dane/app.js b/apps/dane/app.js
index 103bb21a5..7c64e16c3 100644
--- a/apps/dane/app.js
+++ b/apps/dane/app.js
@@ -1,3 +1,7 @@
+var d = require("https://raw.githubusercontent.com/OmegaVoid/EspruinoDocs/master/modules/dane_arwes.js");
+var Arwes = d.default();
+
+
 const font = "6x8";
 const timeFontSize = 4;
 const unixTimeFontSize = 2;
@@ -7,112 +11,14 @@ const yOffset = 23;
 const width = g.getWidth();
 const height = g.getHeight();
 const xyCenter = width / 2 + 4;
-const cornerSize = 14;
-const cornerOffset = 3;
-const borderWidth = 1;
 const yposTime = 27 + yOffset;
 const yposDate = 65 + yOffset + 12;
 const yposCounter = 58 + yOffset + 35 + 40;
 
-const mainColor = "#26dafd";
-const mainColorDark = "#029dbb";
-// const mainColorLight = "#8bebfe";
-
-const secondaryColor = "#df9527";
-const secondaryColorDark = "#8b5c15";
-// const secondaryColorLight = "#ecc180";
-
-const success = "#00ff00";
-// const successDark        = "#000900";
-// const successLight        = "#060f06";
-
-const alert = "#ff0000";
-// const alertDark          = "#090000";
-// const alertLight          = "#0f0606";
-
 let count = 100;
-let oldCount = count;
 
 
 
-function drawTopLeftCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x - cornerOffset;
-  const y1 = y - cornerOffset;
-  g.fillRect(x1, y1, x1 + cornerSize, y1 + cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x + cornerSize - cornerOffset, y + cornerSize - cornerOffset);
-}
-
-function drawTopRightCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x + cornerOffset;
-  const y1 = y - cornerOffset;
-  g.fillRect(x1, y1, x1 - cornerSize, y1 + cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x - cornerSize - cornerOffset, y + cornerSize - cornerOffset);
-}
-
-function drawBottomLeftCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x - cornerOffset;
-  const y1 = y + cornerOffset;
-  g.fillRect(x1, y1, x1 + cornerSize, y1 - cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x + cornerSize - cornerOffset, y - cornerSize + cornerOffset);
-}
-
-function drawBottomRightCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x + cornerOffset;
-  const y1 = y + cornerOffset;
-  g.fillRect(x1, y1, x1 - cornerSize, y1 - cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x - cornerSize + cornerOffset, y - cornerSize + cornerOffset);
-}
-
-function drawFrame(x1, y1, x2, y2) {
-  drawTopLeftCorner(x1, y1);
-  drawTopRightCorner(x2, y1);
-  drawBottomLeftCorner(x1, y2);
-  drawBottomRightCorner(x2, y2);
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-
-function drawTopFrame(x1, y1, x2, y2) {
-
-  drawBottomLeftCorner(x1, y2);
-  drawBottomRightCorner(x2, y2);
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-
-function drawFrameNoCorners(x1, y1, x2, y2) {
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-
-// function drawBottomFrame(x1,y1,x2,y2) {
-//   drawTopLeftCorner(x1,y1);
-//   drawTopRightCorner(x2,y1);
-//   g.setColor(mainColorDark);
-//   g.drawRect(x1,y1,x2,y2);
-//   g.setColor("#000000");
-//   g.fillRect(x1+borderWidth,y1+borderWidth,x2-borderWidth,y2-borderWidth);
-// }
-
-// function getUTCTime(d) {
-//   return d.toUTCString().split(' ')[4].split(':').map(function(d){return Number(d);});
-// }
-
-
 function drawTimeText(d) {
   const da = d.toString().split(" ");
   // var dutc = getUTCTime(d);
@@ -121,19 +27,19 @@ function drawTimeText(d) {
   const hours = time[0],
       minutes = time[1],
       seconds = time[2];
-  g.setColor(mainColor);
+  g.setColor(Arwes.C.color.primary.base);
   g.setFont(font, timeFontSize);
   g.drawString(`${hours}:${minutes}:${seconds}`, xyCenter, yposTime, true);
   const unix = Math.round(d.getTime());
 
   g.setFont(font, unixTimeFontSize);
-  g.setColor(secondaryColor);
+  g.setColor(Arwes.C.color.secondary.base);
   g.drawString(`${unix}`, xyCenter, yposTime + 22, true);
   g.setFont(font, smallFontSize);
 }
 
 function drawDateText(d) {
-  g.setColor(mainColor);
+  g.setColor(Arwes.C.color.primary.base);
   g.setFont(font, dateFontSize);
   g.drawString(`${d.getDate()}.${d.getMonth() + 1}.${d.getFullYear()}`, xyCenter, yposDate, true);
 }
@@ -144,7 +50,7 @@ function drawCounterText() {
   g.setColor("#000000");
   g.fillRect(37, 58 + yOffset + 36, 203, 58 + 80 + yOffset + 34);
   g.setFontAlign(0, 0);
-  g.setColor(alert);
+  g.setColor(Arwes.C.color.alert.base);
   g.setFont(font, 8);
   g.drawString(`${count}`, xyCenter, yposCounter, true);
 
@@ -153,10 +59,10 @@ function drawCounterText() {
 
 function levelColor(l) {
   // no icon -> brightest green to indicate charging, even when showing percentage
-  if (Bangle.isCharging()) return success;
-  if (l >= 50) return success;
-  if (l >= 15) return secondaryColorDark;
-  return alert;
+  if (Bangle.isCharging()) return Arwes.C.color.success.base;
+  if (l >= 50) return Arwes.C.color.success.base;
+  if (l >= 15) return Arwes.C.color.secondary.dark;
+  return Arwes.C.color.alert.base;
 }
 
 function drawBattery() {
@@ -169,17 +75,17 @@ function drawBattery() {
 
 function drawClock() {
   // main frame
-  drawFrame(3, 10 + yOffset, width - 3, height - 3);
+  Arwes.drawFrame(3, 10 + yOffset, width - 3, height - 3);
   // time frame
-  drawTopFrame(20, 10 + yOffset, 220, 58 + yOffset);
+  Arwes.drawFrameBottomCorners(20, 10 + yOffset, 220, 58 + yOffset);
   // date frame
-  drawTopFrame(28, 58 + yOffset, 212, 58 + yOffset + 35);
+  Arwes.drawFrameBottomCorners(28, 58 + yOffset, 212, 58 + yOffset + 35);
 
   // counter frame
-  drawTopFrame(36, 58 + yOffset + 35, 204, 58 + 80 + yOffset + 35);
+  Arwes.drawFrameBottomCorners(36, 58 + yOffset + 35, 204, 58 + 80 + yOffset + 35);
 
   // battery frame
-  drawFrameNoCorners(44, 58 + 80 + yOffset + 35, 196, height - 3);
+  Arwes.drawFrameNoCorners(44, 58 + 80 + yOffset + 35, 196, height - 3);
 
 
   updateClock();
diff --git a/apps/dane_tcr/app.js b/apps/dane_tcr/app.js
index d545ea016..deaac665a 100644
--- a/apps/dane_tcr/app.js
+++ b/apps/dane_tcr/app.js
@@ -1,99 +1,10 @@
+var d = require("https://raw.githubusercontent.com/OmegaVoid/EspruinoDocs/master/modules/dane_arwes.js");
+var Arwes = d.default();
 
 const yOffset = 23;
 const width = g.getWidth();
 const height = g.getHeight();
 const xyCenter = width / 2 + 4;
-const cornerSize = 14;
-const cornerOffset = 3;
-const borderWidth = 1;
-const mainColor = "#26dafd";
-const mainColorDark = "#029dbb";
-// const mainColorLight = "#8bebfe";
-
-const secondaryColor = "#df9527";
-const secondaryColorDark = "#8b5c15";
-// const secondaryColorLight = "#ecc180";
-
-const success = "#00ff00";
-// const successDark        = "#000900";
-// const successLight        = "#060f06";
-
-const alert = "#ff0000";
-// const alertDark          = "#090000";
-// const alertLight          = "#0f0606";
-
-function drawTopLeftCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x - cornerOffset;
-  const y1 = y - cornerOffset;
-  g.fillRect(x1, y1, x1 + cornerSize, y1 + cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x + cornerSize - cornerOffset, y + cornerSize - cornerOffset);
-}
-
-function drawTopRightCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x + cornerOffset;
-  const y1 = y - cornerOffset;
-  g.fillRect(x1, y1, x1 - cornerSize, y1 + cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x - cornerSize - cornerOffset, y + cornerSize - cornerOffset);
-}
-
-function drawBottomLeftCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x - cornerOffset;
-  const y1 = y + cornerOffset;
-  g.fillRect(x1, y1, x1 + cornerSize, y1 - cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x + cornerSize - cornerOffset, y - cornerSize + cornerOffset);
-}
-
-function drawBottomRightCorner(x, y) {
-  g.setColor(mainColor);
-  const x1 = x + cornerOffset;
-  const y1 = y + cornerOffset;
-  g.fillRect(x1, y1, x1 - cornerSize, y1 - cornerSize);
-  g.setColor("#000000");
-  g.fillRect(x, y, x - cornerSize + cornerOffset, y - cornerSize + cornerOffset);
-}
-
-function drawFrame(x1, y1, x2, y2) {
-  drawTopLeftCorner(x1, y1);
-  drawTopRightCorner(x2, y1);
-  drawBottomLeftCorner(x1, y2);
-  drawBottomRightCorner(x2, y2);
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-function drawFrameNoCorners(x1, y1, x2, y2) {
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-
-function drawTopFrame(x1, y1, x2, y2) {
-
-  drawBottomLeftCorner(x1, y2);
-  drawBottomRightCorner(x2, y2);
-  g.setColor(mainColorDark);
-  g.drawRect(x1, y1, x2, y2);
-  g.setColor("#000000");
-  g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
-}
-
-function drawBottomFrame(x1,y1,x2,y2) {
-  drawTopLeftCorner(x1,y1);
-  drawTopRightCorner(x2,y1);
-  g.setColor(mainColorDark);
-  g.drawRect(x1,y1,x2,y2);
-  g.setColor("#000000");
-  g.fillRect(x1+borderWidth,y1+borderWidth,x2-borderWidth,y2-borderWidth);
-}
-
 
 const Storage = require("Storage");
 const filename = 'dane_tcr.json';
@@ -160,7 +71,7 @@ const APPS = getApps();
 
 function noIcon(x, y, scale){
   if(scale < 0.2) return;
-  g.setColor(alert);
+  g.setColor(Arwes.C.color.alert.base);
   g.setFontAlign(0,0);
   g.setFont('6x8',settings.highres ? 6:3);
   g.drawString('x_x', x+1.5, y);
@@ -203,11 +114,11 @@ function render(){
       const h = (settings.highres ?8:6)*fontSize
       const w = ((settings.highres ?6:2)*fontSize)*app.name.length
       if(settings.hightres)
-        drawFrame(HALF-w, HALF-h, HALF+w, HALF+h);
+        Arwes.drawFrame(HALF-w, HALF-h, HALF+w, HALF+h);
       else
-        drawFrame(HALF-w-2, HALF-h, HALF+w, HALF+h);
+        Arwes.drawFrame(HALF-w-2, HALF-h, HALF+w, HALF+h);
       g.setFont(font, fontSize);
-      g.setColor(alert);
+      g.setColor(Arwes.C.color.alert.base);
       g.setFontAlign(0,0);
       g.drawString(app.name, HALF, HALF);
       return;
@@ -225,9 +136,9 @@ function render(){
         const imageScale = settings.highres ? scale*2 : scale;
 
         if(settings.hightres)
-          drawFrame(x-rescale-5, y-rescale-5, x+rescale+5, y+rescale+5);
+          Arwes.drawFrame(x-rescale-5, y-rescale-5, x+rescale+5, y+rescale+5);
         else
-          drawFrame(x-rescale-2-2, y-rescale-1, x+rescale+2, y+rescale+1);
+          Arwes.drawFrame(x-rescale-2-2, y-rescale-1, x+rescale+2, y+rescale+1);
 
 
 
@@ -248,10 +159,10 @@ function render(){
       const h = (settings.highres ?8:6)*fontSize
       const w = ((settings.highres ?6:2)*fontSize)*10//app.name.length
       if(settings.highres)
-        drawFrame(36, HEIGHT/4*3-(fontSize*8), 204, HEIGHT/4*3+(fontSize*8));
+        Arwes.drawFrame(36, HEIGHT/4*3-(fontSize*8), 204, HEIGHT/4*3+(fontSize*8));
       else
-        drawTopFrame(HALF-w-2, HEIGHT/4*3-h, HALF+w, HEIGHT/4*3+h);
-      g.setColor(mainColor);
+        Arwes.drawTopFrame(HALF-w-2, HEIGHT/4*3-h, HALF+w, HEIGHT/4*3+h);
+      g.setColor(Arwes.C.color.primary.base);
       g.setFont(font, fontSize);
       g.setFontAlign(0,0);
       g.drawString(app.name, HALF, HEIGHT/4*3);
@@ -262,10 +173,10 @@ function render(){
       const version = app.version ? app.version : '0.00';
       const info = type+' v'+version;
       const textWidth = (info.length*(6*1.5))
-      drawTopFrame(HALF-textWidth/2, 210-(1.5*8)-2, HALF+textWidth/2, 210+(1.5*8)-2);
+      Arwes.drawTopFrame(HALF-textWidth/2, 210-(1.5*8)-2, HALF+textWidth/2, 210+(1.5*8)-2);
       g.setFontAlign(0,1);
       g.setFont('6x8', 1.5);
-      g.setColor(secondaryColor);
+      g.setColor(Arwes.C.color.secondary.base);
       g.drawString(info, HALF, 210, { scale: scale });
     }