Grindwise,
brand guidelines

Visual media
and UX solutions

Made alongside the site and taken from it: every colour, size and part here is the one the site uses. When the site changes, this changes with it.

Updated 30.10.2026 · the site

01 · Colour

Two darks,
three greys,
one red

The page is a dark grey, the hero and the focus mockups’ frames a step darker. Words come in three lights, and the red only where something leads on.

The mockups’ greys

Mockups are seen in two places, each with its own steps: on the hero’s floor they sink into the dark, and beside a focus the frame is darker than the page and the words are clear. They’re no longer on the page by themselves; they’re only the source the copies are made from.

  • A mockup is a picture. Its words can’t be selected (user-select: none), and to a screen reader it is hidden or a single picture description.
  • Beside a focus a mockup’s primary button is an outline in the other button’s fill (--sk-2, 1.5 units), not a fill: its label light, its icon the other button’s grey.
  • In the first focus’s mockup everything but the headline is grey (#8e8e8a, the small words #6b6b68), so the headline leads; the small card floating by the phone has no outline; the rings behind the phone are filled but barely there: each white at 2%, so the middle, where they lie on each other, is a touch lighter.
  • Beside a focus, a mockup keeps only what the focus needs. The video focus’s has no menu, link, button, line of words or search bar: only its headline, the waves and the film running over them.
  • The grid from behind the first mockup, wherever the page has room for it: 1 px lines, 6% white, cells of clamp(48px, 4.6vw, 88px). Over the hero from under the bar to half a letter below the headline, where it fades out along a curve like the arc (lowest in the middle, higher at the sides), clear of the mockups. At the focuses, round the bottom corner of each mockup on the side of its line: tied to the corner, so it stays there on any screen, with a line through the corner itself and its size in cells (the first: 6 cells out to the left and 4 in under the mockup, 5 up and 3 down; the second: 2 in under the mockup and 8 out to the right, 3 up and 6 down behind the logos); it fades out all round; not on a phone.
  • On the hero’s floor, under the mouse, a mockup lifts a little (2.5% of a column’s width), lightens 1.6 times and casts a shadow, over 0.4 s.

02 · Type

Inter Tight,
one scale

A major third on an 18px base: every size is 18px × 1.25ⁿ, the same on every screen. The hero’s headline is semibold, like a mockup’s; the other headlines are regular and set tight.

Regular 400 Medium 500 Semibold 600 Bold 700

03 · Focus

A line that
reads on into
the headline

How the site says what we do: a faint line, a headline and a few words, with a mockup beside them. Two shapes of it.

A · Line, headline and words

Our main focus
these days

Interface and
User Experience
Design

From wireframes to a working interface.

  1. Lineh4 · 35.16 px · 400 · line height 1.15 · −0.025 em · --faint. Two short lines, broken by hand. It reads on into the headline: “Our main focus these days · Interface and User Experience Design”.
  2. Headlineh2 · 54.93 px · 400 · line height 1.04 · −0.04 em · --ink. Two or three lines broken by hand, 1.2 rem (21.6 px) under it.
  3. Wordsp · 18 px · 400 · line height 1.55 · +0.015 em · --muted. A sentence or two, up to 36 characters a line.
  4. SpacingBetween the line and the headline clamp(1rem, 2vw, 1.6rem), 18–28.8 px. The line and the headline are trimmed to their capitals (text-box), so the block starts exactly at the top of the capitals.

Where it goes

The mockup runs off the edgeThree quarters of the screen tall, a sixth of it off the right edge. The words sit in the middle of the room left of it, as far from the edge as from the mockup. Where there isn’t room, more of the mockup goes off; the words never wrap.
The next one mirrors itThe second focus: the mockup runs off the left edge, the words sit on the right.
The whole mockup, to the screen’s edgeIn shape B all of the mockup shows: it stands against the screen’s right edge, square on that side. The line sits in the middle of the room left of it, level with the mockup’s top edge, and stays put as it scrolls.
On a phone, one under the otherThe words on top, the mockup under them at full width, 24 px at the sides, 2.5 rem between.

Rules

  • Three lights. The headline white, the words grey, the line the faintest: it opens the headline, it doesn’t compete with it.
  • Breaks by hand. The line and the headline are broken by hand and never wrap further; the block is only as wide as its longest line.
  • Regular weight. In shape A nothing is bold and nothing is red.
  • One block. The line and the headline are one thought; nothing goes between them.

CSS

/* 1 line · 2 headline · 3 words */
.lead { font-size: var(--fs-h4); font-weight: 400;
  line-height: 1.15; letter-spacing: -.025em;
  color: var(--faint); text-box: trim-start cap alphabetic; }
h2    { font-size: var(--fs-h2); font-weight: 400;
  line-height: 1.04; letter-spacing: -.04em;
  margin: 0 0 1.2rem; text-box: trim-start cap alphabetic; }
p     { font-size: var(--fs-p); color: var(--muted);
  letter-spacing: .015em; max-width: 36ch; }
.focus-text { display: grid;
  row-gap: clamp(1rem, 2vw, 1.6rem); }

B · The words in the mockup

Our main focus
these days

  1. Only the lineThe same line as in shape A, alone beside the mockup, in the middle of the room. It starts level with the mockup’s top edge and stays under the bar (48 + 24 px) while the mockup scrolls by, as far as its bottom; on a phone it sits above the mockup and doesn’t stay put.
  2. The headline in the mockupIn place of the mockup’s own headline, in its type (600, −0.03 em), in the mockup’s white, #dcdcd8. In the first focus the first line is red, --accent-on-dark; in the video focus both lines are white, and the headline sits across in the middle of the part of the mockup on the screen, and halfway down the mockup.
  3. The filmIn the video focus a strip of film runs up across the mockup’s bottom right corner at 30°, out past its bottom and right edges: 176 units wide, frames of 136, six perforations to a frame. It moves on one frame every 4 s (still with reduced motion) and carries no words.
  4. The words in the mockupIn place of the mockup’s lorem ipsum, in its grey, #8e8e8a, in the page’s language.
  5. For screen readersThe mockup is a picture (aria-hidden). The real headline and words stay in the page, out of sight (.vh), so the page still has its heading.

04 · Clients

Their logos,
in white,
on the move

Between the focuses and the mockups: the clients we have worked with, in one row running slowly left.

  1. EyebrowCentred over the row, “Over the years we have worked with”, so it reads on into the logos: small, 600, capitals, +0.12 em, --muted, no dot. It is the section’s heading too (h2).
  2. LogosSix client logos (Bikeep, Flex, Pakkemeister, Dzingel, Greenware, Lumav) in the page’s white, --ink. All share one height (--k × 1.15) and each has its own width factor (--w), so none looks heavier than the rest; --k is clamp(25px, 3.64vw, 56px): 64 px tall on a wide screen, 29 px on a phone.
  3. Gapsclamp(56px, 7vw, 120px) between the logos, clamp(3rem, 6vw, 5rem) above the row and clamp(4.5rem, 9vw, 8rem) below it; clamp(2.4rem, 4.5vw, 4rem) from the eyebrow to the logos.
  4. MovementThe row is there four times over (the script copies it) and moves left by one row in 28 s, evenly, without end; four are enough for the widest screen. It stops under the mouse and stands still with reduced motion. It fades out at both ends (12%).
  5. For screen readersThe section is named by its eyebrow, “Over the years we have worked with”, each logo with its client’s name; the copies are hidden.

05 · Works

On white,
a card a piece

Between the logos and the footer: the work we have done, six samples for now. The page’s only white part; “Open Portfolio” opens them on a white sheet over the whole screen.

  1. Ground--paper #f5f5f2, the page’s white. Words in the page’s dark, --bg; the line above in the same --faint as on the dark page (large type, 3.4:1 is enough).
  2. RowThe cards sit in one row that scrolls sideways, running to the screen’s edges but starting and stopping at the frame’s; each card snaps into place. No scrollbar: on a desktop the ← → buttons move it a card at a time (greyed at the ends), on a phone a swipe. A card is clamp(270px, 28vw, 440px) wide, 78vw on a phone; gaps of clamp(1rem, 2vw, 1.6rem).
  3. CardThe card is its picture, standing (3:4), rounded like the mockups; for now a simple flat drawing in shades of the project’s own colour (two darker, three lighter and the page’s white), its main part in the upper half, clear of the words. Its words sit on it at the bottom: the category (xs, capitals), the name (h5, 600), one sentence (small) and client · year, in white, and at the very bottom the tools in small squares (40 px, rounded 10 px, 14% white, the mark in white: a sparkle for AI, Illustrator’s “Ai”, Blender’s mark). Under them a dark fade (0 → 55% black over the bottom 60%), so white words read on any picture.
  4. PortfolioOpen Portfolio opens a white sheet (--paper) that rises from the bottom over the whole screen (0.6 s). Its own bar stays at the top: the logo or “← All work” on the left, ← 01 / 06 → in the middle, × in the right corner. All the works sit in a grid of cards (four to a row, three under 1100 px, two under 860 px, one on a phone); a card (on the page too) opens its work in full: category, name, a sentence, pictures, client · year · role · duration, the challenge, solution and result, what we did, tags and tools. Esc closes it, ← → move between works, and the page under it doesn’t scroll.