Design Manual

Brand Book
Masterka.

A strict interactive reference protecting the Masterka digital identity. Calculated geometries, high-end styling systems, and precise editorial details.

Scribble

00 Designer DNA

Identity, context & personal creative drive

Identity Specs

Tereza Mašková

Visual Designer & Creative Soul

Brand Name: Masterka Design
Origin Formula: MAS (Mašková) + TERKA (Tereza) → MASTERKA
Location: Prague, Czech Republic
Email: maskovatereza@icloud.com
LinkedIn Profile
00.1 / Multi-Format Creator

Motion, Pixels & Paper

I absolutely adore motion design and animation, but I also illustrate, design websites, photograph, and am currently writing my first book.

00.2 / Adaptive Workflow

Learning & AI Training

I love learning new skills and implementing new tools into my creative process, such as training my own custom AI models.

00.3 / Dog Therapy 🐾

Petsy & Rescue Stations

I enjoy dog sitting and occasionally help as a foster caregiver for dog rescue stations — dogs are my primary personal therapy.

Petsy Profile
00.4 / Tactile Meditations

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

Logo Unification & Usage Standard
Primary Dot Standard (Masterka.)

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.

✦ Star Accent Standard (Emblems & Lockups)

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.

01.1 / Standard Logotypes (Light)

Masterka.

Base Logotype Download

Masterka

Star Lockup Download
01.2 / Inverse Logotypes (Dark)

Masterka.

Velvet Inverse Download

Masterka

Glowing Inverse Lockup Download
01.3 / EMBLEM GEOMETRY
4-POINT ACCENT STAR
Calculated vector curve
Download SVG
01.4 / Kinetic Blueprint Monogram Specimen
M
X: 0 Y: 0

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.

Vector Anchor
4-POINT SVG EMBLEM
Morph Rate
GSAP SPRING-TILT
Interactive Blueprint — Hover to trace coordinates
01.5 / PILL MONOGRAM
M
Iconic monogram badge Download SVG

01.6 TM Monogram

Tereza Mašková — Initial lockups

TM Monogram / Light
T M
Stacked Monogram
T M
Monogram + Star Divider
TM
Badge / Pill Monogram
TM Monogram / Dark
T M
Stacked Inverse + Glow
T M
Monogram + Star Glow
TM
Badge / Pill Inverse

01.7 Dot → Star Morph

CSS path transition — as used in nav bar

LIVE SPECIMEN — Hover the logo to see morph
Masterka
CSS path d: transition • 500ms ease Same as .nav-logo
How It Works
Base: Dot M50 35 L60 40 L65 50...
Hover: Star ✦ M50 0 L61 39 L100 50...
CSS
Pure CSS .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

.grad-primary — #FF4400 → #ff9a76
Radial Footer Glow
Warm Sunrise Gradient
Deep Space Gradient
Glass Frost Gradient

Glass & Blur Effects

.grad-glass-light

backdrop-filter: blur(20px)

background: rgba(255,255,255,0.6→0.1)

.grad-glass-dark

backdrop-filter: blur(20px)

background: rgba(255,255,255,0.1→0.02)

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

Film grain active

Noise Overlay

.noise-overlay • SVG feTurbulence

Move cursor here →

Mouse Glow

#bb-glow • Radial gradient follows cursor

03 Typography

Display Font / Instrument Serif

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
Body / Manrope

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
Metadata / Victor Mono
Available 2024 • Branding
font-mono text-xs uppercase tracking-widest
Quotes & Accents

"Design is not just what it looks like, it's how it works."

— Quote Citation
UI TYPOGRAPHY SPECIMEN HIERARCHY
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
Inline Text Treatments

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)

Linear Grid .bg-grid-light
Linear Grid (Dark) .bg-grid-dark opacity-30
Dotted Grid .bg-dot-light
Dotted Grid (Dark) .bg-dot-dark opacity-50
Wavy Grid on Gradient feDisplacementMap Wavy Grid Overlay

Case Study Layout (Typography)

CLIENT ZZS ÚSTECKÝ KRAJ
SERVICES BRANDING, PRINT
YEAR 2024

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

Deco

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

LANDSCAPE STANDARD 16 : 10 aspect-[16/10]
Selected Work Previews

Ideal for screen mockups, desktop layout bento headers, and horizontal images.

PORTRAIT SLENDER 3 : 4 aspect-[3/4]
Typography Layouts

Recommended for high-end editorial book lookups, vertical grids, and mobile banners.

PORTRAIT BOX 4 : 5 aspect-[4/5]
Social & Mobile Grid

Used for catalog listing items, editorial prints, and high-impact bento cards.

CLASSIC TV 4 : 3 aspect-[4/3]
Editorial Cards & Lists

Standard ratio for medium-width grid objects, stat columns, and design specimens.

GRID GAP (GUTTERS) gap-6 (24px) / gap-8 (32px)

Consistent gaps between bento grids for uniform breathing space.

VIEWPORT INNER PADDING px-6 (24px) / py-32 (128px)

Main container paddings to ensure visual margin consistency on all layouts.

CARD BORDER RADIUS rounded-[2.5rem] (40px)

Pronounced organic corners used on all main cards to soften geometric grids.

Massive Footer CTA

Open for new projects & Available to hire

LET'S TALK

05 UI Components & Specimens

Interactive primitives & visual states

05.1 / Interactive Buttons
CV
EXPLORE WORK
LET'S BUILD SOMETHING UNIQUE ★ LET'S BUILD SOMETHING UNIQUE ★
#OPENTOWORK
M
class="bg-accent text-white px-8 py-3 rounded-full"
05.2 / Glassmorphic Navigation
Masterka
Footer Link Styles
CV →
backdrop-blur-md border border-white/5
05.3 / Notification & Feedback Toasts
Copied to Clipboard

Relative path has been copied to your design sandbox.

Design Rule

Always use Instrument Serif italic for typography contrast.

States: Success & Neutral Tip
05.4 / Meta-Badges & Copy fields
Available
2026 Featured Case Study
maskovatereza@icloud.com
View Full Archive (20+)
Primitives: Meta Tags & Copiables
05.5 / Minimal Input Field States
Tereza Masterka
maskovatereza@icloud.com
Let's work together...

Spacing Scale Tokens

1px
2
3
4
6
8
12
16
24
32

Easing & Motion Reference

power3.out cubic-bezier(0.33,1,0.68,1)
power2.inOut ease-in-out
back.out(1.4) cubic-bezier(0.34,1.56,0.64,1)
gsap.to(el, { ease: "back.out(1.4)" })

Icons Asset Matrix

arrow-right
arrow-down-right
copy
eye
download
pen-tool
monitor
mail
external-link
layers
sparkles
zap
grid-2x2
star
move-diagonal

06 Illustration Dataset Explorer

07 Graphic Assets & Tokens

Token 01 / 4-Point SVG Star
svg viewBox="0 0 100 100" fill="currentColor"
Token 02 / Blurred Accent Aura
Liquid Heatmap Aura

Adds luxurious layers of glowing depth to footer components or background panels.

radial-gradient + filter blur-2xl
Token 03 / Custom Wavy Borders
DASHED DECORATIVE RULE
WAVY LINK ACCENT STYLE
underline decoration-wavy decoration-accent
Token 04 / Haptic Dot Grids
Technical Canvas Dots

Establishes spatial alignment and raw draftsmen details on background grids. `spacing-50`.

background-image: radial-gradient(#ccc 1px, transparent 1px)
Token 05 / GSAP Spring Transition
Spring & Inertia Constants

Global physics values for the jelly cursor and layout morphing animations.

springK: 0.2, springDamp: 0.82
Token 04 / Film Grain Overlay
Analog Noise Overlay

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

/ MG.GRID
SYS.V1
TM
Brand Monogram Serif Lockup • v1.0
/ TYPO.ACCENT
INSTRUMENT.SERIF
Turning complex ideas into visual reality.
Slanted Highlight Editorial Typography Instrument Serif Italic Accent • rotate(-2deg)
/ BRAND.ILLUSTRATION
SERIES-81388
Brand Illustration 81388-#1
Brand Illustration System Scribble Series 81388-#1 • Multiply Blend
/ HUD.RIG
Masterka
MENU
THE CHALLENGE

Mediaboard needed a visual identity that bridged the gap between complex data and intuitive user experience.

We moved away from the sterile corporate aesthetic to something human and expressive.

Deliverables
12 screens
Duration
6 weeks
Role
Lead Designer
Sophisticated Editorial UI HUD Star wordmark & floating dark Dock

09 Master Context / Vibecoding

When expanding this portfolio using AI or Vibecoding, copy the prompt below. It contains the complete Masterka digital identity DNA.

# MASTERKA BRAND BOOK - AI CONTEXT PAYLOAD You are building pages for the Masterka Design Portfolio. Strictly adhere to these system tokens and interaction patterns: 1. COLORS & THEMES - Base Accent (Orange): `#FF4400` - Dark Mode Base: `#080808` or `#050505` (with text `#FAFAFA`) - Light Mode Base: `#FAFAFA` or `#F4F4F0` (with text `#050505` or `#0A0A0A`) - System Green (Status): `#22C55E` 2. TYPOGRAPHY & SCALES - Display Font: `font-serif` -> "Instrument Serif" *Usage*: Huge `h1` titles, italicized stylistic accents. Ex: `<span class="italic text-accent">Visual Designer & Creative Soul.</span>` - Body Font: `font-body` -> "Manrope" *Usage*: All standard paragraphs, text-gray-400 (dark mode) or text-gray-500 (light mode). - Metadata Font: `font-mono` -> "Victor Mono" *Usage*: Labels, tags, timestamps. ALWAYS formatted as: `text-[9px] uppercase tracking-widest font-bold`. 3. LAYOUT & GRIDS - Feature Grids: Use Bento Box structures (`grid-cols-1 md:grid-cols-3 gap-6`). Cards should have heavy border-radii (`rounded-[2rem]`). - Backgrounds: * Light Mode: `.bg-dot-light` or `.bg-grid-light` (mix-blend-multiply, opacity 30%). * Dark Mode: `.bg-dot-dark` or `.bg-grid-dark` (opacity 15%). - Depth: Add liquid radiant auras behind hero sections or footers: `bg-[radial-gradient(circle_at_center,rgba(255,68,0,0.12)_0%,transparent_75%)] filter blur-3xl` 4. UI ELEMENTS & MICRO-PATTERNS - Primary Links: Wavy underlines. `underline decoration-wavy decoration-accent underline-offset-4`. - Badges: `bg-accent/5 border border-accent/15 text-accent rounded-full px-4 py-2 text-[10px] uppercase`. - SVG Stars: NEVER use asterisk text. Use the 4-point star SVG: `<svg viewBox="0 0 100 100" fill="currentColor"><path d="M50 0L61.2257 38.7743L100 50L61.2257 61.2257L50 100L38.7743 61.2257L0 50L38.7743 38.7743L50 0Z"/></svg>` 5. INTERACTION & PHYSICS (GSAP + CURSOR) - Custom Cursor: Handled globally by `cursor.js`. Elements must be interactive. Use `data-cursor="VIEW"` or `data-cursor="DRAG"` on links/images to deform the GSAP spring cursor. - Transitions: Osmo-style subtle glass veil. Links automatically trigger the veil fade-in (0.25s `power2.inOut`) over `#mk-osmo-veil`. - Easing: Use `ease: "power3.out"` for elements entering view. Use `ease: "back.out(1.4)"` for popups/hover-states. - Smooth Scroll: Lenis is globally initialized (except on touch devices). 6. ARCHITECTURE RULES - Every page MUST contain: 1. The global full-screen menu (`#fs-menu`). 2. The floating glass navigation (`nav.fixed.top-6`). 3. The massive interactive footer (`#contact`) with the "LET'S TALK" gradient hover text. 4. The global <script src="../assets/js/cursor.js"></script> just before </body>.

10 Interactive Assets & Backgrounds

10.1 / 404 PARALLAX GRID & SHOCKWAVES

404

Physics Shockwave Grid

Move cursor to rotate and scale the grid stars. Click anywhere in this card to trigger expanding elastic ripple shockwaves.

4-Point curved vectors + shockwave equations Grid Active
10.1b / 404 LIGHT (PAPER) VERSION
SYSTEM // OUT OF BOUNDS

404 DISPLACED.

This page doesn't exist — it may have been moved or removed.

Paper bg #F4F4F0 · Stars accent #FF4400 Light Mode
10.2 / WAVY LINE RIG (HERO BEHAVIOR)

Mathematical Grid

A live, miniature rendering of the home page hero canvas. Moves vector line sets along dynamic sine curves according to proximity math.

Sine wave offset + proximity vector math Sine Rig Active
10.3 / SOLID REVEAL HOVER (MENU SYSTEM)
Profile Link
Sliding solid backdrop trigger
10.4 / MAGNETIC BUTTON PHYSICAL RIG
Dynamic spring math constraint
10.5 / BENTO BOX STRUCTURE

Asymmetry & Harmony

Combining heavy border radii, dot grids, thin accent rules, and dynamic glows for high premium aesthetic.

SYSTEM APPROVED

11 References & Links

GSAP & ScrollTrigger

Library used for all complex timeline animations and scroll-based reveals.

Lucide Icons

Clean, consistent SVG icon set used across the portfolio (`data-lucide="..."`).

Lenis Smooth Scroll

Lightweight script responsible for the buttery smooth scrolling experience.

12 Case Studies — From Practice

Patterns extracted from AeroScan & Lakáva projects

09.1 — Project Intro Pattern
Case Study 2024 Aeroscan

AERO SCAN

Precision Drones · Brand Identity

09.1a / Dark Hero with Canvas Grid
Case Study 2025 Lakáva

LAKÁVA COFFEE

Specialty Coffee · Packaging

09.1b / Variant with Radial BG
09.2 — Section Stacking & Rounded Overlaps

The case study pages use a signature stacking pattern: each content section uses border-top-left-radius: 3rem; margin-top: -3rem; to create overlapping layers. The hero (dark) peels into white content seamlessly.

Hero — Dark #080808
Content Layer — #FAFAFA • border-top-radius: 2.5rem
Next Section — white bg stacks on top
CSS Pattern — .case-section border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
margin-top: -3rem;
overflow: hidden;
position: relative;
z-index: increments each layer;
Usage
  • • Hero → Main content (dark → light)
  • • Logo section → Brand System
  • • Colour palette → Typography
  • • Interactive Switcher (Lakáva)
  • • Grand Final Showcase
09.3 — Project Stats Bar
Client Aeroscan
Category Tech / Geo
Focus Identity & Logo
Year 2024

Used in: AeroScan & Lakáva — 4-cell grid with hover accent + gradient dividers

09.4 — Brand Values Card Grid (AeroScan Pattern)
Precision
01

Calculated mapping, down to the centimeter.

Every data point earned.

Sustainability
02

Empowering forestry with vital environmental data.

Supporting ecological balance.

Technology
03

State-of-the-art unmanned aerial systems.

Driving modern insights.

Hover any card — top accent bar animates in (scaleX: 0→1, origin: left). Dot rotates 45°.

09.5 — Expandable Colour Panel System (AeroScan Brand Colours)
Tech Orange

Tech Orange

Primary · #E67B11
HEX#E67B11
RGB230, 123, 17
CMYK0, 46, 93, 10
Eco Green

Eco Green

Secondary · #364B22
HEX#364B22
RGB54, 75, 34
CMYK28, 0, 55, 71
Aero Blue

Aero Blue

Support · #A4C3E0
HEX#A4C3E0
RGB164, 195, 224
CMYK27, 13, 0, 12
Silver

Drone Silver

Neutral · #DFDFDF
Carbon Dark

Carbon Dark

Background · #0F0F0F

Hover to expand. Uses flex: 1 → flex: 4 with cubic-bezier(0.16,1,0.3,1). Label reveals with delayed opacity + translateY.

09.6 — Infinite Auto-Scroll Marquee (AeroScan Applications)
Applications — Logo on Photo Assets
Banner 01
Banner 02
Banner 03
Banner 04
Banner 01
Banner 02
Banner 03
Banner 04

CSS @keyframes translateX(calc(-100% - 1rem)) — hover pauses. Two duplicate strips ensure seamless loop.

09.8 — Dark Editorial Section (Lakáva "Driven by Art")
02 — Visual Identity

Driven
by Art

09.8 / Glassmorphism info card + editorial heading

Glass card: bg-black/40 backdrop-blur-xl border border-white/10 · Heading: clamp(3rem,7vw,7rem) · BG: gradient overlay

09.9 — Interactive Label Switcher (Lakáva "One Canvas. Endless Blends.")

One Canvas. Endless Blends.

Lakáva Natural
Lakáva Warm
Lakáva Cool

Section BG + "Endless" word colour change on variant switch. Indicator bar scaleY: 0→1. Cards: opacity + rotate + scale transition (1s).

09.10 — Quote Card + Text Reveal Highlight (AeroScan)
Design Insight
“A brand that scans the sky must feel precise on the ground. ”
09.10a / Hover reveals fill behind highlighted text

Simple.
Honest.
Friendly.

The Lakáva design philosophy

09.10b / Left border accent with color hierarchy in serif text

09.11 — Typography Specimen Cards (AeroScan + Lakáva Typefaces)
primární font
Aa

CABINET GROTESK

Variable

Display Typeface

Libel Suit

Regular
Aa
Usage

Headlines, Blend Names

Specs

Tracking: 0–2%
Line-height: 0.9em

Hover "Aa": AeroScan card — rotates + changes color. Lakáva card — accent glow intensifies.

09.12 — Section Pill Labels & Dividers
Type A — Centered pill badge (AeroScan)
BRAND VALUES
Type B — Left-aligned with rule line (Lakáva)
01 — The Brief
Contest Entry
Type C — Gradient accent top divider (AeroScan section-divider-dark)
09.13 — Bento Grid Patterns
6/12 — Primary showcase Social Media
Primary Logo
6/12 — Logo Card
3/12 — Grid Unit
4/12 — Quote

“Precise on the ground.”

5/12 — Merchandise
12/12 — Full Width Strip

Applications — Logo on Photo Assets

lg:grid-cols-12 with col-span-3/4/5/6/12. Cards hover: scale image, glow, shadow-xl transition.

09.14 — Next Project Navigation Card
Next Case
Packaging & Identity

Lakáva

Browse All Work

Full Archive

Start a project? Email Me

Next card: BG reveals on hover, text slides up, arrow rotates -45→0. Blob in archive card fades from opacity-5 to 10.

09.15 — Scroll & Interaction Animation Reference
GSAP ScrollTrigger Animations
.reveal-on-scroll opacity: 0→1, y: 40→0, filter: blur(8px)→0
duration: 0.9s, ease: power4.out
trigger: top 90%
.hero-title yPercent: 120→0, skewY: 8→0, opacity: 0→1
duration: 1.8s, ease: power4.out, delay: 0.2s
.reveal-fade y: 30→0, opacity: 0→1, filter: blur(8px)→0
stagger: 0.1, duration: 1.4s, overlap: -=1.4
.highlight-text-container span opacity: 0.2→1, stagger: 0.05
scrollTrigger scrub: true, start/end based
.parallax-slow / .parallax-fast yPercent: 12 / 20
scrub: 1.2 / 0.8, start: top bottom, end: bottom top
Canvas & Interactive JS Systems
#hero-canvas Wavy horizontal grid lines
Mouse proximity warps lines with sin wave
Color: rgba(230,123,17,0.12) [Aeroscan]
rgba(255,255,255,0.12) [Lakáva]
#pixel-dust Canvas overlay with subtle ambient particles
opacity: 0.5, z-index: 1, pointer-events: none
#menu-dots Dot grid in fullscreen menu
Mouse proximity pushes dots with spring physics
vx/vy += force · 0.5, damping: *= 0.85
hero-bg-globe Blurred gradient blob behind AeroScan hero
Parallax: translate(x*60px, y*60px) on mousemove
Magnetic .magnetic-btn GSAP: x/y * 0.3 on mousemove
elastic.out(1, 0.3) spring-back on mouseleave
09.16 — Scroll Progress Bar + Footer Glow
Progress Bar
position: fixed; top: 0; left: 0; width: 100%; height: 4px;
progress = (scrollY / maxScroll) * 100
requestAnimationFrame loop

Footer uses CSS variable --glow-x/--glow-y + radial-gradient overlay. Dot grid masked to same position.