Pistachio the front end framework and pattern library for graze.com



    We use one font at three weight; bold, regular, light and italicise for emphasis. Our typographic elements have set margins to ensure consistency. Most modules such as page section will remove top margin from the first child element and bottom margin from the last child element to ensure consistent spacing.

    The base font on the html element is set to 62.5% in order to make using REM easier. The body font size is then set to 1.8rem (18px).


    Headings should always be lowercase and this is enforced via CSS. Headings can have commas, but not full stops. An exception is made when a person's name or brand is mentioned. Enforced lowercase can be removed by using the class .name.

    page heading

    32px (3.2rem) / sofia pro


    subpage heading

    28px (2.8rem) / sofia pro


    section heading

    24px (2.4rem) / sofia pro


    sub section heading

    20px (2rem) / sofia pro


    sub sub section heading

    18px (1.8rem) / sofia pro


    sub sub section heading

    16px (1.6rem) / sofia pro


    heading with meta text

    Sometimes you want supplementary or "meta" text next to a heading. The .heading-with-meta class will assist with this.

    your basket

    (12 items)

    <h1 class="heading-with-meta">your basket</h1>
    <p class="meta">(12 items)</p>

    paragraphs and additional styles

    Lead paragraph, often used for an opening summary.

    <p class="lead">...</p>

    Strong for bold copy or form labels.


    This is our standard paragraph and base font size.


    Muted or less important text.

    <p class="muted">...</p>

    Additional guidance information relating to nearby content.

    <p class="meta"><span class="fa fa-question-circle"></span> ...</p>

    Blockquote with optional footer.

    Lee Jordan
            Blockquote with optional footer.
            Lee Jordan

    Lead blockquote with optional footer.

    Lee Jordan
    <blockquote class="lead">
            Lead blockquote with optional footer.
            Lee Jordan

    cursive for captions and voice

    <p class="voice">...</p>

    Small for legal copy, disclaimers and copyright information.



    <p class="monospaced">...</p>


    Our base font size is 16px by default and 14px when the viewport is below 768px wide.

    Paragraphs should have a maximum width of 555px to ensure an optimum line length of around 75 characters.

    Avoid center aligned paragraphs.

    heading text image replacement

    We prefer this method for using typographical images (preferably svgs) as a heading element.

    flapjacks are here!

    <h3><img src="/images/banners/flapjack-banner.svg" class="img-responsive" alt="flapjacks are here!"></h3>

    content example


    Intrinsicly exploit virtual infomediaries vis-a-vis equity invested processes. Interactively iterate error free.

    integrate cross functional

    Synergistically disseminate optimal expertise whereas state of the art strategic theme areas. Monotonectally mesh out-of-the-box imperatives before 24/7 potentialities. Rapidiously productize team building portals with seamless innovation. Conveniently. Efficiently provide access to synergistic.

    Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway.

    Lee Jordan

    Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.