Skip to content
Svilenković Studio
SR · Srpski
Menu Close

TYPE REACTORSYSTEM ONLINE

A letter becomes a system. The system becomes an experience.

Website design and development where typography, layout, motion and code share one job: make the business clear, distinctive and easy to contact.

Start a project Enter the type lab

The idea reactor

One visual signal moves through the entire website: from the first letter to the grid, the interaction and the finished business flow.

  1. Typography in your own voice

    The choice is more than a “nice font”: tone, readability, Serbian characters and behaviour across screens all matter.

  2. A layout that directs attention

    Hierarchy, rhythm and space give each message the right position without relying on template sections.

  3. Motion that explains change

    Scroll connects two meaningful states: before and after, material and result, question and decision.

  4. Colour that passes the test

    The palette starts with identity, while every text and background pair remains readable.

  5. A mark that survives every scale

    A header logo, favicon, share image and app icon are not the same file reduced four times.

  6. 3D only when it carries the idea

    A scene stays when it explains something and a phone can support it; otherwise a lighter method takes its place.

Selected work

Projects where design solved a specific problem, from a multilingual ballet school to an industrial product catalogue.

  1. Diamond Lux Kopaonik homepage: a large blue Diamond Lux title, a transparent 3D diamond and snow-covered mountains in the background. Diamond Lux Kopaonik

    On desktop, a WebGL diamond follows the page scroll, deliberately without a post-processed image, the most expensive part of the scene.

  2. Medica Centar homepage: a heading about the clinic in Niš with two words in green italics and a photograph of the clinic. Medica Centar

    A clinic website could not sound like a shop. A calm tone shaped the layout and typography, while the palette was reduced to a single accent.

  3. Denis Market 97 homepage: a large white heading on a dark green background, with photographs of supermarket shelves and pastry sheets. Denis Market 97

    Fraunces for headings and Manrope for text, both self-hosted, with light and dark themes that switch without flashing.

  4. La Sylphide ballet school homepage: a serif heading, an overline in English and Russian, and a black-and-white photograph of ballet shoes with a red detail. La Sylphide

    A ballet school in Serbian, English and Russian. The fonts are split into three subsets, so the Russian page has its letters while the Serbian page does not load Cyrillic it does not need.

  5. Jovo Lojanica Stupljanin Foundation homepage in Serbian Cyrillic: the Culture of Remembrance conference heading and a card with its date and location. Zadužbina Lojanica

    A website in Serbian Cyrillic. The language switch opens an English translation when one exists.

  6. Jupiter Planet homepage: the heading Your design. Your shirt. on a black background and a golden ringed planet. Jupiter Planet

    The configurator selects a shirt colour from a palette, while one photograph produces every shade through multiply blending.

  7. Second version of the Halo City Leskovac homepage without the 3D scene: a phone sales and repair heading and phones in five colours. Halo City Leskovac

    The WebGL crystal scene was removed in the second version, in September 2026, because the site needed to work on a phone with a slow connection.

From signal to live site

  1. Listen. What the business does, who it serves and what the visitor needs to do.
  2. Build the system. Content, type, colour, grid and motion receive clear roles.
  3. Work in the browser. You follow the real website on desktop and mobile while it is being built.
  4. Measure and repair. Keyboard, contrast, performance, no-JavaScript content and reduced motion are tested.
  5. Launch. Domain, forms, redirects and search controls are verified on the live version.

See the studio approach or start a project.

Where a polished impression often breaks

  1. A missing character

    When a font lacks a local character, the browser inserts another typeface into the word. Character coverage is tested rather than assumed.

  2. Motion that hides the message

    Content remains visible in HTML before animation. JavaScript improves the sequence without holding the message hostage.

  3. A scene that only works on a strong laptop

    The effect has a lighter path, pauses outside the viewport and respects reduced motion. The idea remains on mobile without needless weight.

D. Svilenković

Who runs the reactor

D. Svilenković handles design and development directly, from the first structure and visual system to QA and launch.

About the studio · Selected work