Mika Engineering

Design to code for designers & agencies

Your design. Exactly as drawn.

Figma, XD or Sketch in. Custom code out. No theme, no builder, no plugins in between.

Send a design file See what code changes
Themes & plugins
0Nothing decides your layout except your file.
Subscription
0 €/ moPay for the build. Hosting is the only running cost.
The code
YoursOwned by your client. Any host, any developer.
Replies
Same dayUsually. From the person who builds it.

What custom code does for your design

Not the theme’s version. Yours.

Six details a theme rounds off. All live — try them.

01

Fluid type

Your scale, at every width.

Displayclamp(34, 10cqi, 112)now —

Spacing survives.

Headingclamp(19, 3.2cqi, 34)now —

Every size between your two artboards.

Bodyclamp(14, 1.55cqi, 18)now —

Measure and leading hold at every width — no jump at 768 pixels.

Resize the window

02

Free layout

Overlaps and offsets, straight from the artboard.

Issue 04 · Workshop

Form follows file.

Fig. 1 — image runs under the headline, cols 1–8

Headline on cols 6–12, three columns over the image.

Hover — the grid appears

04

Nothing jumps

Space reserved before images arrive.

Animation: on the left the image fades into space that was reserved, the text stays put. On the right the image appears late and pushes the text down.

Custom build
Theme + builder

Page weight: [xx KB] vs. [x.x MB]

Watch the right side

05

Your breakpoints

Rearranged, not squashed.

Container width
Spring collectionThree layouts, one component.
MaterialsLinen, oak
Made inSchwerte
ShipsWithin the EU

Switch the width

06

One token, whole system

Change four values, restyle everything.

Palette
AtelierWorkAboutContact
New season

Quiet objects, made well.

Same markup. Four tokens changed.

View collectionVisit the studio
/* tokens.css */
:root {
  --bg: ;
  --surface: ;
  --ink: ;
  --accent: ;
}

Pick a palette

None of it is a plugin. All of it runs on this page.

Send a design to try it

Process

File in. Site out.

  1. 01

    You send the file

    Figma, XD or Sketch link, plus whatever content exists.

  2. 02

    I flag the gaps

    Missing states, unclear breakpoints, edge cases — before any code.

  3. 03

    First page as pattern

    One page fully built on the preview. We settle details once.

  4. 04

    Every page and state

    Built on the agreed pattern, visible as it comes together.

  5. 05

    Handover

    Uploaded to the host, or delivered as files. Editor if wanted.

client.concepts.mika-engineering.com

Private, password-protected preview for the whole build.

Selected work

Shipped, without names.

Anonymised. Walkthroughs on request.

Industry · Editor · Forms

Machine shop website

Editable with the CMS, page templates, and an enquiry form with drawing upload.

Education · DE / EN

Training academy website

Bilingual German and English site, with the editor for the team’s own updates.

After launch

It belongs to your client.

  • OwnershipAll source code, fully ownedAny host, any developer.
  • Running costsNo subscriptionHosting is the only running cost.
  • Optional editorLightweight, my own CMSTexts, images, pages editable. Design protected. Versions, 2FA.
  • Pricing[price from …]Quoted per project after I’ve seen the file.

Start a project

Send the file. Get it as drawn.

A link and a few lines are enough. Answers usually the same day.

hello@mika-engineering.com

One person in Schwerte, Germany. Happy to sign an NDA before you share files.