Brand & Digital Design
A brand that explains a complex company in one glance — and a product that people enjoy using.
Five parts of one system.
From positioning to a design system, each part builds on the one before it. A cohesive identity and clear user journeys.
- 01
Brand strategy & positioning
Who the company is for, what it stands for and how it differs, settled before anything is drawn.
Seen in AST: Positioning and site concept from the client’s brief.
- 02
Identity & art direction
The wordmark, palette, type and imagery rules that make the brand recognizable.
Seen in NADIIA: Visual identity: wordmark, palette, type, icon set.
- 03
UX research & flows
Who uses the product, what they came to do and the shortest honest path through it.
Seen in AST: Three audiences, one front door.
- 04
UI design
Screens and components built on the identity and specified for development.
Seen in AST: Homepage, catalog, category pages, dealer hub.
- 05
Design systems
Tokens, components and guidelines kept in one place, so a growing site does not drift.
Seen in AST: Design system (tokens, components, guidelines).
Built from real tokens.
The studio’s official mark, palette and type, shown at the values the site is rendered with. The board is a twelve-column grid; its gutters and margins carry on outside it.
MarkOfficial Vector.svg, the only source of the mark
LogoOn paper
Regular 400Distinctive by design.
Medium 500Distinctive by design.
Creative enough to stand out. Technical enough to scale.
Instrument Sans, in regular 400 and medium 500, the two weights the site uses.
TypeInstrument Sans: display, heading, lede, body
- Graphite 950
#0B0C0EPage - Graphite 900
#121417Surface - Graphite 800
#1B1E22Raised - Paper
#F2EFE9Text, light surface - Muted
#9A9EA6Secondary text - Brand blue
#0276D9Mark and accent
PaletteValues read from the token file
816243248
Spacing8, 16, 24, 32, 48 px
Page marginclamp(16px, 4vw, 56px)
A typographic identity, carried through the whole site.
The palette is three families — gold, cream, brown — and the rule that shadows are always brown-tinted, never gray.
Most visits come from Instagram on a phone. The mobile composition is its own: the wordmark, one line, the booking action — then the story unfolds.Real phone captures of the live site, 2026-10-10.
- WordmarkThe identity is typographic: NADIIA set in a high-contrast serif, gold on cream, with a quiet sans for everything functional.
- Palette and lightThe palette is three families — gold, cream, brown — and the rule that shadows are always brown-tinted, never gray.
- IconsA set of 22 outline icons draws the services in the same hand.
A design system before a single page.
We built the AST design system first: a dark graphite base, warm white used once or twice per page, and gold as the only accent.
Every surface is one flat color from the ramp — no gradients, no fake machined edges — so photography of real installations carries the light.
Tokens, button states, icon sets, photography rules and motion curves live in the system; the site copies them and never edits them.
Also: ANKOM. The client’s logotype was redrawn for the screen: a heavy sans wordmark whose “O” is a six-blade iris — the diaphragm of a lens.
