Brand & Design Guidelines | Praskla Technology

On This Page:

01.Brand Essence

Five principles govern every decision in this document. When a rule and existing code disagree, the rule wins and the code is scheduled for migration.

One brand color story

All purple tones come from the registered token set. No new hex is ever invented inline.

One neutral story

A single gray family carries every UI neutral. Other gray families are not introduced.

Tokens before literals

Any value that repeats twice becomes a token in globals.css and is referenced from there.

Content is localized

Every user-facing string passes through the English or German dictionary. Untranslated copy does not ship.

Motion is intentional

Standard durations and easings only; transform and opacity animate, layout properties never.

The studio voice

Precise, engineered, quiet — a brand that lets its work speak in a consistent voice.

02.Logo

The mark always sits on white or on brand plum. It is never recolored, never rotated, and never placed on photography without the standard plum overlay. Minimum clear space equals the height of the mark.

Horizontal lockup

Navbar, footer, documents

Download

Symbol mark

Splash, hero moments, app icons

Download

03.Color

All tokens are declared in globals.css and consumed as CSS variables or Tailwind theme utilities. Brand purple, one slate neutral ramp, and status semantics only.

Brand — Plum

#301045

Core Plum

--color-primary

CTAs, active navigation, emphasized headings

#4a1c5e

Lifted Plum

--color-primary-light

Hover state of primary elements

#1d0a2b

Midnight Plum

--color-primary-dark

Gradient endpoints, deepest surfaces

#ddbce7

Lilac

--color-brand-lilac

Accent text and details on dark surfaces

#ebdcf2

Lavender

--color-brand-lavender

Soft accent backgrounds

#f4ecf8

Tint

--color-brand-tint

Lightest section background

Signature gradient

.gradient-untitled · oklab · reserved for blend sections

#FFFFFF#B99BC1#81508F#633178#48205F#301045

Neutrals — the single slate ramp

#0f172a

slate-900

Primary body text

#334155

slate-700

Secondary body text

#475569

slate-600

Secondary body text

#64748b

slate-500

Muted and meta text

#94a3b8

slate-400

Decorative meta text

#e2e8f0

slate-200

Hairlines, card borders

#f1f5f9

slate-100

Borders, subtle surfaces

#f8fafc

slate-50

Subtle surfaces

gray, neutral, zinc and one-off hexes are not part of the system. Where they still exist in code they migrate to slate whenever the file is touched.

Functional

#059669

emerald-*

Success

#ef4444

red-*

Error

#f59e0b

amber-*

Warning

#2563eb

blue-*

Information

04.Typography

A two-font system wired through CSS variables. Headings inherit Suisse Intl automatically; everything spoken aloud is Inter. At and above 1024px the root font size scales fluidly with clamp(12px, 1.1713vw, 40px).

Primary · Suisse Intl

Smarter IT solutions, crafted.

h1–h6 · hero display · wordmark

Secondary · Inter

Paragraphs, buttons, inputs and all UI chrome read in Inter at relaxed leading.

body · controls · data

Scale

text-7xlSmarter ITHero display

text-4xlEngineering studioSection title / h2

text-xlDesign that carries the productLead paragraph

text-baseBody copy set in Inter for long reading.Paragraphs, UI

text-xsEyebrow / LabelUppercase, tracked, slate-500

Weights: font-medium for UI labels, font-semibold for sub-headings and buttons, font-bold for headings, font-extrabold for hero display only. Eyebrows are text-xs font-semibold uppercase tracking-wide text-slate-500. The Tailwind named scale is the type system — arbitrary pixel sizes are outside it.

05.Layout & Spacing

Three container recipes, one vertical rhythm, Tailwind's 4px spacing scale, and a mobile-first breakpoint model where lg is the desktop switch.

Showcase

Home and hero surfaces

w-[99%] max-w-[1720px] mx-auto

Standard

All regular sections

max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

Reading

Articles, legal, documents

max-w-3xl / max-w-4xl mx-auto

Vertical rhythm

Canonical

section content

py-16 sm:py-20 lg:py-24

Compact

section content

py-10 sm:py-14

Grid gaps: gap-4 dense, gap-6 cards, gap-8 blocks. Arbitrary spacing values such as m-[14px] are outside the system.

06.Shape & Elevation

Four radii carry the entire product; three shadow steps carry the depth. Legacy values migrate to this vocabulary whenever a file is touched.

rounded-full

stadium pill

Primary CTAs, chips, icon buttons, dots

rounded-xl

0.75rem

Cards, modals, navbar shell

rounded-lg

0.5rem

Inputs, small buttons, image frames

rounded-md

0.375rem

Badges, toggles, inline controls

Elevation

shadow-sm

Hairline cards

shadow-lg

Hoverable cards

shadow-2xl

Floating calls to action

The floating navbar signature: 0 10px 30px rgba(0,0,0,0.08) on a glass shell — bg-white/95 backdrop-blur-md rounded-xl.

07.Motion

Four tools, each with a lane: GSAP for scroll choreography, Framer Motion for component transitions, Lenis for global scroll, Three.js for hero visuals. Only transform and opacity animate.

`duration-200`	Micro-interactions, hover feedback
`duration-300`	The standard; default for all transitions
`duration-500`	Entrances and reveals
`700–1000`	Cinematic hero moments only
`ease-out / in`	Easing follows physics: out when entering, in when exiting. Linear is reserved for loaders and ambient effects.

The canonical CTA interaction: gentle scale to 105 percent with a nudging arrow. Scroll reveals travel no more than 16–24 pixels with a fade; the global page transition is the SliceRevealer in brand plum at 0.8s.

08.Z-Index Ladder

A fixed stacking contract. No values outside the ladder, and no arbitrary z-[...] outside the SliceRevealer.

z-0	Decorative section background
z-10	Section content
z-20	Sticky in-section bars
z-30	Dropdowns, in-page overlays
z-50	Navbar, modals, global ripple
z-[100] · SliceRevealer only	Page-transition slices

09.Components

Pill buttons with a nudging arrow, hairline cards that lift on hover, numbered section headers with an eyebrow. The canonical button recipe is being extracted into a shared Button primitive; until then new buttons copy it verbatim.

Buttons

Cards & sections

Eyebrow

Section header pattern

Uppercase eyebrow, Suisse Intl heading, slate subcopy. One hero per page; every section wraps in a relative container on the canonical rhythm.

Tinted surface

Card surfaces use brand tint or slate-50 — never a raw hex. Clickable cards open through the established modal pattern.

Images & icons

next/image throughout with explicit dimensions or fill, descriptive alt text and webp assets. Photography behind text always uses the overlay sandwich: var(--color-primary) wash at 80 percent plus a midnight-plum gradient. lucide-react is the icon library for product iconography; brand-specific glyphs live in shared/Icons.tsx. react-icons is deprecated and removed as the last usage migrates.

10.Architecture

Locale pages stay thin and compose domain components. Styling lives in components, never in routing. Domain components talk to each other only through shared and ui.

src/
  app/[locale]/          # routing only — pages compose components, hold metadata
  components/<domain>/   # about · careers · contact · home · projects · services · shared · ui · updates
    <SectionName>/<SectionName>.tsx   # PascalCase folder + file, barrel index.ts where used
  context/               # LanguageContext, ContactContext
  locales/               # en.ts and de.ts dictionaries, mirrored key-for-key
  services/ constants/ types/ lib/

Client components use "use client" with a default export; typed props via exported interface XxxProps; strict TypeScript with no new any.
Conditional class names merge through cn() from lib/utils.
Links are localized with localizeHref() or LocaleLink; a bare unlocalized href is a defect on /de.
No console.* in shipped code; dead boilerplate is deleted, not left dormant.

11.Language & Accessibility

Two locales served from the [locale] segment, dictionaries mirrored key-for-key, and an accessible surface by default.

Internationalization

Every visible string resolves through the dictionaries or the locale-keyed content pattern used by update articles. German runs roughly 20–30 percent longer than English, so layouts are validated in /de for overflow before shipping. Dictionary drift is a bug.

Accessibility

One h1 per page, heading levels never skip, icon-only controls carry aria-label, native button and a elements only. Plum on white and white or lilac on plum clear WCAG AA. Scrollbars are hidden globally, which makes visible :focus-visible rings mandatory. Motion degrades under prefers-reduced-motion.

12.Transition Guidance

The built surface largely honors the system. Where it diverges, migration follows this order of impact — a pull request that changes UI is checked against these guidelines before it ships.

Color consolidation

Hardcoded brand hexes migrate to var(--color-*) tokens, competing gray families collapse into slate, and one-off hexes are retired. The largest share of inconsistency at the lowest risk.

A shared Button primitive

The CTA recipe is extracted from PageHero into ui/Button.tsx with a variant prop, protecting every future rebrand tweak.

Section rhythm and containers

A dozen padding stacks and several competing max-widths converge onto the two canonical container recipes.

Scale leaks

Legacy radii, arbitrary spacing and font sizes, blanket transition-all, and off-ladder z-index values migrate to the defined vocabularies.

Dead code

Dormant boilerplate components, the unused example hook, raw image tags, and the final react-icons import are removed as files are touched.

Dictionary parity

The en and de dictionaries are reconciled key-for-key and kept that way in every pull request.

13.Quick Reference

The one-table cheat sheet for every pull request.

Follow	Avoid
`text-[var(--color-primary)]`	Inline #301045 or new purples
`text-slate-900`	text-gray-900, text-[#18181b]
`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`	Ad-hoc container widths
`py-16 sm:py-20 lg:py-24`	Bespoke padding stacks
`rounded-full / xl / lg / md`	Bare rounded, 2xl, 3xl
`transition-transform duration-300 ease-out`	transition-all duration-400
`lucide-react + shared/Icons`	New react-icons imports
`next/image with alt text`	Raw <img> tags
`localizeHref() or LocaleLink`	Raw href without locale
`Dictionary or t()-driven copy`	Hardcoded English in JSX
`Ladder 0 / 10 / 20 / 30 / 50, 100 for slices`	Any other z-index value

The living source

These guidelines are maintained as DESIGN.md in the repository and rendered here.

Download DESIGN.md