Implement Custom Typography (#98)

Revamp of typography across the entire app
* Removed dependency on bootstrap typography
* Added 'Open Sans' and 'Roboto' font definitions
* Defined new variables for header and body font family/weight
* Defined a set of predefined classes such as title-1, title-2, body-1, etc.
* Replaced ad hoc font styles with predefined classes whenever possible.

amundsen_application/static/css/_bootstrap-custom.scss

@@ -12,7 +12,6 @@ $icon-font-path: '/static/fonts/bootstrap/';
 
 // Core CSS
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/type';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/code';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/grid';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/tables';

amundsen_application/static/css/_buttons-default.scss

@@ -3,8 +3,7 @@
 
   &.btn-primary,
   &.btn-default {
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
+    font-weight: $font-weight-body-bold;
     height: 32px;
     padding: 6px 16px;
 

amundsen_application/static/css/_fonts-default.scss

-// TODO - Import Open Sans or other default font
+@import 'variables';
+
+// Roboto
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: $font-weight-header-regular;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: $font-weight-header-bold;
+  font-style: normal;
+}
+
+
+// Open Sans
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
+  font-weight: $font-weight-body-regular;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-SemiBold.ttf') format('truetype');
+  font-weight: $font-weight-body-semi-bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
+  font-weight: $font-weight-body-bold;
+  font-style: normal;
+}

amundsen_application/static/css/_popovers.scss

@@ -45,8 +45,7 @@
   border: none;
   background-color: $gray-base;
   color: $body-bg;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-weight: $font-weight-body-bold;
   outline: none;
 }
 .tooltip-inner button:hover {

amundsen_application/static/css/_typography-custom.scss

+// This file is intentionally left blank and should be overwritten by in the build process.

amundsen_application/static/css/_typography-default.scss

+@import 'variables';
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+h1, h2, h3,
+.h1, .h2, .h3 {
+  color: $text-dark;
+  font-family: $font-family-header;
+  margin: 0;
+}
+
+h1,
+.h1 {
+  font-size: 36px;
+  font-weight: $font-weight-header-regular;
+}
+
+h2,
+.h2 {
+  font-size: 26px;
+  font-weight: $font-weight-header-bold;
+}
+
+h3,
+.h3 {
+  font-size: 20px;
+  font-weight: $font-weight-header-bold;
+}
+
+body {
+  color: $text-dark;
+  font-size: 14px;
+  font-family: $font-family-body;
+  font-weight: $font-weight-body-regular;
+}
+
+.title-1, .title-2, .title-3,
+.subtitle-1, .subtitle-2, .subtitle-3,
+.body-1, .body-2, .body-3,
+.body-secondary-3, .body-link, .caption {
+  font-family: $font-family-body;
+}
+
+.title-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-bold;
+  line-height: 24px;
+}
+
+.title-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-bold;
+}
+
+.title-3 {
+  color: $text-medium;
+  font-size: 14px;
+  font-weight: $font-weight-body-bold;
+}
+
+.subtitle-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-semi-bold;
+  line-height: 20px;
+}
+
+.subtitle-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-semi-bold;
+}
+
+.subtitle-3 {
+  font-size: 14px;
+  font-weight: $font-weight-body-semi-bold;
+}
+
+.body-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-regular;
+  line-height: 24px;
+}
+
+.body-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-3 {
+  font-size: 14px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-secondary-3 {
+  color: $text-medium;
+  font-size: 14px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-link {
+  color: $brand-color-4;
+  font-size: 14px;
+}
+
+.caption {
+  color: $text-medium;
+  font-size: 13px;
+  font-weight: $font-weight-body-bold;
+}
+
+.column-type {
+  color: $brand-color-3;
+  font-size: 13px;
+  font-family: $font-family-monospace;
+}
+
+.helper-text {
+  color: $text-light;
+  font-size: 12px;
+  font-family: $font-family-body;
+}

amundsen_application/static/css/_typography.scss

+// Amundsen Default Typography
+@import 'typography-default';
+// Per-Client Custom Typography
+@import 'typography-custom';

amundsen_application/static/css/_variables-default.scss

@@ -4,7 +4,8 @@
 
   $brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5
 
-  $font-family-sans-serif-bold, $font-weight-sans-serif-bold
+  $font-family-header, $font-weight-header-regular, $font-weight-header-bold
+  $font-family-body, $font-weight-body-regular, $font-weight-body-semi-bold, $font-weight-body-bold
 
   $text-dark, $text-medium, $text-light
 
@@ -42,17 +43,19 @@ $text-light: $gray-light !default;
 
 
 // Typography
-$font-family-sans-serif:      "Lucida Sans Unicode", "Lucida Grande", sans-serif !default;
-$font-family-sans-serif-bold: $font-family-sans-serif !default;
-$font-weight-sans-serif-bold: 600 !default;
-$font-family-serif:           Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:       Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-body:           "Open Sans", sans-serif !default;
+$font-weight-body-regular:   400 !default;
+$font-weight-body-semi-bold: 600 !default;
+$font-weight-body-bold:      700 !default;
 
-$font-family-base:            $font-family-sans-serif !default;
-$headings-font-family:        $font-family-sans-serif-bold !default;
+$font-family-header:         "Roboto", sans-serif !default;
+$font-weight-header-regular: 500 !default;
+$font-weight-header-bold:    700 !default;
 
-$font-size-small:    12px !default;
+$font-family-monospace:       'Menlo-Bold', Menlo, monospace !default;
+$font-family-serif:           Georgia, "Times New Roman", Times, serif !default;
 
+$font-size-small:    12px !default;
 $font-size-base:     14px !default;
 $font-size-large:    16px !default;
 $line-height-small:  1.5 !default;

amundsen_application/static/css/styles.scss

@@ -5,6 +5,7 @@
 @import 'icons';
 @import 'list-group-item';
 @import 'popovers';
+@import 'typography';
 
 // TODO - Move to separate files
 // Layout

amundsen_application/static/js/components/AnnouncementPage/index.tsx

@@ -37,8 +37,8 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
     return (
       <div key={`post:${postIndex}`} className='post-container'>
         <div className='post-header'>
-          <div className='post-title'>{post.title}</div>
-          <div className='post-date'>{post.date}</div>
+          <div className='post-title title-2'>{post.title}</div>
+          <div className='body-secondary-3'>{post.date}</div>
         </div>
         <div className='post-content'>
           <SanitizedHTML html={post.html_content} />
@@ -59,9 +59,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
         <div className="container announcement-container">
           <div className="row">
             <div className="col-xs-12">
-              <div id="announcement-header" className="announcement-header">
-                Announcements
-              </div>
+              <h3 id="announcement-header">Announcements</h3>
               <hr />
               <div id="announcement-content" className='announcement-content'>
                 {this.createPosts()}

amundsen_application/static/js/components/AnnouncementPage/styles.scss

@@ -3,34 +3,22 @@
 .announcement-container hr {
   border: 2px solid $brand-color-4;
 }
-.announcement-header {
-  font-size: 20px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-}
 
 .post-container {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
-}
-.post-header {
+
+  .post-header {
     padding-right: 16px;
-  border-right: 1px solid $gray-lighter
-}
-.post-title {
-  font-size: 16px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+    border-right: 1px solid $gray-lighter;
+
+    .post-title {
       width: 150px;
-}
-.post-date {
-  font-size: 14px;
-  color: $text-medium;
-}
-.post-content {
+    }
+  }
+
+  .post-content {
     padding-left: 16px;
-}
-.post-content > p:not(:last-child) {
-  margin: 0 0 20px;
+  }
 }

amundsen_application/static/js/components/BrowsePage/index.tsx

@@ -79,7 +79,7 @@ export class BrowsePage extends React.Component<BrowsePageProps, BrowsePageState
         <div className="container">
           <div className="row">
             <div className="col-xs-12">
-              <h3 id="browse-header" className="header">Browse Tags</h3>
+              <h3 id="browse-header">Browse Tags</h3>
               <hr className="header-hr"/>
               <div id="browse-body" className="browse-body">
                 {this.generateTagInfo(this.state.curatedTags)}

amundsen_application/static/js/components/BrowsePage/styles.scss

 @import 'variables';
 
-.container {
-  margin-top: 64px;
-}
-
-h3.header {
-  font-size: 20px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-}
-
 hr.header-hr {
   border: 2px solid $brand-color-4;
 }

amundsen_application/static/js/components/Feedback/FeedbackForm/styles.scss

@@ -28,15 +28,15 @@
 }
 
 .nps-label {
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-family: $font-family-header;
+  font-weight: $font-weight-header-regular;
   margin-bottom: 15px;
-  width: 60px;
+  width: 65px;
 }
 
 .status-message {
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-family: $font-family-header;
+  font-weight: $font-weight-header-regular;
   text-align: center;
   position: absolute;
   font-size: 20px;

amundsen_application/static/js/components/Feedback/styles.scss

@@ -38,8 +38,8 @@
     color: $text-medium;
     flex-grow: 1;
     font-size: 12px;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
+    font-family: $font-family-header;
+    font-weight: $font-weight-header-regular;
     height: 24px;
     line-height: 32px;
   }

amundsen_application/static/js/components/NavBar/index.tsx

@@ -36,9 +36,11 @@ export class NavBar extends React.Component<NavBarProps> {
   generateNavLinks(navLinks: LinkConfig[]) {
     return navLinks.map((link, index) => {
       if (link.use_router) {
-        return <NavLink key={index} to={link.href} target={link.target} onClick={logClick}>{link.label}</NavLink>
+        return <NavLink className="title-3" key={index} to={link.href} target={link.target}
+                        onClick={logClick}>{link.label}</NavLink>
       }
-      return <a key={index} href={link.href} target={link.target} onClick={logClick}>{link.label}</a>
+      return <a className="title-3" key={index} href={link.href} target={link.target}
+                onClick={logClick}>{link.label}</a>
     });
   }
 
@@ -52,7 +54,7 @@ export class NavBar extends React.Component<NavBarProps> {
                 AppConfig.logoPath &&
                 <img id="logo-icon" className="logo-icon" src={AppConfig.logoPath} />
               }
-              <Link to={`/`}>
+              <Link to={`/`} className="title-3">
                 AMUNDSEN
               </Link>
             </div>

amundsen_application/static/js/components/NavBar/styles.scss

@@ -4,10 +4,7 @@
   height: 48px;
   box-shadow: 0 2px 0 -1px $gray-lightest;
   padding: 8px 32px 8px 32px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
   color: $text-medium;
-  font-size: 14px;
   display: flex;
   flex-direction: row;
   align-items: center;

amundsen_application/static/js/components/NavBar/tests/index.spec.tsx

@@ -61,7 +61,10 @@ describe('NavBar', () => {
     });
 
     it('returns a NavLink w/ correct props if user_router is true', () => {
-      const expectedContent = JSON.stringify(<NavLink key={0} to='/announcements' target='_blank' onClick={logClick}>Announcements</NavLink>);
+      const expectedContent = JSON.stringify(
+        <NavLink className="title-3" key={0} to='/announcements' target='_blank'
+                 onClick={logClick}>Announcements</NavLink>
+      );
       expect(JSON.stringify(content[0])).toEqual(expectedContent);
     });
 

amundsen_application/static/js/components/SearchPage/SearchBar/index.tsx

@@ -86,13 +86,13 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
   };
 
   render() {
-    const subTextClass = `subtext ${this.state.subTextClassName}`;
+    const subTextClass = `subtext body-secondary-3 ${this.state.subTextClassName}`;
     return (
       <div id="search-bar">
         <form className="search-bar-form" onSubmit={ this.handleValueSubmit }>
             <input
               id="search-input"
-              className="search-bar-input form-control"
+              className="h2 search-bar-input form-control"
               value={ this.state.searchTerm }
               onChange={ this.handleValueChange }
               aria-label={ this.props.placeholder }

amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss

@@ -12,14 +12,10 @@
       left: 24px;
     }
 
-    .search-bar-input {
+    .h2.search-bar-input {
       border-radius: 4px;
       border-color: $gray-light;
       box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04);
-      color: $text-dark;
-      font-family: $font-family-sans-serif-bold;
-      font-size: 26px;
-      font-weight: $font-weight-sans-serif-bold;
       height: 80px;
       width: 100%;
       padding: 16px 24px 16px 64px;
@@ -40,7 +36,7 @@
         left: 16px;
         top: 18px;
       }
-      .search-bar-input {
+      .h2.search-bar-input {
         font-size: 24px;
         padding: 16px 16px 16px 48px;
         height: 60px;
@@ -49,7 +45,6 @@
   }
 
   .subtext {
-    color: $text-medium;
     margin-top: 16px;
   }
 

amundsen_application/static/js/components/SearchPage/SearchBar/tests/index.spec.tsx

@@ -172,7 +172,7 @@ describe('SearchBar', () => {
         expect(wrapper.find('form').find('input').props()).toMatchObject({
           'aria-label': SearchBar.defaultProps.placeholder,
           autoFocus: true,
-          className: 'search-bar-input form-control',
+          className: 'h2 search-bar-input form-control',
           id: 'search-input',
           onChange: wrapper.instance().handleValueChange,
           placeholder: SearchBar.defaultProps.placeholder,
@@ -185,7 +185,7 @@ describe('SearchBar', () => {
         expect(wrapper.find('form').find('input').props()).toMatchObject({
           'aria-label': props.placeholder,
           autoFocus: true,
-          className: 'search-bar-input form-control',
+          className: 'h2 search-bar-input form-control',
           id: 'search-input',
           onChange: wrapper.instance().handleValueChange,
           placeholder: props.placeholder,
@@ -212,7 +212,7 @@ describe('SearchBar', () => {
     describe('subtext', () =>{
       it('renders div with correct class', () => {
         expect(wrapper.children().at(1).props()).toMatchObject({
-          className: `subtext ${wrapper.state().subTextClassName}`,
+          className: `subtext body-secondary-3 ${wrapper.state().subTextClassName}`,
         });
       });
 

amundsen_application/static/js/components/SearchPage/index.tsx

@@ -152,7 +152,7 @@ export class SearchPage extends React.Component<SearchPageProps, SearchPageState
     return (
         <div className="search-list-container">
           <div className="popular-tables-header">
-            <label>{POPULAR_TABLES_LABEL}</label>
+            <label className="title-1">{POPULAR_TABLES_LABEL}</label>
             <InfoButton infoText={POPULAR_TABLES_INFO_TEXT}/>
           </div>
           <SearchList results={ this.props.popularTables } params={ searchListParams }/>

amundsen_application/static/js/components/SearchPage/styles.scss

@@ -19,15 +19,6 @@
     flex-direction: row;
     margin-bottom: 32px;
 
-    label {
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
-      font-size: 20px;
-      margin-top: auto;
-      margin-bottom: auto;
-      width: fit-content;
-      line-height: 24px;
-    }
   }
 
 

amundsen_application/static/js/components/TableDetail/DataPreviewButton/index.tsx

@@ -113,7 +113,7 @@ export class DataPreviewButton extends React.Component<DataPreviewButtonProps, D
               const fieldName = col.column_name;
               return (
                 <div key={fieldName} id={fieldName} className='grid-column'>
-                  <div className='grid-cell grid-header'>
+                  <div className='grid-cell grid-header subtitle-3'>
                     {fieldName.toUpperCase()}
                   </div>
                   {

amundsen_application/static/js/components/TableDetail/DataPreviewButton/styles.scss

@@ -7,8 +7,9 @@
     min-height: 90%;
 
     .modal-title {
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
+      font-size: 20px;
+      font-family: $font-family-header;
+      font-weight: $font-weight-header-bold;
     }
     .modal-body {
       margin: 15px;
@@ -23,11 +24,8 @@
         flex-grow: 1;
       }
       .grid-header.grid-cell {
-        font-size: 14px;
         background-color: $gray-lighter;
         height: 40px;
-        font-family: $font-family-sans-serif-bold;
-        font-weight: $font-weight-sans-serif-bold;
       }
       .grid-cell {
         display: flex;

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx

@@ -73,9 +73,9 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
       <li className='list-group-item detail-list-item'>
         <div className={'column-info ' + (isExpandable ? 'expandable' : '')} onClick={ isExpandable? this.onClick : null }>
           <div style={{ width: '100%', display: 'inline-grid' }}>
-            <div className='title'>
-              <div className='name'>{metadata.name}</div>
-              <div className='type'>{metadata.type || 'null'}</div>
+            <div className='title-row'>
+              <div className='name title-2'>{metadata.name}</div>
+              <div className='column-type'>{metadata.type || 'null'}</div>
             </div>
           </div>
           {
@@ -83,7 +83,7 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
             <img className={'icon ' + (this.state.isExpanded ? 'icon-up' : 'icon-down')}/>
           }
         </div>
-        <div className={'description ' + (this.state.isExpanded ? '' : (isExpandable ? 'truncated' : ''))}>
+        <div className={'body-secondary-3 description ' + (isExpandable && !this.state.isExpanded ? 'truncated' : '')}>
           <ColumnDescEditableText
             columnIndex={this.props.index}
             editable={metadata.is_editable}
@@ -96,10 +96,10 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
             {
               metadata.stats.map(entry =>
                 <div className='column-stat' key={entry.stat_type}>
-                  <div className='title'>
+                  <div className='caption'>
                     {entry.stat_type.toUpperCase()}
                   </div>
-                  <div className='content'>
+                  <div className='body-link'>
                     {entry.stat_val}
                   </div>
                 </div>

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss

@@ -12,9 +12,7 @@
   padding: 10px 4px;
 
   .description {
-    color: $text-medium;
     max-width: 100%;
-    font-size: 14px;
     min-width: 0;
     padding-right: 32px;
   }
@@ -33,23 +31,17 @@
     margin: -10px -4px 0;
     padding: 10px 4px 0;
 
-    .title {
+    .title-row {
       display: flex;
       flex-direction: row;
-    }
+
       .name {
-      font-size: 16px;
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
         margin-right: 8px;
       }
-    .type {
-      color: $brand-color-4;
-      font-size: 13px;
+      .column-type {
         margin-top: 4px;
-      font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
       }
-
+    }
 
     &.expandable {
       cursor: pointer;
@@ -57,10 +49,6 @@
       &:hover {
         background-image: linear-gradient($gray-lighter, $gray-lighter, white);
 
-        .type {
-          color: $brand-color-4;
-        }
-
         .icon {
           background-color: $brand-color-4;
         }
@@ -79,16 +67,6 @@
       max-width: 150px;
       min-width: 120px;
       width: 20%;
-
-      .title {
-        color: $text-medium;
-        font-size: $font-size-small;
-        font-family: $font-family-sans-serif-bold;
-        font-weight: $font-weight-sans-serif-bold;
-      }
-      .content {
-        color: $brand-color-4;
-      }
     }
 
     .stat-collection-info {

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -332,9 +332,9 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
             <Breadcrumb path='/' text='Search Results'/>
             <div className="row">
               <div className="detail-header col-xs-12 col-md-7 col-lg-8">
-                <div className="title">
+                <h1 className="detail-header-text">
                   { `${data.schema}.${data.table_name}` }
-                </div>
+                </h1>
                 {
                   data.is_view && <Flag text="Table View" labelStyle="primary" />
                 }
@@ -350,8 +350,8 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
               <div className="col-xs-12 col-md-5 float-md-right col-lg-4">
                 <EntityCard sections={ this.createEntityCardSections() }/>
               </div>
-              <div className="detail-list-header col-xs-12 col-md-7 col-lg-8">
-                <label>Columns</label>
+              <div className="col-xs-12 col-md-7 col-lg-8">
+                <div className="detail-list-header title-1">Columns</div>
                 <DetailList
                   columns={ data.columns }
                 />

amundsen_application/static/js/components/TableDetail/styles.scss

@@ -10,21 +10,12 @@
   .detail-header {
     margin-bottom: 32px;
   }
-  .detail-header .title {
-    font-size: 32px;
+  .detail-header .detail-header-text {
     overflow-wrap: break-word;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
   }
 
-  .detail-list-header > label {
-    font-size: 20px;
-    margin-top: auto;
+  .detail-list-header {
     margin-bottom: 32px;
-    width: fit-content;
-    line-height: 24px;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
   }
 
   @media (min-width: $screen-md-min) {

amundsen_application/static/js/components/Tags/TagInfo/styles.scss

@@ -5,7 +5,6 @@
   border: 0;
   border-radius: 4px;
   color: $text-dark;
-  font-size: $font-size-base;
   margin: 4px;
   overflow: hidden;
   padding: 8px;

amundsen_application/static/js/components/common/Breadcrumb/index.tsx

@@ -12,7 +12,7 @@ const Breadcrumb: React.SFC<BreadcrumbProps> = ({ path, text }) => {
   return (
     <div className="amundsen-breadcrumb">
       <Link to={path}>
-        <button className='btn btn-flat-icon'>
+        <button className='btn btn-flat-icon title-3'>
           <img className='icon icon-left'/>
           <span>{text}</span>
         </button>

amundsen_application/static/js/components/common/Breadcrumb/styles.scss

@@ -3,9 +3,6 @@
 // Margins values chosen for the breadcrumb to sort-of split the difference/center
 // itself in our 96px/64px/32px top margins.
 .amundsen-breadcrumb {
-  color: $text-medium;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
   height: 24px;
   margin-top: -72px;
   margin-bottom: 48px;

amundsen_application/static/js/components/common/EntityCard/EntityCardSection/index.tsx

@@ -40,7 +40,7 @@ class EntityCardSection extends React.Component<EntityCardSectionProps, EntityCa
     return (
       <div className="entity-card-section">
         <div className="content-header">
-          <div id="section-title" className="title">
+          <div id="section-title" className="caption">
               { this.props.title.toUpperCase() }
               {
                 this.props.infoText &&

amundsen_application/static/js/components/common/EntityCard/EntityCardSection/styles.scss

@@ -2,28 +2,26 @@
 
 .entity-card-section {
   margin-bottom: 20px;
-}
-.entity-card-section .title {
-  color: $text-medium;
-  font-size: 12px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  flex-grow: 1;
-  margin: auto;
-}
-.entity-card-section .content-header {
+
+  .content-header {
     display: flex;
-}
-.entity-card-section .content {
+
+    .caption {
+      flex-grow: 1;
+    }
+  }
+  .content {
     margin-top: 5px;
-}
+  }
 
-.entity-card-section .content-header button.edit-button,
-.entity-card-section .content-header button.active-edit-button {
+  .content-header button.edit-button,
+  .content-header button.active-edit-button {
     margin-top: -4px;
     margin-left: 4px;
+  }
 }
 
+
 button.edit-button {
   height: 24px;
   width: 24px;

amundsen_application/static/js/components/common/EntityCard/EntityCardSection/tests/index.spec.tsx

@@ -20,7 +20,7 @@ describe('EntityCardSection', () => {
 
     describe('render', () => {
         it('renders the title', () => {
-            expect(subject.find('.title').text()).toEqual('TITLE');
+            expect(subject.find('.caption').text()).toEqual('TITLE');
         });
 
         it('renders InfoButton w/ correct props if props.infoText', () => {

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/index.tsx

@@ -35,14 +35,14 @@ class TableListItem extends React.Component<TableListItemProps, {}> {
           <img className="icon icon-database icon-color" />
           <div className="content">
             <div className={ hasLastUpdated? "col-sm-9 col-md-10" : "col-sm-12"}>
-              <div className="main-title truncated">{ `${table.schema_name}.${table.name}`}</div>
-              <div className="description truncated">{ table.description }</div>
+              <div className="title-2 truncated">{ `${table.schema_name}.${table.name}`}</div>
+              <div className="body-secondary-3 truncated">{ table.description }</div>
             </div>
             {
               hasLastUpdated &&
               <div className="hidden-xs col-sm-3 col-md-2">
-                <div className="secondary-title">Last Updated</div>
-                <div className="description truncated">
+                <div className="title-3">Last Updated</div>
+                <div className="body-secondary-3 truncated">
                   { this.getDateLabel() }
                 </div>
               </div>

amundsen_application/static/js/components/common/ResourceListItem/UserListItem/index.tsx

@@ -28,20 +28,20 @@ class UserListItem extends React.Component<UserListItemProps, {}> {
           <Avatar name={ user.name } size={ 24 } round={ true } />
           <div className="content">
             <div className="col-xs-12 col-sm-6">
-              <div className="main-title">
+              <div className="title-2">
                 { user.name }
                 {
                   !user.active &&
                   <Flag text="Alumni" labelStyle='danger' />
                 }
               </div>
-              <div className="description">
+              <div className="body-secondary-3">
                 { `${user.role} on ${user.team_name}` }
               </div>
             </div>
             <div className="hidden-xs col-sm-6">
-              <div className="secondary-title">Frequently Uses</div>
-              <div className="description truncated">
+              <div className="title-3">Frequently Uses</div>
+              <div className="body-secondary-3 truncated">
                 { /*TODO Fill this with a real value*/ }
                 <label>{ user.title }</label>
               </div>

amundsen_application/static/js/components/common/ResourceListItem/styles.scss

@@ -20,32 +20,5 @@
   .content {
     width: 100%;
     min-width: 0; /* Needed to support `white-space: nowrap` */
-
-    .main-title {
-      color: $text-dark;
-      font-size: $font-size-large;
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
-    }
-
-    .secondary-title {
-      color: $text-medium;
-      font-family: $font-family-sans-serif-bold;
-      font-weight: $font-weight-sans-serif-bold;
-    }
-
-    .description {
-      color: $text-medium;
-      display: block;
-      font-size: $font-size-base;
-      margin-top: 2px;
-
-      > a {
-        color: $brand-color-4;
-        &:hover {
-          color: $brand-color-5;
-        }
-      }
-    }
   }
 }