Brand guidelines

How EB Atelier looks, sounds and behaves, so every page, card and file feels like one atelier.

Esmail Bahous Atelier Version 1.0 October 2026

01

Structure meets craft.

EB Atelier is the one-person practice of Esmail Bahous in the Netherlands: UI & UX design on one side, graphic design on the other.

We design products that work like systems and brands that feel made by hand. The grid keeps it honest; the craft makes people care.

Calm

Space before decoration. One idea per screen, page or poster.

Precise

Every element sits on the grid and has a reason to be there.

Warm

Plain, friendly words. Illustration and colour with a human hand.

Curious

Field research before pixels; questions before answers.

02

EB, full stop.

Two wide, heavy capitals with one dog-eared corner, a square full stop and ATELIER underneath, all measured from one golden-ratio module.

H m = H/φ³ m m W/φ W/φ²

Anatomy

  • A

    One module, from the golden ratio. The cap height of EB is H. Everything else comes from m = H/φ³: the full stop is m square, the gap from B to the full stop is m/φ, the space between EB and ATELIER is m, and ATELIER's capitals are m tall.

  • B

    EB, in Syne ExtraBold. Wide, heavy capitals with a thin-waisted E, converted to outlines.

  • C

    ATELIER. French for workshop. Geist Medium, tracked so it ends exactly at the golden section of the lockup (W/φ), aligned to the left edge of the E. Never stretched to the full width.

  • D

    The folded corner. The top corner of the E is dog-eared, like a sketchbook page you keep returning to: the work starts on paper and ends on screen. The crease is tilted like a real page (1.15 m by 0.66 m), a 1.4-unit cut frees the flap, and the flap shows the back of the page, the letter colour at 55%. You notice it on the second look.

Mark colourways

02b

The full stop moves.

Motion has one signature: the square full stop drops, lands and pops, and the page corner folds. Use it for arrivals, confirmations and small rewards, never for decoration.

Rules

  • 1

    Drop and land. The logo's full stop falls first, squashes on impact and bounces once. EB then grows out to its left; ATELIER settles last.

  • 2

    Fold. Once EB is in, the corner of the E folds down along its crease (650 ms, ease in-out). On the site, a project image dog-ears the same corner when you reach for it.

  • 3

    Pop. Every other square (headline full stops, active states, confirmations) scales from 0 with an overshoot: cubic-bezier(.34, 1.9, .64, 1), 450–600 ms.

  • 4

    Follow. On desktop the cursor is the full stop: a 12 px square that grows into a View square over images.

  • 5

    Respect stillness. With reduced motion turned on, squares appear in place and the corner is already folded.

03

Lockups and space.

Use the primary logo wherever there is room, and the mark on its own only when space is tight.

Primary logo

EB. with ATELIER. The default everywhere there is room: website, proposals, covers, business cards.

Mark

EB. on its own, for small or tight spaces: navigation bars, favicons, social avatars, watermarks.

Esmail BahousAtelier

Full name

The mark with the full name in Geist, for formal documents, invoices and contracts.

Clear space

Keep at least x clear on every side, where x is the module m: the height of the full stop. Nothing enters that space: no text, edges or images.

Minimum size

Primary logo: 96 px wide on screen, 25 mm in print, so ATELIER stays readable. Mark: 40 px wide, 10 mm in print. Smaller than that, use the app icon.

04

Fez green and copper.

The deep green of Fez tilework, warm copper from the souk, sage and ivory. Mostly ivory and paper, Fez green for weight, copper used rarely: the full stop, links and the main action.

Fez green
Brand dark, dark rooms#0F3B33 · RGB 15 59 51CMYK 85 35 65 55
Copper
Full stop on light, links, buttons#9C5A2A · RGB 156 90 42CMYK 20 65 90 20
Copper light
Full stop and accents on dark#D9935E · RGB 217 147 94CMYK 10 45 65 0
Sage
Supporting tone on dark: line art, numbers#7FA89B · RGB 127 168 155CMYK 50 15 40 5
Ink
Body text#13221E · RGB 19 34 30CMYK 75 50 65 75
Stone
Secondary text, captions#5F5E57 · RGB 95 94 87CMYK 50 42 50 35
Ivory
Alternate ground, tiles#F4F0E6 · RGB 244 240 230CMYK 3 4 9 0
Paper
Main ground#FBF9F4 · RGB 251 249 244CMYK 1 1 4 0

Proportion of use

Approved text pairs (WCAG 2.2)

Ink on Paper 15.7:1 AAA
Copper on Paper 5.1:1 AA
Ivory on Fez 10.9:1 AAA
Copper light on Fez 4.9:1 AA

Never set Copper light on Paper or Copper on Fez green as text. White on Copper buttons is 5.4:1. The CMYK values are starting points; proof against a printed swatch before a print run.

04b

Paper, mostly.

The folded corner sets the material. Everything is a sheet: laid down, stacked and turned at the corner. Glass is only a hint, over pictures.

Paper

  • 1

    Grain. Every surface carries a fine speckle and a faint fibre, felt more than seen. Dark rooms use the same grain in ivory.

  • 2

    Sheets. Tiles, the nav and the contact form are sheets: a shade whiter than the room (#FFFDF8), 14 px corners, a 1 px edge and a soft contact shadow. They lift 2 px when you reach for them.

  • 3

    Stacked rooms. Each room is laid over the one before and casts a shadow upward onto it.

  • 4

    The fold. Corners turn, always top right, with the logo's tilted crease: the E, the contact letter, and pictures when you reach for them. Never on navigation or controls. The flap shows the back of the page.

  • 5

    Ink and card stock. Buttons are printed flat in copper, with no highlights. Dark rooms are Fez green card stock, lit with a faint copper glow.

Glass, as a hint

  • A

    Only over pictures. The image viewer's controls, the before/after tags and the case-study bar. Never on sheets, text or the nav.

  • B

    Turns solid. With reduced transparency switched on, glass becomes plain paper or card stock.

05

Geist, set tight.

Geist for words, Geist Mono for small technical labels. Syne ExtraBold appears only inside the logo. All three are free under the SIL Open Font License.

Aa

Geist · 400 / 500 / 600 / 700

01 · Geist Mono

Labels, numbers, specs · 400 / 500

EB.

Syne ExtraBold · logo only, never for headlines or text

  • Display 96

    Hello.

  • Headline 72

    Made for paper.

  • Title 40

    Foodies

  • Lead 24

    Food delivery with a fast checkout.

  • Body 17

    Browsing, cart and payment flows, with quick actions one tap away.

  • Label 12 mono

    Years in design

06

Plain words, warm tone.

Write like a good designer talks to a client across the table: short, specific and kind. Name the thing, then the benefit.

Short

Headlines under eight words. One idea per sentence. A full stop is allowed in a headline.

Specific

Real names, places and numbers: "Nine products for bol.com, UK and German brands", not "lots of experience".

Human

"I" for Esmail, "the atelier" for the practice. No jargon a client wouldn't say back.

Do

Flows first. Pixels after.

Spring in a box, on recycled packaging.

Let's make something good.

Don't

Unlocking synergies through holistic, user-centric design solutions.

We are passionate about pushing boundaries!!!

Click here to learn more.

07

In use.

The system on the things people actually hold and see. Fez green gives weight; the copper full stop and the folded corner are the signature.

Business card · 85 × 55 mm · front

Structure meets craft.

Business card · back

Esmail BahousUI & UX designer · Graphic designer
behance.net/ESMAILBAHOUS
The Netherlands

Social avatar

App icon / favicon

EB Atelier app icon: the monogram in ivory, its corner folded, with a copper full stop on a Fez green rounded square.

Email signature

EB Atelier
Esmail Bahous
UI & UX and graphic design · The Netherlands

08

Please don't.

The mark only works when it's whole, upright and in its own colours.

ATELIER

Don't stretch ATELIER to the width of EB.

Don't rotate it.

Don't recolour it outside the palette.

Don't drop or move the full stop.

09

Files.

Vector masters live in assets/brand. Use SVG wherever it is accepted.