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


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 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 )

Headline color is
rgba( 18 , 18 , 18 , 1 )

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


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

Paragraph color is
rgba( 18 , 18 , 18 , 1 )

More LAB Grotesque weights here.

Big title - marquee section

Big title

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

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

Big title color is
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.



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 )


Responsive Layout Grid

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


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.

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 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.


WIP - need an accent color


View styleguide in Zeplin

You need to be logged in.

rgba( 18 , 18 , 18 , 1 )
Dark Grey
rgba( 63, 63 , 63 , 1 )
rgba( 148, 148 , 148 , 1 )
Light Grey
rgba( 227 , 227 , 227 , 1 )
Very Light Grey
rgba( 243 , 243 , 243 , 1 )
rgba( 255 , 255 , 255 , 1 )


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

Checkmark alt

Page structure

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


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.

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


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


View components in Zeplin

You need to be logged in.


Project listing

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

  1. portrait ( 440 x 495px ) or @2x = 880 x 990px
  2. landscape small ( 880 x 495px ) or @2x = 1760 x 990px
  3. featured landscape large ( 1200 x 675px ) or @2x = 2400 x 1350px

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


View components in Zeplin

You need to be logged in.

Project thumbnails

440 x 495px
Aspect ratio 8 : 9


880 x 495px
Aspect ratio: 16:9


1200 x 675px ( full width of content section )
Aspect ratio: 16:9


On larger desktop we have the following layout:


On scrolling project element will skew


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

  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.


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.


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

Error Message

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


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

Success Message

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


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.


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.

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;

rgba( 63, 63 , 63 , 1 )
Input text
rgba( 18 , 18 , 18 , 1 )
rgba( 148, 148 , 148 , 1 )
ERROR color is
rgba( 255, 85 , 0 , 1 )
rgba( 243 , 243 , 243 , 1 )