Brand Kit

The tomas.tech identity

A personal name, a recognisable face, and a place for the work. The lower-case wordmark and portrait connect the website to Tomas Jurkevičius, engineer and maker.

tomas.tech

ENGINEER & MAKER

Portrait avatar

The compact image used in the site header. 120 × 120px, WebP.

WebP

Vector portrait

The original scalable artwork behind the portrait studies. SVG.

SVG

For questions about using the identity, get in touch.

An engineer’s notebook

Visible structure, quiet surfaces, and room for the work. A small set of decisions connects the projects, writing, and interactive studies across this site.

Structure stays visible

Align to shared columns. Use rules to show how things belong together.

Reading comes first

Keep text still, lines comfortable, and background detail quiet.

Detail has a purpose

Use drawings to explain construction and accent colour to identify meaning.

The visitor has control

Make light, dark, and reduced-motion experiences equally complete.

Personal, precise, curious

Write like the person behind the work. Explain what something does, share the decisions that matter, and leave room for the next question.

Speak directly

Use familiar words and active sentences. Name the thing a reader can do next.

Show the work

Describe the actual project, experiment, or observation. Let concrete details carry the claim.

Leave room to learn

Say when an idea is evolving. Curiosity can be confident without pretending every question is settled.

Colour has a job

Warm paper and cobalt in light mode; charcoal and lavender in dark mode. Choose a colour by its role so the same component works in either theme.

Choose the surface before the colour

• Canvas: leave reading and navigation on the page background.
• Surface: give artwork, tools, and documents a solid field.
• Accent: identify an action, a selected state, or meaningful drawing detail.

--paper aliases --surface; --primary-hover aliases --accent-soft. The footer deliberately reverses the relationship: an accent field with canvas-coloured ink.

Two voices, a clear hierarchy

Geist Sans carries the reading. Geist Mono carries the measurements. Give each role a consistent size and rhythm, then let the difference in scale do the work.

Keep prose near a readable measure: these reference pages use 68ch, while articles use a 40rem reading column. Titles balance across lines; body copy stays left-aligned. Shared title sizes adapt to the viewport and the individual composition.

Space makes relationships visible

Use smaller spaces to connect related elements and larger spaces to separate ideas. The site builds that rhythm from a 4px scale, a shared column grid, and a few responsive insets.

Three kinds of space

Inset

Space inside a panel. Content sits 28px from the edge on desktop and tablet, 20px on mobile.

Gap

Space between related elements. Editorial columns use 24px, reducing to 16px on mobile.

Margin

Space outside a composition. The shell uses responsive outer gutters and stops growing at 90rem.

The spacing scale

Each token name is a multiple of 4px at the default browser font size. Reuse these steps instead of inventing a new distance for each component.

--space-1

4px

Fine adjustments

--space-2

8px

Icon-to-label gaps

--space-3

12px

Compact control padding

--space-4

16px

Mobile editorial gaps

--space-6

24px

Desktop editorial gaps

--space-8

32px

Reading offsets and insets

--space-12

48px

Mobile section spacing

--space-16

64px

Desktop section spacing

--space-20

80px

Large composition spacing

--space-24

96px

Largest scale step

Responsive layout aliases solve different jobs: --panel-inset is 28/20px; --grid-gap is 24/16px. The shell has 12, 8, or 4 columns, with breakpoints at 1100px and 760px. Outer gutters are 24px through 760px and 16px through 480px.

Familiar parts, consistent behaviour

Destinations are links; actions are buttons. Shared components carry their own geometry and interaction states, so the same action feels familiar wherever it appears.

Try the real states

These controls change the whole site and stay in sync with the header. Use Tab to inspect focus, then Enter or Space to activate them.

Draw, assemble, settle

Movement explains a change or reveals construction. Controls respond quickly, drawings take more time, and ordinary reading text stays still.

The background follows its own slower timeline. It pauses in hidden tabs; offscreen studies skip idle work. App or system reduced motion shows the complete resting state without movement.

Access is part of the system

Presentation and interaction are checked together. A beautiful state is only useful if someone can reach it, understand it, and leave it.

Make the structure readable

Use semantic landmarks, one page title, ordered headings, and a skip link. Keep the complete content in static HTML.

Make every action reachable

Keep keyboard order logical, focus visible, and control names useful. Test the target as well as its icon.

Explain state in more than colour

Pair colour with labels, rules, icons, or pressed and current-state attributes.

Respect the visitor’s settings

Start from system theme and motion preferences, preserve explicit choices, and keep reduced-motion content complete.

Validation includes narrow and wide screens, both themes, keyboard interaction, and app/system reduced motion. These are implementation practices, not a claim of independent accessibility certification.

From a rule to a working page

Shared tokens define the values. UI components define their behaviour. Page features arrange them around the work. Next.js, React, TypeScript, Tailwind CSS, and MDX turn that system into statically exported pages.

1. Choose the role. Start with a semantic colour, type role, or spacing token.
2. Use the shared part. Reuse buttons, tooltips, cards, and content layouts before adding a variation.
3. Check the composition. Review the real copy, keyboard path, themes, and responsive states.

This is a living reference to the website, not a separate component library. See the website project for the broader design and build.