Brand Book
Masterka Brand.
A strict interactive reference protecting the Masterka digital identity. Calculated geometries, high-end styling systems, and precise editorial details harmonized for beautiful outcomes.
00 Designer DNA
Identity, context & personal creative drive
Tereza Mašková
Visual Designer & Creative Soul
Motion, Pixels & Paper
I absolutely adore motion design and animation, but I also illustrate, design websites, photograph, and am currently writing my first book.
Learning & AI Training
I love learning new skills and implementing new tools into my creative process, such as training my own custom AI models.
Petsy & Rescue Stations
I enjoy dog sitting and occasionally help as a foster caregiver for dog rescue stations — dogs are my primary personal therapy.
Tactile Creation
I also love creating with my hands and working tactilely. My forms of meditation are painting, drawing, crocheting, and ceramics.
01 Logo & Logotype
Core assets & lockups specimen
The wordmark features a dynamic signature dot that serves as the unified main brand logo. It must be used consistently for all page headers, central portfolio navigation bars, footers, and official display titles. In interactive environments, the dot **morphs** fluidly into the ✦ Star Accent on hover, symbolizing the transformation of precision into raw creative energy.
The 4-point star is a decorative creative accent. It is used for sticker animations, tactile hover interactions, play buttons, project category icons, and dynamic badge overlays. It represents raw imagination, visual chemistry, and play.
The Structural Monogram
Moving beyond static wordmarks, the Masterka identity relies on a fluid monogram logic. The organic serif curve of the M represents the designer's surname, locked with the mathematically precise star symbol.
01.6 TM Monogram
Tereza Mašková — Initial lockups
01.7 Dot → Star Morph
CSS path transition — as used in nav bar
M50 35 L60 40 L65 50...
M50 0 L61 39 L100 50...
.nav-logo:hover path { d: path(...) }
No JavaScript — pure CSS
d: property transition. The dot morphs to ✦ on hover,
symbolizing precision → creativity.
02 Color & Gradients
Accent Orange
#FF4400 • CTAs, Stars
Void Black
#0A0A0A • Dark Mode
Paper Off-White
#F4F4F0 • Light Base
Pure White
#FFFFFF • Cards
Status Green
#22C55E • Availability
Gradient Palette
Glass & Blur Effects
backdrop-filter: blur(20px)
border: 1px solid rgba(255,255,255,0.5)
backdrop-filter: blur(20px)
border: 1px solid rgba(255,255,255,0.1)
Texture & Pattern Library
Grid Light
.bg-grid-light • 40px spacing
Grid Dark
.bg-grid-dark • 40px spacing
Dot Light
.bg-dot-light • 20px spacing
Dot Dark
.bg-dot-dark • 20px spacing
Noise Overlay
.noise-overlay • SVG feTurbulence
Mouse Glow
#bb-glow • Radial gradient follows cursor
03 Typography
Masterka.
Used for primary headings, large
call-to-actions, and dramatic statements. Always use italic for extra flair.
font-serif italic text-8xl text-dark
I blend artistic intuition with technical precision. Every pixel is calculated to translate chaotic ideas into structured reality. The Manrope font provides clean, geometric legibility that balances the expressive serif.
font-body text-gray-600
font-mono text-xs uppercase tracking-widest
"Design is not just what it looks like, it's how it works."
— Quote Citation| Token | Font Family | Scale / Styling | Sample Output | Usage Context |
|---|---|---|---|---|
| Display H1 | Instrument Serif (Italic) | text-8xl md:text-9xl leading-[0.88] | Masterka. | Primary Hero Headers |
| Editorial H2 | Instrument Serif (Regular) | text-4xl md:text-5xl leading-tight | Case Studies & Titles | Case Study Sections |
| Bento Title H3 | Manrope (SemiBold) | text-xl md:text-2xl font-bold tracking-tight | Bento Box Feature | UI Grid Subheadings |
| Body Narrative | Manrope (Regular) | text-sm md:text-base leading-relaxed | Calculated pixel structures... | Description & Copywriting |
| UI Specs / Mono | Victor Mono (Medium) | text-[9px] to [11px] uppercase tracking-widest | YEAR: 2024 / BRANDING | Metadata, Badges & Labels |
Turning complex ideas into visual reality.
text-gray-300, text-accent, italic text-dark
I turn digital chaos into structured beauty and build experiences that scream elegance.
bg-accent/20 text-accent px-2 py-0.5 rounded-sm
04 Layouts & Grids
Background Grids (Light & Dark)
.bg-grid-light
.bg-grid-dark opacity-30
.bg-dot-light
.bg-dot-dark opacity-50
feDisplacementMap Wavy Grid Overlay
Case Study Layout (Typography)
A visual tribute to urgency & elegance. We crafted a prestigious identity for the 20th anniversary of the regional emergency services union.
The challenge was to balance the clinical precision of medical services with the celebratory atmosphere of a gala. The solution lay in high-quality materials, refined typography, and a "medical blue" that feels deep and ceremonial rather than sterile.
Bento UI Layout
Large Bento Block
Used for primary features, profile intros, or featured case studies.
Dark Block
Gradient Block
CSS gradient with overlay grid texture.
Outline / Spaced
Dashed border layout with generous padding and content gaps.
Wide Block
Good for stats or horizontal lists.
Grid & Aspect Ratio System
Ideal for screen mockups, desktop layout bento headers, and horizontal images.
Recommended for high-end editorial book lookups, vertical grids, and mobile banners.
Used for catalog listing items, editorial prints, and high-impact bento cards.
Standard ratio for medium-width grid objects, stat columns, and design specimens.
gap-6 (24px) / gap-8 (32px)
Consistent gaps between bento grids for uniform breathing space.
px-6 (24px) / py-32 (128px)
Main container paddings to ensure visual margin consistency on all layouts.
rounded-[2.5rem] (40px)
Pronounced organic corners used on all main cards to soften geometric grids.
Massive Footer CTA
LET'S TALK
05 UI Components & Specimens
Interactive primitives & visual states
class="bg-accent text-white px-8 py-3 rounded-full"
backdrop-blur-md border border-white/5
Relative path has been copied to your design sandbox.
Always use Instrument Serif italic for typography contrast.
Spacing Scale Tokens
Easing & Motion Reference
gsap.to(el, { ease: "back.out(1.4)" })
Icons Asset Matrix
Specimen 05.6 / Bento Footer Grid (Light Theme Specimen)
Specimen 05.7 / Custom Cursor Liquid Morphing Sandbox
Hover over these sandbox triggers to test liquid morphing states, text overlays, and
magnetic snap forces driven by cursor.js.
Specimen 05.8 / Mobile Navigation Bar & Overlay Menu
A visual layout representation of the mobile navigation bar and menu overlay used on smaller viewports.
06 Illustration Dataset Explorer
07 Graphic Assets & Tokens
svg viewBox="0 0 100 100" fill="currentColor"
Adds luxurious layers of glowing depth to footer components or background panels.
radial-gradient + filter blur-2xl
underline decoration-wavy decoration-accent
Establishes spatial alignment and raw draftsmen details on background grids. `spacing-50`.
background-image: radial-gradient(#ccc 1px, transparent 1px)
Global physics values for the jelly cursor and layout morphing animations.
springK: 0.2, springDamp: 0.82
Adds luxurious film-like grain texture (`opacity: 0.05`) globally using static SVG filters.
feTurbulence type="fractalNoise" baseFrequency="0.8"
08 Approved Specimens
Premium signature elements chosen by the user
visual reality.
09 Master Context / Vibecoding
When expanding this portfolio using AI or Vibecoding, copy the prompt below. It contains the complete Masterka digital identity DNA.
10 Interactive Assets & Backgrounds
404
Physics Shockwave Grid
Move cursor to rotate and scale the grid stars. Click anywhere in this card to trigger expanding elastic ripple shockwaves.
Mathematical Grid
A live, miniature rendering of the home page hero canvas. Moves vector line sets along dynamic sine curves according to proximity math.
Asymmetry & Harmony
Combining heavy border radii, dot grids, thin accent rules, and dynamic glows for high premium aesthetic.