Design System

Colors

signal - #5F11E8

This color will be the main association with Fully. A strong signal that shows tech and takes place.

people - #FFC1B4

This color stands for the personal side of Fully. Things that describe people or personal things uses this color.

business - #7BD75E

This color is used for business inqueries and other parts concerning contact with client.

curiosities - #FFDE7F

This color primarily for the current and constant curiosity, but also for explorations and ideas.

metal - #666666

This color is mainly here because of Joakim and his ocult ways :) No in all seriousness this color is a good option to use when we don’t want to go all black and gives a softer look to texts.

light - #f8f8f8

This color is used for backgrounds and such. This light grey gives a small contrast to white but stil enough to be usefull and nice and light.

white - #ffffff

Just whit. Not much to say here. A very usefull color in many situations.

dark - #0A2A4F

Use this on dark text on lighter backgrounds. But make sure the contrast is good.

Typography

Headlines, textblock etc.

H1 headline

H2 headline

H3 headline

H4 headline

H5 headline

H6 headline

Paragraph text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis maiores hic quo optio alias odit voluptas debitis autem voluptate, facilis quaerat numquam, porro maxime repellendus sapiente a illum eius adipisci.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ipsum cupiditate.

Ingress Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ip`um cupiditate.

<p class="ingress"></p>

Buttons

Standard button: Explore

<a class="button" href="#"><span>Explore</span></a>

Inverted button: Explore

<a class="button button--invert" href="#"><span>Explore</span></a>


Link button: View all cases

<a href="#" class="link link--next"><span>View all cases</span><svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg></a>

Inverted link: View all cases

<a href="#" class="link link--next link--invert"><span>View all cases</span><svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg></a>


Dark link: View all cases

<a href="#" class="link link--next link--dark"><span>View all cases</span><svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg></a>


Boxes

Boxes with different dropshadows for text and images.

The secret clubhouse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ipsum cupiditate.

<div class="box"></div>
<div class="box box--right box--people" style="background-image:url(https://placekitten.com/g/1920/600)"></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ipsum cupiditate.

<div class="box box--business"></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ipsum cupiditate.

<div class="box box--right box--curiosities"></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo, vero placeat, voluptas corporis voluptatum architecto sequi fuga. Earum ipsam commodi nisi soluta ut officiis eligendi culpa repudiandae ipsum cupiditate.

<div class="box box--metal"></div>

Make the shadow go upwards instead by using the class box--up

<div class="box box--right box--up"></div>

Also works with .box--bgpeople, .box--bgcuriosities, .box--bgbusiness and .box--bgmetal

<div class="box box--metal">

boxgrid

a grid with images and texts. Used in “other projects”

Check out our other projects

A beautiful cat

A beautiful cat

lorem ipsum

A beautiful cat

Another beautiful cat

Lorem ipsum dolem es simet

<div class="boxgrid">
    <h2 class="boxgrid__header h4">Boxgrid title</h2>

    <figure class="boxgrid__box">
        <div class="image-loader" style="background: #c1c1c1"> <!--Change this color to an average color from the image-->
            <img src="" alt="Fig title">	
        </div>
        <figcaption class="boxgrid__caption">
            <h3>Fig title</h3>
            <p>Fig Description</p>
        </figcaption>
    </figure>
</div>

A compat boxgrid:

Recent work

A beautiful cat

A beautiful cat

lorem ipsum

View case
A beautiful cat

Another beautiful cat

Lorem ipsum

View case
A beautiful cat

Another beautiful cat

Lorem ipsum dolem es simet es lorem ipsum

View case
A beautiful cat

Another beautiful cat

Lorem ipsum

View case
A beautiful cat

Lorem ipsum

Lorem ipsum dolem es simet lorem

View case
A beautiful cat

Another beautiful cat

Lorem ipsum dolem es simet

View case
<div class="boxgrid boxgrid--compact">
...
</div>

images

Load images with style

Fixed ratio image loader

A beautiful cat
<div class="image-loader" style="background: #c1c1c1">
    <img 
    src="https://placekitten.com/g/1440/830"
    alt="A beautiful cat">	
</div>


Backgrund image

Availible classes:
.background-image
.background-image--padding
.background-image--largepadding

<style>
    #{{page.slug}}_bg {
        background-image: url(../assets/introfilmen-poster.jpg);
    }
    @media (min-width: 800px) {
        #{{page.slug}}_bg {
            background-image: url(../assets/introfilmen-poster.jpg);
        }
    }
</style>
<div class="background-image background-image--padding flexcenter invert" id="{{page.slug}}_bg">
    <p>Lorem ipsum</p>
</div>


Imagegrid

Also works with images 😁

This example takes an array of vimeo video ID's


{% unless page.vimeo_IDs == nil %}
<section class="imagegrid imagegrid--firstlarge">
	{% for video in page.vimeo_IDs %}
	<div class="imagegrid__image">
		<div class="video">
			<iframe src="https://player.vimeo.com/video/{{video}}" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		</div>
	</div>
	{% endfor %}
    <div class="imagegrid__image imagegrid__image--two"></div>
    <div class="imagegrid__image imagegrid__image--two"></div>
</section>
{% endunless %}

Layouts

Imagebox + text

Example of a custom CSS grid layout using a container with the class `grid`.

div #exampleimage

grid-column: 1 / span 12;
grid-row: 4 / span 13;
@include media-query($on-laptop) {
    grid-column: 1 / span 8;
    grid-row: 2 / span 13;
}

div #exampletext

grid-column: 2 / span 13;
grid-row: 1 / span 4; 
@include media-query($on-laptop) {
    grid-column: 8 / span 5;
    grid-row: 1 / span 8;
}

.boxtext

Dolem es simet lorem

View case study View all cases
<div class="grid grid--space">
    <div class="background-image grid__offsetcolumn1-2" id="exampleimage" style="background-image: url(assets/introfilmen-poster.jpg)"></div>
    <div class="boxtext grid__offsetcolumn2-2" id="exampletext"></div>
</div>


2 columns text / image

Column 1 - lorem ipsum dolem es simet lorem ipsum dolem es simet lorem ipsum dolem es simet


<div class="grid grid--space grid--padding">
    <div class="grid__column1-2">
        {{ page.section3 | markdownify }}
    </div>
    <div class="grid__column2-2 flexcenter">
        <img class="image"
            alt="{{page.section3_image_alt}}"
            width="1440" height="1653"
            src="{{site.baseurl}}/assets/work/{{page.slug}}/{{ page.section3_image_small }}" 
            srcset="{{site.baseurl}}/assets/work/{{page.slug}}/{{ page.section3_image_medium }} 1440w,
                    {{site.baseurl}}/assets/work/{{page.slug}}/{{ page.section3_image_small }} 720w"
           sizes="(min-width: 580px) 50vw,
                   100vw">
    </div>
</div>


A Boxtext width a frame

Availible classes: boxtext--frame--curiosities, boxtext--frame--darkoncuriosity boxtext--frame--dark, boxtext--frame--people

<div class="boxtext boxtext--frame">
[...]
</div>