diff --git a/examples/Calculator.re b/examples/Calculator.re
index 8d692dd64..5d69b4388 100644
--- a/examples/Calculator.re
+++ b/examples/Calculator.re
@@ -11,13 +11,12 @@ module Row = {
   let make = children =>
     component((_slots: React.Hooks.empty) => {
       let style =
-        Style.make(
-          ~flexDirection=LayoutTypes.Row,
-          ~alignItems=LayoutTypes.AlignStretch,
-          ~justifyContent=LayoutTypes.JustifyCenter,
-          ~flexGrow=1,
-          (),
-        );
+        Style.[
+          flexDirection(`Row),
+          alignItems(`Stretch),
+          justifyContent(`Center),
+          flexGrow(1),
+        ];
       <View style> ...children </View>;
     });
 
@@ -30,14 +29,13 @@ module Column = {
   let make = children =>
     component((_slots: React.Hooks.empty) => {
       let style =
-        Style.make(
-          ~flexDirection=LayoutTypes.Column,
-          ~alignItems=LayoutTypes.AlignStretch,
-          ~justifyContent=LayoutTypes.JustifyCenter,
-          ~backgroundColor=Colors.darkGrey,
-          ~flexGrow=1,
-          (),
-        );
+        Style.[
+          flexDirection(`Column),
+          alignItems(`Stretch),
+          justifyContent(`Center),
+          backgroundColor(Colors.darkGrey),
+          flexGrow(1),
+        ];
       <View style> ...children </View>;
     });
 
@@ -48,29 +46,32 @@ module Button = {
   let component = React.component("Button");
 
   let make =
-      (~fontFamily="Roboto-Regular.ttf", ~contents: string, ~onClick, ()) =>
+      (
+        ~fontFamily as family="Roboto-Regular.ttf",
+        ~contents: string,
+        ~onClick,
+        (),
+      ) =>
     component((_slots: React.Hooks.empty) => {
       let clickableStyle =
-        Style.make(
-          ~position=LayoutTypes.Relative,
-          ~backgroundColor=Colors.lightGrey,
-          ~justifyContent=LayoutTypes.JustifyCenter,
-          ~alignItems=LayoutTypes.AlignCenter,
-          ~flexGrow=1,
+        Style.[
+          position(`Relative),
+          backgroundColor(Colors.lightGrey),
+          justifyContent(`Center),
+          alignItems(`Center),
+          flexGrow(1),
           /* Min width */
-          ~width=125,
-          ~margin=10,
-          (),
-        );
+          width(125),
+          margin(10),
+        ];
       let viewStyle =
-        Style.make(
-          ~position=LayoutTypes.Relative,
-          ~justifyContent=LayoutTypes.JustifyCenter,
-          ~alignItems=LayoutTypes.AlignCenter,
-          (),
-        );
+        Style.[
+          position(`Relative),
+          justifyContent(`Center),
+          alignItems(`Center),
+        ];
       let textStyle =
-        Style.make(~color=Colors.black, ~fontFamily, ~fontSize=32, ());
+        Style.[color(Colors.black), fontFamily(family), fontSize(32)];
 
       <Clickable style=clickableStyle onClick>
         <View style=viewStyle> <Text style=textStyle text=contents /> </View>
@@ -84,9 +85,8 @@ module Button = {
         ~onClick,
         ~children as _,
         (),
-      ) => {
+      ) =>
     React.element(make(~fontFamily, ~contents, ~onClick, ()));
-  };
 };
 module Display = {
   let component = React.component("Display");
@@ -94,31 +94,28 @@ module Display = {
   let make = (~display: string, ~curNum: string, ()) =>
     component((_slots: React.Hooks.empty) => {
       let viewStyle =
-        Style.make(
-          ~backgroundColor=Colors.white,
-          ~height=120,
-          ~flexDirection=LayoutTypes.Column,
-          ~alignItems=LayoutTypes.AlignStretch,
-          ~justifyContent=LayoutTypes.JustifyFlexStart,
-          ~flexGrow=2,
-          (),
-        );
+        Style.[
+          backgroundColor(Colors.white),
+          height(120),
+          flexDirection(`Column),
+          alignItems(`Stretch),
+          justifyContent(`FlexStart),
+          flexGrow(2),
+        ];
       let displayStyle =
-        Style.make(
-          ~color=Colors.black,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=20,
-          ~margin=15,
-          (),
-        );
+        Style.[
+          color(Colors.black),
+          fontFamily("Roboto-Regular.ttf"),
+          fontSize(20),
+          margin(15),
+        ];
       let numStyle =
-        Style.make(
-          ~color=Colors.black,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=32,
-          ~margin=15,
-          (),
-        );
+        Style.[
+          color(Colors.black),
+          fontFamily("Roboto-Regular.ttf"),
+          fontSize(32),
+          margin(15),
+        ];
 
       <View style=viewStyle>
         <Text style=displayStyle text=display />
@@ -205,19 +202,19 @@ let eval = (state, newOp) => {
 let reducer = (action, state) =>
   switch (action) {
   | BackspaceKeyPressed =>
-    state.number == ""
-      ? state
-      : {
+    state.number == "" ?
+      state :
+      {
         ...state,
         number: String.sub(state.number, 0, String.length(state.number) - 1),
       }
   | ClearKeyPressed(ac) =>
-    ac
-      ? {operator: `Nop, result: 0., display: "", number: ""}
-      : {...state, number: ""}
+    ac ?
+      {operator: `Nop, result: 0., display: "", number: ""} :
+      {...state, number: ""}
   | DotKeyPressed =>
-    String.contains(state.number, '.')
-      ? state : {...state, number: state.number ++ "."}
+    String.contains(state.number, '.') ?
+      state : {...state, number: state.number ++ "."}
   | NumberKeyPressed(n) => {...state, number: state.number ++ n}
   | OperationKeyPressed(o) =>
     let (result, display) = eval(state, o);
@@ -388,6 +385,4 @@ module Calculator = {
     React.element(make(window));
 };
 
-let render = window => {
-  <Calculator window />;
-};
+let render = window => <Calculator window />;
diff --git a/examples/Hello.re b/examples/Hello.re
index cbf8d99ef..67992b885 100644
--- a/examples/Hello.re
+++ b/examples/Hello.re
@@ -35,13 +35,9 @@ module Logo = {
           slots,
         );
 
-      let onMouseDown = _ => {
-        setOpacity(0.5);
-      };
+      let onMouseDown = _ => setOpacity(0.5);
 
-      let onMouseUp = _ => {
-        setOpacity(1.0);
-      };
+      let onMouseUp = _ => setOpacity(1.0);
 
       <View onMouseDown onMouseUp>
         <Image
@@ -68,7 +64,7 @@ module AnimatedText = {
 
   let make = (~text, ~delay, ()) =>
     component(slots => {
-      let (opacity, slots) =
+      let (animatedOpacity, slots) =
         Hooks.animation(
           Animated.floatValue(0.),
           {
@@ -95,15 +91,14 @@ module AnimatedText = {
         );
 
       let textHeaderStyle =
-        Style.make(
-          ~color=Colors.white,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=24,
-          ~marginHorizontal=8,
-          ~opacity,
-          ~transform=[TranslateY(translate)],
-          (),
-        );
+        Style.[
+          color(Colors.white),
+          fontFamily("Roboto-Regular.ttf"),
+          fontSize(24),
+          marginHorizontal(8),
+          opacity(animatedOpacity),
+          transform([Transform.TranslateY(translate)]),
+        ];
 
       <Text style=textHeaderStyle text />;
     });
@@ -117,16 +112,15 @@ let render = () =>
     onMouseWheel={evt =>
       print_endline("onMouseWheel: " ++ string_of_float(evt.deltaY))
     }
-    style={Style.make(
-      ~position=LayoutTypes.Absolute,
-      ~justifyContent=LayoutTypes.JustifyCenter,
-      ~alignItems=LayoutTypes.AlignCenter,
-      ~bottom=0,
-      ~top=0,
-      ~left=0,
-      ~right=0,
-      (),
-    )}>
+    style=Style.[
+      position(`Absolute),
+      justifyContent(`Center),
+      alignItems(`Center),
+      bottom(0),
+      top(0),
+      left(0),
+      right(0),
+    ]>
     <Logo />
     <View
       ref={r =>
@@ -134,7 +128,7 @@ let render = () =>
           "View internal id:" ++ string_of_int(r#getInternalId()),
         )
       }
-      style={Style.make(~flexDirection=Row, ~alignItems=AlignFlexEnd, ())}>
+      style=Style.[flexDirection(`Row), alignItems(`FlexEnd)]>
       <AnimatedText delay=0.0 text="Welcome" />
       <AnimatedText delay=0.5 text="to" />
       <AnimatedText delay=1. text="Revery" />
diff --git a/examples/Stopwatch.re b/examples/Stopwatch.re
index 4ce0b21d6..61929d536 100644
--- a/examples/Stopwatch.re
+++ b/examples/Stopwatch.re
@@ -60,14 +60,6 @@ module Clock = {
           slots,
         );
 
-      let clockWrapperStyle =
-        Style.make(
-          ~margin=20,
-          ~width=150,
-          ~borderBottom=Style.Border.make(~color=Colors.gray, ~width=2, ()),
-          (),
-        );
-
       let startStop = () =>
         state.isRunning ?
           dispatch(Stop) :
@@ -83,37 +75,15 @@ module Clock = {
             dispatch(Start(dispose));
           };
 
-      let style =
-        Style.make(
-          ~color=Colors.white,
-          ~fontFamily="Roboto-Regular.ttf",
-          ~fontSize=24,
-          ~marginVertical=20,
-          ~width=200,
-          (),
-        );
-
       let buttonText = state.isRunning ? "STOP" : "START";
 
       let marcherOpacity = state.isRunning ? 1.0 : 0.0;
       let getMarcherPosition = t =>
         sin(Time.to_float_seconds(t) *. 2. *. pi) /. 2. +. 0.5;
 
-      let marcherStyle =
-        Style.make(
-          ~position=LayoutTypes.Absolute,
-          ~bottom=0,
-          ~opacity=marcherOpacity,
-          ~left=int_of_float(getMarcherPosition(state.elapsedTime) *. 146.),
-          ~width=4,
-          ~height=4,
-          ~backgroundColor=Color.hex("#90f7ff"),
-          (),
-        );
-
       <View
         style=Style.[
-          position(LayoutTypes.Absolute),
+          position(`Absolute),
           justifyContent(`Center),
           alignItems(`Center),
           bottom(0),
@@ -121,12 +91,35 @@ module Clock = {
           left(0),
           right(0),
         ]>
-        <View style=clockWrapperStyle>
+        <View
+          style=Style.[
+            margin(20),
+            width(150),
+            borderBottom({color: Colors.gray, width: 2}),
+          ]>
           <Text
-            style
+            style=Style.[
+              color(Colors.white),
+              fontFamily("Roboto-Regular.ttf"),
+              fontSize(24),
+              marginVertical(20),
+              width(200),
+            ]
             text={string_of_float(state.elapsedTime |> Time.to_float_seconds)}
           />
-          <View style=marcherStyle />
+          <View
+            style=Style.[
+              position(`Absolute),
+              bottom(0),
+              opacity(marcherOpacity),
+              left(
+                int_of_float(getMarcherPosition(state.elapsedTime) *. 146.),
+              ),
+              width(4),
+              height(4),
+              backgroundColor(Color.hex("#90f7ff")),
+            ]
+          />
         </View>
         <Button title=buttonText onClick=startStop />
       </View>;
diff --git a/src/UI/Style.re b/src/UI/Style.re
index a2ba16dc2..365302fb1 100644
--- a/src/UI/Style.re
+++ b/src/UI/Style.re
@@ -324,13 +324,16 @@ type styleProps = [
   | `Cursor(option(MouseCursors.t))
 ];
 
-let flexDirection = d =>
-  switch (d) {
-  | `Column => LayoutTypes.Column
-  | `ColumnReverse => LayoutTypes.ColumnReverse
-  | `RowReverse => LayoutTypes.RowReverse
-  | `Row => LayoutTypes.Row
-  };
+let flexDirection = d => {
+  let dir =
+    switch (d) {
+    | `Column => LayoutTypes.Column
+    | `ColumnReverse => LayoutTypes.ColumnReverse
+    | `RowReverse => LayoutTypes.RowReverse
+    | `Row => LayoutTypes.Row
+    };
+  `FlexDirection(dir);
+};
 
 let alignment = a =>
   switch (a) {
@@ -348,6 +351,8 @@ let justify = j =>
   | `FlexEnd => LayoutTypes.JustifyFlexEnd
   };
 
+let flexGrow = g => `FlexGrow(g);
+
 let right = f => `Right(f);
 let bottom = f => `Bottom(f);
 let left = f => `Left(f);
@@ -373,6 +378,8 @@ let marginLeft = m => `MarginLeft(m);
 let marginRight = m => `MarginRight(m);
 let marginTop = m => `MarginTop(m);
 let marginBottom = m => `MarginBottom(m);
+let marginVertical = m => `MarginVertical(m);
+let marginHorizontal = m => `MarginHorizontal(m);
 
 let border = (b: Border.t) =>
   Border.make(~color=b.color, ~width=b.width, ()) |> (b => `Border(b));
@@ -407,6 +414,7 @@ let applyStyle = (style: t, styleRule: [> styleProps]) =>
   switch (styleRule) {
   | `AlignItems(alignItems) => {...style, alignItems}
   | `JustifyContent(justifyContent) => {...style, justifyContent}
+  | `FlexGrow(flexGrow) => {...style, flexGrow}
   | `FlexDirection(flexDirection) => {...style, flexDirection}
   | `Position(position) => {...style, position}
   | `Margin(margin) => {...style, margin}