Skip to content

Design system

Every value on this page is a token. If it is not listed here, the site does not use it. Approve the direction here before the rest of the site is built on top of it.

Document
Design system
Revision
A
Date
2026-10-18
Status
For review

01

Colour

Twelve values. Black carries the page, white carries the text, gold marks what you can act on, silver is the material.

T1 Palette, with contrast measured against the page background
SampleTokenValueRoleContrast on bgOn surfaceNormal text
--bg#0A0A0BPage background. Warm black, never pure black.1.001.05Background
--surface#111113Cards and panels.1.051.00Background
--surface-2#17171AHover and raised areas.1.111.05Background
--line#26262B1px borders, rules and grids.1.311.25Decorative only
--text#EDEDEAPrimary text. Warm white, never pure white.16.8716.08AAA
--text-muted#9A9AA2Secondary text and annotation keys.7.086.75AAA
--text-dim#5E5E66Hairlines and disabled states only.3.082.94Large text only
--silver#C3C7CEThe material: metal, icons, annotation values.11.6711.12AAA
--silver-bright#E3E6EAHighlights on metal, hover on silver details.15.8115.06AAA
--gold#C9A54CLinks, calls to action, lit circuit traces.8.458.06AAA
--gold-bright#E8C872Gold on hover, focus rings, the peak of a glow.12.1911.62AAA
--signal#FFD23FOne live element per screen, such as the availability LED.13.7013.06AAA

02

Absolute maximum ratings

Limits the design never exceeds. Going past one of them is a bug, not a style choice.

T2 Design limits and how each one is enforced
ParameterMaximumEnforced by
Gold coverage10 % of the screenPixel meter in the 3D scene, e2e test from Phase 2
Signal yellow1 element per screenComponent rule, e2e test from Phase 1b
Annotation blocks3 per viewporte2e test from Phase 1b
Font families2Font loading in the root layout
Shadows and blur0Removed from the Tailwind theme, unit test
Corner radius6 pxRemoved from the Tailwind theme, unit test
Colours outside the palette0Unit test on every source file
GradientsBlack to graphite hairlines onlyUnit test on every component

03

Typography

Two families. Geist for everything people read, Geist Mono for data: numbers, coordinates, revisions.

T3 Type scale with real copy from the site

  1. display

    64–160 px

    0.90

    −4.5 %

    Geist

    Miroslav Maletici

  2. 4xl

    44–96 px

    0.98

    −3.5 %

    Geist

    From silicon to intelligence

  3. 3xl

    32–60 px

    1.04

    −3.0 %

    Geist

    I write the code that touches hardware.

  4. 2xl

    24–36 px

    1.15

    −2.0 %

    Geist

    StrawBoss

  5. xl

    20–26 px

    1.35

    −1.5 %

    Geist

    I build from the register up: firmware, AI and the apps on top, for clients and for our own products at Solemtrix.

  6. lg

    18–20 px

    1.50

    −1.0 %

    Geist

    Bale-level traceability for agricultural biomass, from field to warehouse.

  7. base

    16–17 px

    1.60

    −0.5 %

    Geist

    Since February 2026 I have been writing firmware at Axon in Timișoara. Before that I did two internships at Nokia and spent seven months as a junior security researcher at Bitdefender. Since September 2026 I have been teaching Computer Architecture labs at the Politehnica University.

  8. sm

    14 px

    1.50

    0

    Geist

    Secondary text sits one step down, in size and in colour.

  9. xs

    13 px

    1.50

    0

    Geist Mono

    REV E / 2026-09 / Timișoara 45.76° N 21.23° E

  10. micro

    11 px

    1.45

    2.0 %

    Geist Mono

    CORE 02 / In production

Character check

Romanian letters with comma below, plus the symbols the datasheet language needs. Any glyph drawn in a fallback face shows up here first.

Geist

  • Ă
  • Â
  • Î
  • Ș
  • Ț
  • ă
  • â
  • î
  • ș
  • ț
  • µ
  • °
  • ±
  • ×
  • –
  • —
  • /
  • 0
  • 1
  • 2
  • 4
  • 6
  • 7
  • 9

Geist Mono

  • Ă
  • Â
  • Î
  • Ș
  • Ț
  • ă
  • â
  • î
  • ș
  • ț
  • µ
  • °
  • ±
  • ×
  • –
  • —
  • /
  • 0
  • 1
  • 2
  • 4
  • 6
  • 7
  • 9

04

Spacing and radius

A 4px grid. Layout uses only these steps, drawn here as dimension lines.

T4 Spacing steps
SteppxremDrawn to scale
140.25rem
280.5rem
3120.75rem
4161rem
5201.25rem
6241.5rem
8322rem
10402.5rem
12483rem
16644rem
24966rem
321288rem
4819212rem

Grid

Columns
12
Gutter
16–48 px
Column gap
16–24 px
Container
1440 px
Section gap
96–176 px
Line length
62 ch

Detail A: corner radii, scale 6 to 1

Nothing on the site is rounder than 6 px. Cards use 2 px, the same as the buttons.

  • none

    0 px

  • xs

    2 px

  • sm

    4 px

  • md

    6 px

05

Controls

Three kinds of action. Gold for the one thing a screen asks you to do, a line for the rest, plain gold text for links.

T5 Button states
VariantDefaultHoverFocusPressedDisabled
PrimarySend a message, DefaultSend a message, HoverSend a message, FocusSend a message, PressedSend a message, Disabled
SecondaryDownload CV, DefaultDownload CV, HoverDownload CV, FocusDownload CV, PressedDownload CV, Disabled
LinkRead the case study, DefaultRead the case study, HoverRead the case study, FocusRead the case study, PressedRead the case study, Disabled

Try them

Use the mouse and the Tab key. The focus ring is the same everywhere.

Only used to reply to you.

Enter an email address like [email protected].

06

Components

Built from the tokens above. Each project on the site is a core on the chip, so its card carries a map of the die.

CORE 02

StrawBoss

A mobile app and a web dashboard that trace agricultural biomass from field to warehouse, bale by bale, for sustainability certification (ISCC / RED III).

Status In production

  • Next.js
  • NestJS
  • Expo
  • Supabase
  • PostGIS
  • +1 more

Solemtrix

The studio behind these projects

Solemtrix is the studio I founded: custom software and products of our own. SolCane, StrawBoss and ADMINISTRATIVO are Solemtrix products.

Founded
TODO: founding date
Focus
Software, AI, hardware
Based in
TODO: city to confirm
Available for projects

Shown only after you confirm your availability.

Tags

  • Next.js
  • NestJS
  • Expo
  • Supabase
  • PostGIS
  • BullMQ

Missing content

TODO: cane name

Anything not yet confirmed stays visible like this, so nothing gets invented.

Grain

A static noise tile over the background, blended so that black stays black. Switch it off to compare.

Tile
180 px
Frequency
0.85
Octaves
3
Opacity
0.55
Blend
overlay

07

Motion

Short, precise, and always for a reason. Four durations for change, one rhythm for the LED and three curves cover every animation on the site.

T7 Timing characteristics
TokenTimeUsed forWaveform
--dur-fast160 msHover, press, focus
--dur-base320 msState changes, paragraph reveal
--dur-slow640 msHeading decode, section change
--dur-journey1200 msCamera moves between chip layers
--dur-led2400 msSignal LED breathing, the only loop on the site

Curves

--ease-outArriving: reveals, hover in
--ease-in-outTravel: camera, fly-in to a case study
linearFlow: LED pulse, light along a trace

Samples

Nothing here moves until you ask. With motion paused, every sample shows its final state.

Heading decode

From silicon to intelligence

Paragraph reveal

Text enters once, when its layer of the chip comes into view, and never again on the same visit.

Light along a trace

08

Annotation grammar

Small monospace notes, like the margins of a datasheet. They carry real data or nothing.

Rules

  • Every value is real or marked TODO.
  • Keys in grey, values in silver, at most one value in gold.
  • Three annotation blocks per screen at most.
  • ISO dates (2026-10), en dash for ranges (2023–2024), a space before units.
  • Upper case only for identifiers: section names, REV, core numbers.

Examples

  • Section header

    Section
    01 / SILICON
    Stack
    Linux, C/C++, embedded
    Since
    2026-02
    Org
    Axon
  • Project core

    Core
    02
    Position
    Slot 2 of 8
    Status
    In production
  • Career revision

    Rev
    E
    Date
    2026-09
    Change
    MSc in AI, teaching at UPT
  • Location

    Node
    Timișoara
    Lat
    45.76° N
    Lon
    21.23° E
  • Build

    Build
    2e3459a
    Time
    2026-10-19T16:34Z
    Third-party scripts
    0
  • Live status

    Probe
    administrativo.ro
    Last check
    —
    Result
    Pending, wired in Phase 5

09

Copy

First person and concrete: what I built, with what, for whom. Pick the line that opens the site.

Positioning line candidates

  1. 01

    Firmware engineer at Axon. I teach Computer Architecture at UPT and build hardware-software products at Solemtrix.

    RomanianInginer firmware la Axon. Predau Arhitectura Calculatoarelor la UPT și construiesc produse hardware-software la Solemtrix.

  2. 02

    I build from the register up: firmware, AI and the apps on top, for clients and for our own products at Solemtrix.

    RomanianConstruiesc de la registru în sus: firmware, AI și aplicațiile de deasupra, pentru clienți și pentru produsele Solemtrix.

    Default
  3. 03

    From silicon to intelligence. Firmware by trade, computer architecture at UPT, SolCane for blind people at Solemtrix.

    RomanianDe la siliciu la inteligență. Firmware de meserie, arhitectura calculatoarelor la UPT, SolCane pentru nevăzători la Solemtrix.

  4. 04

    I write the code that touches hardware. Nokia, then security research at Bitdefender, now firmware at Axon, and Solemtrix, my software studio.

    RomanianScriu codul care atinge hardware-ul. Nokia, apoi cercetare în securitate la Bitdefender, acum firmware la Axon și Solemtrix, studioul meu de software.

  5. 05

    Firmware engineer in Timișoara. I build things that have to work in the real world: a smart cane, an HR platform, a traceability system on a farm.

    RomanianInginer firmware în Timișoara. Construiesc lucruri care trebuie să funcționeze în lumea reală: un baston inteligent, o platformă de HR, un sistem de trasabilitate într-o fermă.

Words the site never uses

A unit test fails the build if one of them appears in any message.

  • elevate
  • unlock
  • seamless
  • cutting-edge
  • revolutionize
  • solutions tailored to your needs
  • passionate
  • empower
  • leverage
  • game-changing
  • next-level
  • innovative solutions
  • lorem ipsum
  • a revoluționa
  • de ultimă generație
  • soluții personalizate
  • pasionați de