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

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

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

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

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

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

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

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

images

Load images with style

Fixed ratio image loader

<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/hero/introfilmen-poster.jpg);
    }
    @media (min-width: 800px) {
        #{{page.slug}}_bg {
            background-image: url(../assets/hero/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(assetshero//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

2 columns heading / box

Design inspiration from the inner sanctum

We started the brand redesign journey by traveling to the source: Qgroup’s majestic headquarters in Malmö. Velvet sofas, brass-clad bars, curved lines — the grandeur of Great Gatsby parties game straight to mind.

Described as “a fusion of late-night Paris and classical studio”, this place spoke volumes about the spirit of Qgroup and its technical prowess. This became the inspiration for Qgroup’s new identity — but how to take it digital?

<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

.boxtext--frame

Read all about it Or drop us a line

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

Stepper

Example markdown front-matter:

    stepper:
      - Download app & choose screen
      - Choose firework style & color
      - Dedicate it to a loved one
      - Give to a charity from the list

Download app & choose screen
Choose firework style & color
Dedicate it to a loved one
Give to a charity from the list

HTML: (See source code for good looping options using front-matter lists)

<ul class="stepper">
 
    <li class="stepper__step flexcenter">Download app & choose screen</li>
    
    <li class="stepper__arrow flexcenter">
        <svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg>
    </li>
    
    <li class="stepper__step flexcenter">Choose firework style & color</li>
    
    <li class="stepper__arrow flexcenter">
        <svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg>
    </li>
    
    <li class="stepper__step flexcenter">Dedicate it to a loved one</li>
    
    <li class="stepper__arrow flexcenter">
        <svg class="link--icon"><use xlink:href="#icon-arrow-right"></use></svg>
    </li>
    
    <li class="stepper__step flexcenter">Give to a charity from the list</li>
    
</ul>

Stats

Example markdown:

    stats: |
      ## The app had over 
      ## **300**
      ## downloads before New Year’s Eve

The app had over

300 downloads before New Year’s Eve

<section class="section sectionspacing-small stats">
    <h2 id="the-app-had-over">The app had over</h2>
    <h2 id="300"><strong>300</strong></h2>
    <h2 id="downloads-before-new-years-eve">downloads before New Year’s Eve</h2>
</section>

signal - #5F11E8

people - #FFC1B4

business - #7BD75E

curiosities - #FFDE7F

metal - #666666

light - #f8f8f8

white - #ffffff

dark - #0A2A4F

H1 headline

H2 headline

H3 headline

H4 headline

H5 headline

H6 headline

The secret clubhouse

Check out our other projects

A beautiful cat

Another beautiful cat

A compat boxgrid:

Recent work

A beautiful cat

Another beautiful cat

Another beautiful cat

Another beautiful cat

Lorem ipsum

Another beautiful cat

Fixed ratio image loader

Backgrund image

Imagegrid

Imagebox + text

div #exampleimage

div #exampletext

.boxtext

2 columns text / image

2 columns heading / box

Design inspiration from the inner sanctum

A Boxtext width a frame

.boxtext--frame

Stepper

Stats

The app had over

300

downloads before New Year’s Eve

signal - `#5F11E8`

people - `#FFC1B4`

business - `#7BD75E`

curiosities - `#FFDE7F`

metal - `#666666`

light - `#f8f8f8`

white - `#ffffff`

dark - `#0A2A4F`