Mediatic

Mediatic is a web agency based in Cluj-Napoca. We craft tailored websites, visual identities and offer digital solutions through effective design

MEDIATIC - Web Agency Design System

Typography

Use typography to present your design and content as clearly and efficiently as possible.

Text is the primary way that users digest content and accomplish work, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.

Headline

Headline 1

font-size: calc( (100% + 0.25vw) * 4.5 )

Headline 1

font-size: calc( (100% + 0.25vw) * 3 )

Headline 2

font-size: calc( (100% + 0.25vw) * 2.5 )

Headline 3

font-size: calc( (100% + 0.25vw) * 2 )

Headline 4

font-size: calc( (100% + 0.25vw) * 1.75 )

Headline 5

font-size: calc( (100% + 0.25vw) * 1.5 )

Headline 6

font-size: calc( (100% + 0.25vw) * 1 )

Color
Headline color is
#121212
rgba( 18 , 18 , 18 , 1 )


You can also view the this CSS for implementation by inspecting this page.


Paragraph

In the landscape of grots, the subtlest of differences can bear great weight in a typeface’s tone. Looking past the repression of Helvetica, inspiration was found in the idiosyncrasies of earlier grotesks and gothics from the turn of the century. Conceptually, Lab Grotesque is built on the idea of round strokes straightening out towards the terminals. With that in mind, we made the choice of square or rounded dots possible through stylistic sets.

Lab Grotesque comes in six resolute weights, complete with italics. Lab is designed with and for Stockholm Design Lab, and now it’s available for everyone.

font-size: calc(100% + 0.25vw)

Link is bold

Color
Paragraph color is
#3f3f3f
rgba( 18 , 18 , 18 , 1 )


More LAB Grotesque weights here.

Big title - marquee section

Big title

Mobile:
font-size: calc( (100% + 0.25vw) * 4.5 )

Desktop:
font-size: calc( (100% + 0.25vw) * 10 )

Color
Big title color is
#e3e3e3e
rgba( 227 , 227 , 227 , 1 )


View marquee section here.




Typography spacing

Default spacing is 20px. In case you need bigger spacing apply an increment of 10px to the existing 20px.

There is a preference to apply the spacing at the bottom, so the items stack better.

Element Desktop Mobile ( < 992 px)
Headline 20px 20px
Paragraph 30px 20px
List ( ul, li) 10px 10px
Left / Right margins Increments of 15px.

( Same as column paddings. )

Also use < hr > tag, with a height of 30px for adding more spacing. Useful for content editing.

CSS Fluid Typography

Viewport Unit Based Typography comes in very useful for building modular components. You can read the full post here.

CSS

Formula:

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Simplified version:

html {
font-size: calc( 100% + 0.25vw )
}

Example

Responsive Layout Grid

Layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

Grid

We'll be using Bootstrap 4.0 grid system.




Columns, gutters and margins

Bootstrap responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

Layout grid is made up of three elements: columns, gutters, and margins.

Content is placed in the areas of the screen that contain columns. Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size.




Mobile device

For a mobile device, we'll be using a 2 columns based grid, with a fixed 30px gutter (15px on each side of a column).



Desktop & Tablet

For desktop device&tablet, breakpoint larger than ~1000px, we'll be using a 12 columns based grid with a fixed 30px gutter (15px on each side of a column).


* example for a max-width: 1200px set to page section.


Breakpoints
Element Default * @media only screen and (min-width: 1200px) @media only screen and (min-width: 1600px)
container-fluid max-width: none max-width: 1000px max-width: 1440px

* In this case 'Default' refers to a 'Mobile first approach.




Gutters

Gutters are the spaces between columns. They help separate content. Gutter widths are fixed values at each breakpoint range.

Gutter width is: 30px and is formed by applying:
padding-left: 15px;
padding-right: 15px;

Column specs

Anatomy of a column




Margins & paddings

Vertical margins and paddings will be applied as increments of 10px.
Horizontal margin and paddings will be applied as increments of 15px ( same as gutter ).
More of a suggestion for the front-enders, there is a preference to add margins and paddings on the bottom. The reason is that stacking up different elements will work better that way for content editors.

Colors

WIP - need an accent color

Zeplin

View styleguide in Zeplin

You need to be logged in.

Color
Black
#121212
rgba( 18 , 18 , 18 , 1 )
Color
Dark Grey
#3f3f3f
rgba( 63, 63 , 63 , 1 )
Color
Grey
#949494
rgba( 148, 148 , 148 , 1 )
Color
Light Grey
#e3e3e3e
rgba( 227 , 227 , 227 , 1 )
Color
Very Light Grey
#f3f3f3
rgba( 243 , 243 , 243 , 1 )
Color
White
#ffffff
rgba( 255 , 255 , 255 , 1 )

Iconography

Use SVG. There is no need for an icon font + it will load faster.

TIP: In order to get al the iterations of one icon, such as arrow left / right / up / down, use CSS transform: rotate(90deg). This way we only need to load the image once.

Arrow Right
Arrow Left
Arrow Down
Arrow Up

Arrow thin right
Arrow thin left
Arrow thin down
Arrow thin up

Close
Checkmark
Checkmark alt

Page structure

A page is made up by three elements: header, content sections and footer.

Mobile
Desktop




Content section

A content section is an element that wraps the content in order to be displayed seemingly across devices and browsers. It is in here where we add components.

TO DO: create a table with breakpoints.


Breakpoints
Element Default @media only screen and (min-width: 1200px) @media only screen and (min-width: 1600px)
container-fluid max-width: none max-width: 1000px max-width: 1440px



Components

Modular components that can be easily added in different content sections of the website. These components are responsive.

Zeplin

View components in Zeplin

You need to be logged in.







Buttons






Project listing

Projects will contain 2 elements: an image and a caption. We have 3 types of projects:

  1. small ( 430 x 492px )
  2. large ( 880 x 492px )
  3. featured ( 1180 x 590px )

Across content sections will be using these thumbnails applied on layout.

Zeplin

View components in Zeplin

You need to be logged in.




Project thumbnails
small

430 x 492px

large

880 x 492px

featured

1180 x 590px ( full width of content section )




Layout
grid

On larger desktop we have the following layout:

Interaction
animation

On scrolling project element will skew









Marquee

Will be using this component to draw user's attention in order to perform a call to action.
Specifications:

  1. Start marquee animation when section is entering viewport.
  2. marquee will be full width of the screen.
Call to action

- Let's talk - Want to go digital? - Don't be shy

In the example below the interaction is shown on mouseover.

Forms

Input text, input submit, success messages & error messages handling.

All forms should be applied using the layout, with either the 12 column grid or the respective 2 column grid for mobile device.




Input fields

Below the basic style for text fields, textarea and submit.

Text fields

OPS! Invalid entry. Check for typos.



Textarea

All fields marked with * are mandatory.




Form succes / error messages

All fields marked with * are mandatory.

OPS! Could not send message, server is busy. Please try calling us: +40 123 456 789




Specs
Error Message

Display message at the bottom and if necessary scroll up, to the invalid field.


UX TIP

When communicating an error to the user it's important to state the reason why it occurred. Offer a solution to solve the error.

Interaction
Specs
Success Message

Display message as an overlay.
After 3s it should disappear by itself, unless the user interacts with the close button.

Interaction



Form Styleguide

A form will be set into a page section, based on a 12 column grid layout on dektop and a 2 column grid for mobile.

Zeplin

View styleguide in Zeplin




Layout & spacing

Apply the page section layout, always use the grid.
Please use Zeplin for implementation.

Margins and paddings are increments of 10px. Use typography rules.
Please use Zeplin for implementation.




Typography & colors

Forms will be using the same set of rules as typography, with the exception that font-size will not be fluid, therefore will always be set to 100%. As forms can get complex, by not resizing the type we have more control.




Typography
Element State Size Weight
Label Default font-size: 100%; normal
Input text Default / Placeholder font-size: 100%; normal
  Focus / Valid font-size: 100%; bold
Textarea Default font-size: 100%; normal
Input submit Submit Use primary button
  Secondary submit Use secondary button

Font-family: LAB Grotesque;




Colors
Label
LABEL
#3f3f3f
rgba( 63, 63 , 63 , 1 )
Input text
INPUT TEXT
#121212
rgba( 18 , 18 , 18 , 1 )
Placeholder
PLACEHOLDER
#949494
rgba( 148, 148 , 148 , 1 )
Error
ERROR color is
#FF5500
rgba( 255, 85 , 0 , 1 )
Background
Background
#f3f3f3
rgba( 243 , 243 , 243 , 1 )