Colors

near-black
#242730

dark-gray
#676974

gray
#B0B2BA

light-gray
#DADADA

near-white
#F8F8F8

dark-red
#CF3727

red
#FF5544

light-red
#FFDAD6

Typography

  • .f1 { font-size: 3.5rem; } // 56px
  • .f2 { font-size: 2.5rem; } // 40px
  • .f3 { font-size: 2.25rem; } // 36px
  • .f4 { font-size: 1.75rem; } // 28px
  • .f5 { font-size: 1.375rem; } // 22px
  • .f6 { font-size: 1.25rem; } // 20px
  • .f7 { font-size: 1.125rem; } // 18px
  • .f8 { font-size: 1rem; } // 16px
  • .f9 { font-size: 0.875rem; } // 14px
  • .f19 { font-size: 0.75remrem; } // 12px

.f-page-title

Reaktor is a hybrid partner for forward-thinking businesses and organizations.

.f-page-intro

Strategy, design, creative, 
high-performance engineering.

.f-section-title

Section title

Section title gray

.f-title

Redefining passenger journeys and in-flight experiences

.f-title-small

Dubai

.f-paragraph

The air traveler’s journey is orchestrated through a seamless interplay between the passenger, their personal device, the in-flight entertainment system, the crew, the aircraft, and the airline brand. Working with Finnair, we had the opportunity to design every touchpoint and aim for a holistic experience.

.f-paragraph-small

Jouni Oksanen, Vice President, eCommerce, Finnair

.f-numbers

200%

Grid

Layout

class="mw9 ph4 center"

Columns

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col1

col col2

col col2

col col2

col col2

col col2

col col2

col col3

col col3

col col3

col col3

col col4

col col4

col col4

col col5

col col7

col col6

col col6

col col7

col col5

col col8

col col4

col col9

col col3

col col10

col col2

col col11

col col1

col col12

Responsive

Media Query Extensions:

  • -ns = not-small
  • -m = medium
  • -l = large

col col3-l col6-ns col12

col col3-l col6-ns col12

col col3-l col6-ns col12

col col3-l col6-ns col12

Spacing

  • mb1 - .5rem !default; // 8px
  • mb2 - 1rem !default; // 16px
  • mb3 - 2rem !default; // 32px
  • mb4 - 4rem !default; // 64px
  • mb5 - 6rem !default; // 96px
  • mb6 - 8rem !default; // 128px
  • mb7 - 875rem !default; // 222px

Padding All

pa0
pa1
pa2
pa3
pa4
pa5
pa6
pa7

Padding Horizontal

ph0
ph1
ph2
ph3
ph4
ph5
ph6
ph7

Padding Vertical

pv0
pv1
pv2
pv3
pv4
pv5
pv6
pv7

Padding Left

pl0
pl1
pl2
pl3
pl4
pl5
pl6
pl7

Padding Right

pr0
pr1
pr2
pr3
pr4
pr5
pr6
pr7

Padding Top

pt0
pt1
pt2
pt3
pt4
pt5
pt6
pt7

Padding Bottom

pb0
pb1
pb2
pb3
pb4
pb5
pb6
pb7

Margin all

ma0
ma1
ma2
ma3
ma4
ma5
ma6
ma7

Margin Horizontal

mh0
mh1
mh2
mh3
mh4
mh5
mh6
mh7

Margin Vertical

mv0
mv1
mv2
mv3
mv4
mv5
mv6
mv7

Margin Left

ml0
ml1
ml2
ml3
ml4
ml5
ml6
ml7

Margin Right

mr0
mr1
mr2
mr3
mr4
mr5
mr6
mr7

Margin Top

mt0
mt1
mt2
mt3
mt4
mt5
mt6
mt7

Margin Bottom

mb0
mb1
mb2
mb3
mb4
mb5
mb6
mb7