Gold
#D4AF37
Accent and calls to action
It draws attention to key elements without overpowering the content.
← Back to portfolio
BrandingUX/UIWeb designDevelopmentHevelis · Piotr Sławęcki2026
Hevelis - a precise identity for complex engineering
Brand identity and a bilingual website for aerospace and embedded systems consulting. A launch-trajectory hero, a clearly structured offer, and a direct path to a project conversation.
- Brand positioning
- Logo and visual identity
- Information architecture and UX/UI
- Website design and development
- PL/EN content and navigation
- Content editing CMS
- Project inquiry form
Project at a glance
Hevelis is Piotr Sławęcki’s independent engineering practice in Kraków, working across systems architecture, embedded electronics, RF communications, and control systems. We created an identity and a PL/EN website that turns a complex offer into clear areas of support, representative engineering scopes, and a project inquiry form.
Context & problem
Hevelis is Piotr Sławęcki’s independent engineering practice. The site brings together work in systems architecture, embedded electronics, and flight systems, then guides visitors from understanding the offer to getting in touch.
The offer covers work that is hard to explain with one broad slogan. A technical team needs to see quickly whether the consulting fits its product, where support can help, and what an engagement involves.
We shaped the brand and site to make that work tangible. Instead of rocket stock photos and broad promises, the page uses a clear hierarchy, examples of engineering scope, and a restrained visual language inspired by instrumentation.
The site is available in English and Polish. It separates the approach, services, capabilities, and experience, while the contact section lets a visitor describe a project, its constraints, and its timeline.
Constraints
- Explain complex technical services with precision.
- Keep the practice personal and expert-led.
- Provide the full experience in Polish and English.
- Respect reduced-motion preferences.
- Make contact straightforward without implying unfinished features are ready.
Strategic principles
- 01
An expert practice, not an agency
The identity and copy present Hevelis as Piotr Sławęcki’s hands-on engineering practice.
- 02
A visual language for engineering
Gold accents, a trajectory chart, and small data readouts suggest a precise working environment without pretending to be a real control panel.
- 03
Lead with scope and approach
Visitors can follow the work from framing the problem through to preparing a solution for deployment.
- 04
Specifics over broad claims
Service descriptions and representative scopes show the kinds of problems Hevelis can help solve.
- 05
Make a conversation the next step
Visible contact prompts and a form that asks for project context shorten the path from interest to inquiry.
Creative direction
The identity combines technical precision with a sense of direction. A gold four-point mark beside the wordmark, a trajectory chart, and restrained typography create a distinctive motif that carries through the page to the contact step.
Brand character
- Precision
- Systems engineering
- Ownership
- Calm
- Direction
Tone of voice
Calm and specific. The copy explains problems, scope, and ways of working in plain language, keeping specialist terms where they add useful detail.
What we deliberately avoided
- Decorative space and rocket imagery.
- Generic promises about “changing the future”.
- Language that suggests a large, anonymous team.
- Invented results or client stories.
Logo story
A gold, four-point signal mark sits beside the HEVELIS wordmark. Its simple geometric form makes a navigation reference and stays legible in the header.
Signal mark
The gold four-point symbol is the graphic mark beside the HEVELIS name.
Navigation
The mark has a navigation-signal quality that complements the trajectory chart on the site.
Wordmark
A straightforward uppercase wordmark keeps a technical character without extra ornament.
The signal mark and wordmark appear together in the header. Strong contrast helps them stay legible on light and dark backgrounds.
Colour system
Warm gold highlights key actions and parts of the chart. Teal marks supporting elements, while cool backgrounds keep the interface calm and technical.
Teal
#2DD4BF
Supporting accent and data
It separates supporting information from gold buttons and headings.
Ink
#0B132B
Text on light backgrounds
Its deep tone creates clear contrast against light surfaces.
Light surface
#F1F3F6
Light theme surfaces
A cool, softened white gives the content room to breathe.
Dark surface
#141414
Dark theme surfaces
Neutral black lets light type and gold details stand out.
Typography
Geometric headings, neutral body text, and a monospace face for technical labels create a clear hierarchy.
Space Grotesk
500 · 700
Headings and brand name
Precision Engineering
Geometric letterforms give the interface a contemporary technical character.
Inter
400 · 500
Body text and form
Specialized consulting in flight systems and embedded electronics
A neutral face helps visitors scan longer descriptions and form fields.
JetBrains Mono
500 · 600
Labels and technical readouts
MISSION · SYSTEMS · DEPLOYMENT
Monospaced lettering distinguishes short labels and values from descriptive copy.
User flow
The page moves from a concise introduction through services and experience to a project inquiry form.
- 01
Understand the speciality
The headline, introduction, and trajectory chart establish Hevelis’s field of work at a glance.
- 02
See the approach
The Engineering Scope section lays out the stages of work and the questions that shape a project.
- 03
Explore the services
Service cards cover topics from systems architecture to embedded electronics, RF, and GNC.
- 04
Review the experience
The experience section introduces Piotr Sławęcki, his background, and working principles.
- 05
Start a project conversation
The form asks for project type, estimated timeline, and a description, with direct contact details alongside it.
UX/UI decisions
- Problem
- A specialist offer needs a quick introduction.
- Decision
- The first screen combines a clear headline with a trajectory chart and concise scope details.
- Rationale
- Visitors can tell immediately that the practice focuses on aerospace systems rather than general IT consulting.
- Impact
- The core speciality and primary action are visible without reading the whole page.
- Problem
- A list of services alone does not explain how a project works.
- Decision
- The Engineering Scope section presents stages and typical questions, from defining the mission to deployment.
- Rationale
- A process gives visitors context for deciding when to bring in a consultant.
- Impact
- The scope of a potential engagement is clearer before the first conversation.
- Problem
- A broad set of capabilities can be hard to scan.
- Decision
- Services are grouped into clear areas with short descriptions and examples of relevant topics.
- Rationale
- The grouping helps teams find the area that matches their problem.
- Impact
- Visitors can explore the offer in stages instead of facing a wall of technical text.
- Problem
- The work depends on trust in the person leading it.
- Decision
- The founder’s profile, experience, and working principles receive a dedicated section.
- Rationale
- A direct view of the person behind the practice helps visitors assess the working relationship.
- Impact
- The brand feels personal and credible without implying a larger organization.
- Problem
- A technical inquiry often needs more context than a basic contact form.
- Decision
- The form asks for project type, timeline, and details, with direct contact channels alongside it.
- Rationale
- A prospective client can share the essential context in one place.
- Impact
- The first exchange can begin with the actual problem and its constraints.
- Problem
- The site serves both local and international audiences.
- Decision
- The interface provides Polish and English versions with a visible language switcher.
- Rationale
- Visitors can choose their language without leaving the site.
- Impact
- The same offer and contact path are available in both languages.
Key interface sections
The mobile layout keeps the headline and chart legible while keeping contact within reach.
From design to delivery
The site combines a Next.js application, editable content, and Netlify hosting.
- Next.js and TypeScriptSite structure and typed interface components.
- Tailwind CSS and Framer MotionInterface styling and animations that respect reduced-motion preferences.
- KeystaticSite content editing backed by a Git repository.
- NetlifyHosting for the live site.
What we delivered
- 01Brand positioning and visual direction.
- 02Logo, colour palette, and typography.
- 03Design and build of the marketing site.
- 04Polish and English content and navigation.
- 05Approach, services, capabilities, and experience sections.
- 06Project inquiry form and direct contact details.
- 07Dark and light interface themes.
The key decision
The strongest result is the clear path from introduction through approach to services. The trajectory chart gives the brand a distinct character, while specific descriptions, the founder profile, and a straightforward form help visitors decide whether to start a project conversation.
Live site
Hevelis · Piotr Sławęcki
Next projectWaymark Garage - small parts, a distinctive brand
From the W mark to the parts catalogue: identity, website, and storytelling for a studio creating 3D-printed automotive solutions. Dark surfaces, a yellow accent, and real garage photography.
LET'S TALK
Let's talk about your project
Need a distinctive brand and website? Code & Visuals can design and build them as one coherent experience.