Typography

Using clean typography we create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Open Sans

Is the primary brand typeface for Hawkeye. A humanist sans serif typeface designed with an upright stress, open forms and a neutral, yet friendly appearance. Optimized for print, web, and mobile interfaces, and incredibly legible.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

font-family: 'Open Sans', sans-serif;

System font stack

We use a sytem font stack as a supporting font, mostly used in body text.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Type presets and scales

Please use their respective object classes to include their presets.

Display large

.o-display--lg {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 2.48832rem; /* 40px */
  line-height: 1.2;
}

Display medium

.o-display--md {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 2.0736rem; /* 33px */
  line-height: 1.2;
}

Display small

.o-display--sm {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 1.728rem; /* 27px */
  line-height: 1.2;
}

Heading

.o-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2rem; /* 19px */
  line-height: 1.2;
}

Heading small

.o-heading--sm {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2rem; /* 19.2px */
  line-height: 1.2;
}

Subheading

.o-subheading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 0.83333rem; /* 13px */
  text-transform: uppercase;
  line-height: 1.2;
}

Label

.o-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 0.83333rem; /* 13px */
  line-height: 1.2;
}

Body regular

We are the leading oilfield production services company specializing in the inspection, non-destructive testing and reconditioning of sucker rods and tubulars. Our goal is to provide value-add downhole solutions that reduce operating costs, ensure equipment integrity and extend production run time.

.o-body-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.4;
  max-width: 80ch;
}

Body small

We are the leading oilfield production services company specializing in the inspection, non-destructive testing and reconditioning of sucker rods and tubulars. Our goal is to provide value-add downhole solutions that reduce operating costs, ensure equipment integrity and extend production run time.

.o-body-text--sm {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 0.83333rem; /* 13px */
  line-height: 1.5;
  max-width: 90ch;
}
Design System