visualisation.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="728px" height="981px" viewBox="0 0 728 981" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.0.1 (7597) - http://www.bohemiancoding.com/sketch -->
    <title>visualisation</title>
    <description>Created with Sketch.</description>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#A3D4DB" offset="0%"></stop>
            <stop stop-color="#71A6AE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="visualisation" sketch:type="MSArtboardGroup">
            <rect id="Rectangle-3" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" x="389" y="402" width="138" height="44" rx="8"></rect>
            <text id="Button" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#FFFFFF">
                <tspan x="410" y="435">Button</tspan>
            </text>
            <rect id="Rectangle-4" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" x="557" y="413" width="138" height="44" rx="8"></rect>
            <text id="Button-2" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#FFFFFF">
                <tspan x="578" y="446">Button</tspan>
            </text>
            <rect id="Rectangle-5" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup" x="560" y="862" width="138" height="44" rx="8"></rect>
            <text id="Button-3" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#FFFFFF">
                <tspan x="581" y="896">Button</tspan>
            </text>
            <rect id="Rectangle-1" fill="#F1FFB3" sketch:type="MSShapeGroup" x="418" y="137" width="280" height="177"></rect>
            <rect id="Rectangle-2" fill="#F1FFB3" sketch:type="MSShapeGroup" x="418" y="553" width="280" height="177"></rect>
            <text id="Lorem-ipsum-dolor-si" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#000000">
                <tspan x="24" y="138">Lorem ipsum dolor sit </tspan>
                <tspan x="24" y="182">amet, consectetur </tspan>
                <tspan x="24" y="226">adipiscing elit. Nulla </tspan>
                <tspan x="24" y="270">orci eros, rhoncus a </tspan>
                <tspan x="24" y="314">placerat vel, tempor at </tspan>
                <tspan x="24" y="358">eros. Nunc quis </tspan>
                <tspan x="24" y="402">metus vitae lacus </tspan>
                <tspan x="24" y="446">laoreet mollis.</tspan>
            </text>
            <text id="Some" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#000000">
                <tspan x="441" y="270">Some</tspan>
                <tspan x="441" y="314">box</tspan>
            </text>
            <text id="Some-2" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#000000">
                <tspan x="441" y="676">Some</tspan>
                <tspan x="441" y="720">box</tspan>
            </text>
            <text id="Traditional-baseline" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="18" font-weight="260" fill="#000000">
                <tspan x="24" y="77">Traditional baseline grid which does have problem with aligning boxes:</tspan>
            </text>
            <text id="RedGreenGrid—a-tradi" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="18" font-weight="260" fill="#000000">
                <tspan x="24" y="527">RedGreenGrid—a traditional (print) baseline grid (green) + a web-like line-height grid (red)</tspan>
            </text>
            <path d="M0.5,137.5 L728.568665,137.5" id="Line" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,181.5 L728.568665,181.5" id="Line-2" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,225.5 L728.568665,225.5" id="Line-3" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,269.5 L728.568665,269.5" id="Line-4" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,313.5 L728.568665,313.5" id="Line-5" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,357.5 L728.568665,357.5" id="Line-6" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,401.5 L728.568665,401.5" id="Line-7" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <path d="M0.5,445.5 L728.568665,445.5" id="Line-8" stroke-opacity="0.249433877" stroke="#00A6FF" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
            <text id="Lorem-ipsum-dolor-si-2" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="36" font-weight="260" fill="#000000">
                <tspan x="24" y="588">Lorem ipsum dolor sit </tspan>
                <tspan x="24" y="632">amet, consectetur </tspan>
                <tspan x="24" y="676">adipiscing elit. Nulla </tspan>
                <tspan x="24" y="720">orci eros, rhoncus a </tspan>
                <tspan x="24" y="764">placerat vel, tempor at </tspan>
                <tspan x="24" y="808">eros. Nunc quis </tspan>
                <tspan x="24" y="852">metus vitae lacus </tspan>
                <tspan x="24" y="896">laoreet mollis.</tspan>
            </text>
            <g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 586.000000)" stroke-opacity="0.249433877" stroke="#6AB82E" stroke-linecap="square">
                <path d="M0.5,1.5 L728.568665,1.5" id="Line-16" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,45.5 L728.568665,45.5" id="Line-15" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,89.5 L728.568665,89.5" id="Line-14" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,133.5 L728.568665,133.5" id="Line-13" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,177.5 L728.568665,177.5" id="Line-12" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,221.5 L728.568665,221.5" id="Line-11" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,265.5 L728.568665,265.5" id="Line-10" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,309.5 L728.568665,309.5" id="Line-9" sketch:type="MSShapeGroup"></path>
            </g>
            <g id="Group-2" sketch:type="MSLayerGroup" transform="translate(0.000000, 552.000000)" stroke-opacity="0.249433877" stroke="#FF00D1" stroke-linecap="square">
                <path d="M0.5,45.5 L728.568665,45.5" id="Line-16" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,1.5 L728.568665,1.5" id="Line-17" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,89.5 L728.568665,89.5" id="Line-15" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,133.5 L728.568665,133.5" id="Line-14" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,177.5 L728.568665,177.5" id="Line-13" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,221.5 L728.568665,221.5" id="Line-12" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,265.5 L728.568665,265.5" id="Line-11" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,309.5 L728.568665,309.5" id="Line-10" sketch:type="MSShapeGroup"></path>
                <path d="M0.5,353.5 L728.568665,353.5" id="Line-9" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </g>
</svg>