diff --git a/examples/stocks-fn/stockrow.dart b/examples/stocks-fn/stockrow.dart
index 6eb9df64803..4d7d688256e 100644
--- a/examples/stocks-fn/stockrow.dart
+++ b/examples/stocks-fn/stockrow.dart
@@ -16,8 +16,7 @@ class StockRow extends Component {
   );
 
   static Style _tickerStyle = new Style('''
-    flex: 1;
-    font-family: 'Roboto Medium', 'Helvetica';'''
+    flex: 1;'''
   );
 
   static Style _lastSaleStyle = new Style('''
@@ -26,7 +25,7 @@ class StockRow extends Component {
   );
 
   static Style _changeStyle = new Style('''
-    color: #8A8A8A;
+    ${typography.black.caption};
     text-align: right;'''
   );
 
diff --git a/examples/stocks-fn/stocksapp.dart b/examples/stocks-fn/stocksapp.dart
index 9f9da043c55..0f806162de8 100644
--- a/examples/stocks-fn/stocksapp.dart
+++ b/examples/stocks-fn/stocksapp.dart
@@ -1,19 +1,20 @@
 library stocksapp;
 
-import '../../framework/fn.dart';
-import '../../framework/animation/scroll_behavior.dart';
-import '../../framework/components/drawer.dart';
-import '../../framework/components/drawer_header.dart';
-import '../../framework/components/fixed_height_scrollable.dart';
-import '../../framework/components/floating_action_button.dart';
-import '../../framework/components/icon.dart';
-import '../../framework/components/input.dart';
-import '../../framework/components/material.dart';
-import '../../framework/components/menu_divider.dart';
-import '../../framework/components/menu_item.dart';
-import '../../framework/components/action_bar.dart';
 import '../data/stocks.dart';
 import 'dart:math';
+import 'package:sky/framework/animation/scroll_behavior.dart';
+import 'package:sky/framework/components/action_bar.dart';
+import 'package:sky/framework/components/drawer.dart';
+import 'package:sky/framework/components/drawer_header.dart';
+import 'package:sky/framework/components/fixed_height_scrollable.dart';
+import 'package:sky/framework/components/floating_action_button.dart';
+import 'package:sky/framework/components/icon.dart';
+import 'package:sky/framework/components/input.dart';
+import 'package:sky/framework/components/material.dart';
+import 'package:sky/framework/components/menu_divider.dart';
+import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/theme/typography.dart' as typography;
 
 part 'stockarrow.dart';
 part 'stocklist.dart';
@@ -27,8 +28,8 @@ class StocksApp extends App {
     display: flex;
     flex-direction: column;
     height: -webkit-fill-available;
-    font-family: 'Roboto Regular', 'Helvetica';
-    font-size: 16px;'''
+    ${typography.typeface};
+    ${typography.black.body1};'''
   );
 
   static Style _iconStyle = new Style('''
@@ -37,7 +38,8 @@ class StocksApp extends App {
 
   static Style _titleStyle = new Style('''
     padding-left: 24px;
-    flex: 1;'''
+    flex: 1;
+    ${typography.white.title};'''
   );
 
   List<Stock> _sortedStocks;
@@ -99,7 +101,7 @@ class StocksApp extends App {
       title = new Input(focused: true, placeholder: 'Search stocks',
           onChanged: _handleSearchQueryChanged);
     } else {
-      title = new Text('I am a stocks app');
+      title = new Text('Stocks');
     }
 
     var toolbar = new ActionBar(