diff --git a/website/src/App.js b/website/src/App.js
index f79549e..8bd6e5d 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -51,7 +51,7 @@ export class App extends React.Component {
         <Column.Item grow />
         <Column.Item>
           <Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
-            <Text tone='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
+            <Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
           </Box>
         </Column.Item>
       </Column>
diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js
index 9169e8d..dc184e0 100644
--- a/website/src/Modal/MessageModal.js
+++ b/website/src/Modal/MessageModal.js
@@ -28,7 +28,7 @@ export class MessageModal extends React.Component {
                 <Text width='100%' align='center'>{message}</Text>
               </Column.Item>
               <Column.Item>
-                <Text width='100%' align='center' tone='dimmed' size='small'>{detail}</Text>
+                <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
               </Column.Item>
               <Column.Item height={15} />
               <Column.Item height={sizeInfo.buttonHeight}>
diff --git a/website/src/ui/BoundInput.js b/website/src/ui/BoundInput.js
index 152fc34..bfd25d6 100644
--- a/website/src/ui/BoundInput.js
+++ b/website/src/ui/BoundInput.js
@@ -50,7 +50,7 @@ export default class BoundInput extends React.Component {
           onChange={this.handleChange}
           placeholder={placeholder} />
         <br />
-        <Text size='small' tone='alert'>{valid ? ' ' : message}</Text>
+        <Text size='small' color='alert'>{valid ? ' ' : message}</Text>
       </div>
     )
   }
diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js
index 5f174d7..fc380d2 100644
--- a/website/src/ui/Text.js
+++ b/website/src/ui/Text.js
@@ -8,14 +8,14 @@ class Text extends Component {
     size: PropTypes.string,
     margin: PropTypes.number,
     children: PropTypes.node,
-    tone: PropTypes.string,
+    color: PropTypes.oneOf(['normal', 'alert', 'dimmed']),
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     align: PropTypes.string,
   }
 
   static defaultProps = {
     size: 'medium',
-    tone: 'normal',
+    color: 'normal',
     margin: 0,
     align: 'left',
   }
@@ -28,7 +28,7 @@ class Text extends Component {
         display: 'inline-block',
         fontSize: fontInfo.size[this.props.size],
         fontFamily: fontInfo.family,
-        color: fontInfo.color[this.props.tone],
+        color: fontInfo.color[this.props.color],
         textAlign: align,
         margin,
         width,