harambasic-design

name	harambasic-design
description	Use this skill to generate well-branded interfaces and assets for Harambasic Consulting (the independent AI/automation/product practice of Luka Harambasic), either for production or throwaway prototypes/mocks/etc. Contains the essential design guidelines, colors, type, shapes, logo assets, and the dark-theme derivation used on harambasic.de.
user-invocable	true

Harambasic Consulting - design system

A personal brand system for the independent practice of Luka Harambasic (AI adoption, automations, internal tooling, product management). The defining fact: it's one person, and it always will be. The logo is literally Luka's face, the voice is first-person "I", and everything favours the warm, exact, human feeling of working with a single trusted expert - not an agency.

Positioning in one line: I help you put AI to work.

All design tokens live in tokens.css in this skill (self-contained, no imports). Logo assets live in assets/. Read both before designing anything.

Quick orientation

• Two hero colours: aubergine ink #2d0a2e + soft pink ground #ffedf9. Honey #e0a24a and clay #c76b4e are the only accents - a little goes a long way.
• Type: Newsreader (serif headlines, weight 500), Hanken Grotesk (sans body/UI, 400–700), IBM Plex Mono (uppercase eyebrows/labels only, tracked 0.2em).
• Signature move: primary buttons are aubergine filled with pink type - the logo's colour relationship, inverted, as an interaction.
• Feel: editorial, warm, premium-print. Flat colour blocks, fine hairline rules, generous whitespace. No gradients, no texture/grain, no emoji.

Colour rules

• Use the semantic aliases in tokens.css (--text-body, --surface-page, --accent, --focus-ring…) before raw scale values (--aub-900).
• Pink is a full-bleed ground, never a saturated accent. Aubergine is the ink: lines, type, dark sections.
• Honey: premium emphasis, CTAs on dark grounds, focus rings, selection. Clay: rare secondary warmth (required-field marks).
• Neutrals are warm and faintly mauve; shadows are always aubergine-tinted, never grey.
• On ink (#2d0a2e) grounds: body text --rose-100 #ffedf9, muted #c9a6c4, eyebrows/italics --honey-400 #e8b366.

Dark theme (site extension)

The original system defines no dark mode; harambasic.de derives one from the ink surfaces (verified WCAG AAA on #2d0a2e):

Role	Value	Contrast
Page ground	#2d0a2e (deepest sections #16041a)	-
Primary text	#ffedf9	15.7:1
Muted text	#c9a6c4	8.2:1
Accent / italic emphasis / links	#e8b366 (honey-400)	9.3:1
Borders	rgba(255, 237, 249, 0.12)	-
Raised surfaces	#3c133d (aub-800)	-

Type rules

• Headlines: Newsreader 500, sentence case, text-wrap: balance, tracking -0.022em (display) / -0.012em (headings). Italic segments inside headlines colour-shift to --aub-600 #653366 on light grounds, --honey-400 #e8b366 on ink.
• Body/UI: Hanken Grotesk 400 (max weight 700 - the family has no 900).
• Eyebrows/metadata: IBM Plex Mono, uppercase, letter-spacing: 0.2em, size ~12–14px, colour --text-muted. This is the only uppercase in the brand. A short 2px ink rule (54–64px wide) is a recurring accent beneath eyebrows.
• Fonts are self-hosted woff2 (no CDN). On harambasic.de: public/fonts/ + src/styles/fonts.css. Weights: Newsreader 400/400i/500/500i, Hanken Grotesk 400/400i/500/600/700, IBM Plex Mono 400/500 (also the code font).

Shape, surface & motion

• Radii: 4 / 8 / 12 / 18 / 28px; --radius-xl: 28px echoes the logo card (hero surfaces, avatars - avatars are a 26% squircle). Buttons are pills (999px).
• Cards: soft --shadow-sm + inset hairline (--ring-hairline). Hover = small lift (translateY(-2px)) + deeper shadow. Press = scale(0.985). No bounces.
• Motion: cubic-bezier(0.22, 1, 0.36, 1), 120–220ms.
• Focus: honey ring (0 0 0 3px rgba(224, 162, 74, 0.45)).
• Callouts: tinted surface + circular icon chip - never the coloured-left-border trope.
• Icons: Lucide-style 2px rounded-join line icons, stroke="currentColor". Never mix filled and stroked sets. Never emoji as iconography.

The mark (logo)

File	What it is	Use on
assets/logo.svg	Vector mark: aubergine portrait on pink rounded card, self-contained	anywhere (header, favicon, social) - the default
assets/logo-mark-transparent.png	Raster mark, ground knocked out	light surfaces (pink, paper, white)
assets/logo-portrait.png	Raster mark with pink ground baked in	pink backgrounds

One rule: the mark always lives on its pink ground. On dark/ink surfaces use the self-contained SVG or place the transparent mark on a small pink rounded tile. Never invert or recolour the portrait - it reads as uncanny.

The wordmark is always typeset, not a file: Newsreader medium "Harambasic" (or the full name in context) + optionally IBM Plex Mono uppercase descriptor.

Voice - how the brand writes

• First person singular - "I", never "we". Address the reader as "you".
• Sentence case everywhere (headlines, buttons, labels). Uppercase only in mono eyebrows.
• Short sentences, concrete nouns ("internal tool", "workflow map" - not "solutions", "synergies"). Real, modest numbers ("two or three workflows", "six weeks").
• Warm, candid, understated. Fragments are fine. No em dashes (use commas, colons, or periods instead), no buzzwords, no exclamation marks, no emoji.
• Sounds like me: "I'll find the two workflows worth automating, then build the tooling so they actually stick." Not me: "We leverage best-in-class AI solutions to drive synergistic transformation."