Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Design Systems

Laura Kalbag
March 01, 2013

Design Systems

From a talk at Responsive Day Out in March 2013

Laura Kalbag

March 01, 2013
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. #1

  2. components you might differentiate across viewports: • grids • layout

    • font size • measure (line-length) • leading (line-height)
  3. Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My four column layout My four column layout H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is
  4. Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My grid based on threes Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My grid based on threes Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My grid based on threes
  5. Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Symmetrical grid Symmetrical grid Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting Symmetrical grid
  6. Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably My circles concept My circles concept Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My circles concept Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text