Design
Two worlds. One standard.
The system behind this site.
Colours, type, layout, components, motifs, voice. Published so it can be checked, reused and held to.
The idea behind the look
This brand is editorial, not promotional. It looks like a well-set magazine: generous space, little colour, large serifs, quiet capitals. It does not shout, it states. The reference is concrete, paper and ink.
Three words every decision is measured against: calm (nothing blinks, nothing pushes), precise (every line has a reason) and personal (first person, real story, no corporate speak). If an element fails one of the three, it does not go in.
This is the brand
- Chapter logic: everything is a numbered, named chapter
- Two worlds visible: Zürich and Prishtina side by side
- Typography carries the design, not imagery
- One red, used sparingly, always with meaning
- Hand-drawn line motifs as the only illustration
This is not
- No gradients, no shadows, no rounded cards
- No stock photos, no icon libraries
- No second accent colour, no blue
- No emojis, no exclamation marks, no buzzwords
- No "Hi, I’m ..." tone, no startup jargon
Colour
Four colours, no more. Stone and Bone are the surfaces, Ink is the voice, Charcoal is the body. Red is never a fill: it lives in type, lines and marks. Rule of thumb: at most three alternating bands per page.
| Pairing | Where | Rule |
|---|---|---|
| Red on Stone | Hero, wordmarks, statements | The signature pairing. Large type and labels only. |
| Charcoal on Stone | Body text inside Stone bands | Reading text in a Stone band is always Charcoal, never red. |
| Charcoal on Bone | Prose, lists, index | The default reading pairing. |
| Bone on Charcoal | Footer, inverted buttons | Only at the bottom, or as hover state. |
| Lines | Rules, frames, motifs | 1px, Charcoal at 15 to 35 % opacity, or red for motifs. |
Type
Two typefaces. Playfair Display (400, regular only) for everything large and narrative. Helvetica Neue Light (300) for everything functional. No bold, no italics except inside quotations. Wide tracking on capitals, tight tracking on wordmarks.
Prose is where the story lives. Fifteen pixels, light weight, generous line height, never wider than 620 pixels. Paragraphs are short. One idea per paragraph. The voice is first person, direct, without exclamation marks.
| Writing | Rule |
|---|---|
| Name | Fisnik Salihu. In header and labels lower case: fisnik salihu. Never all caps in running text. |
| Places | Zürich with umlaut. Prishtinë in header and footer, Prishtina in English running text. St. Gallen with dot and space. |
| Companies | the eksperts (lower case), HYPOTEQ AG, CAAIE, PAGEMAKER24, DOCUVISIO, SCHULPILOT, ejaj.ch. |
| Punctuation | No em dash in running text: comma, colon, parenthesis or a new sentence. The dash lives only in labels such as "chapter 01 — beginning". |
Grid and bands
The site is built from full-width horizontal bands. Each band has one colour, one chapter label, one large line of type and, optionally, prose. Bands alternate between Stone and Bone; Charcoal only as footer.
| Token | Mobile (< 800px) | Desktop (≥ 800px) |
|---|---|---|
| Band padding | 104px top, 20px sides, 72px bottom | 150px top, 60px sides, 110px bottom |
| Header | Name left, hamburger right | Name left, clock and menu right |
| Hero | Brand index below the statement | min-height 92vh, brand index bottom right (300px) |
| Text widths | Prose 620px, statement 760px, sub 430px, intro quote 660px | |
| Breakpoint | One only: 800px. | |
| Motifs | Absolutely positioned, mostly top right, 90 to 200px wide, opacity 8 to 85 %, slight rotation. At most one per band. | |
Components
Every building block, rendered live. Anything new is a combination of these, not an invention.
Salihu
Fixed. Hides on scroll down, returns on scroll up. Menu links underlined. Mobile: hamburger with full-screen Bone overlay, menu in Playfair 34px.
Outline button: 1px Charcoal, 15px 30px, 11px caps, .2em. Hover inverts. Text link: 11px caps, 1px underline. Filled buttons are never the default.
Red numbers 9px, names 11px caps, 1px rules at 35 %. Five entries at most.
Red number, Playfair name, sector tag right in caps. Alphabetical. Mobile: tag below the name.
I am Fisnik Salihu, a digital entrepreneur based between Zürich and Prishtina.
”Playfair quotation marks in red, text Charcoal. On the homepage two columns, portrait on the left.
Every band starts like this: label, then statement or wordmark. Always.
hello@fisniksalihu.com · linkedin · book a call
no cookies · no tracking · no data stored.
Line motifs
The only form of illustration: hand-drawn-looking SVG lines, 2px, round caps, no fill, in red or Charcoal. Each motif tells something from the story (plis, kilim, kulla, mountains, bridge) or from the work (circuit, document, layers). New motifs follow the same stroke logic.
Photography
Few, real pictures. One or two portraits across the whole site. No stock, no symbolic imagery. Colour stays, but is pulled back so the picture sinks into the surface instead of jumping out of it.
| Rule | Detail |
|---|---|
| Format | 3:4 portrait. Square only as profile picture. |
| Treatment | Always with a 1px frame and a caption. Never cut out, never round, never with shadow. |
| Resolution | At least 1000px wide, JPEG quality 85 to 88. |
| Consistency | The same portrait everywhere it appears. |
Voice
The brand speaks in the first person: calm, direct, concrete. It tells what happened and what follows from it. It claims little and shows much.
This is how it sounds
- "I create digital solutions for real problems. I grow through challenge. I teach others to do the same."
- "Building something? Let’s talk."
- "Different worlds, same standard."
- Short sentences. One thought per paragraph. Rhythm through repetition.
- Honest mistakes and learning curves instead of success prose.
This is how it does not
- "A passionate, results-driven visionary ..."
- "We revolutionise / disrupt / transform ..."
- Exclamation marks, emojis, superlatives
- Collective claims about nations or groups
- Passive voice, nominalisations, run-on sentences
Beyond the website
Same four colours, same two typefaces, same chapter logic. One example for slides, one for a social visual.
That is exactly why it works.
| Application | Rule |
|---|---|
| Slides | 16:9, one band per slide, chapter label top left, one statement in Playfair, 10px footer line. No bullet lists: numbered lines in index style instead. |
| Social visual | 1:1 or 4:5, Stone or Charcoal, hook in Playfair, small sender line. At most one motif. |
| Documents | Bone paper, Charcoal text, Playfair titles, red chapter labels. Page numbers as 01, 02 in red. |
Tokens
:root {
--stone: #ddd5c8;
--ink: #c1272d;
--bone: #f5f3ef;
--char: #1f1c1a;
--txt: #161311;
--line: rgba(31,28,26,.22);
--ff-serif: 'Playfair Display', Georgia, serif;
--ff-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--wordmark: clamp(44px, 13vw, 148px);
--statement: clamp(20px, 5.2vw, 44px);
--label: 10px; /* .18em, uppercase */
--sub: 11px; /* .05em, uppercase */
--prose: 15px; /* line-height 1.9, max 620px */
--band-pad-m: 104px 20px 72px;
--band-pad-d: 150px 60px 110px;
--bp: 800px;
}
Google Fonts: Playfair Display 400. Helvetica Neue is a system font; fallback Helvetica / Arial.
Let’s
talk.
For projects, partnerships, speaking or teaching: one conversation, no pitch. Thirty minutes, and you will know whether we should work together.