Welcome

This is the COMPLETE design system for christianstrunk.com (PIXELSTRUNK). Every component from the design_system folder, pixel-perfectly implemented and fully interactive.

24

Colors

9

Font Sizes

16

Components

8px

Base Grid

Responsive Design

Breakpoint: 768px (mobile)

•Desktop: ≥768px - Multi-column layouts, larger components
•Mobile: <768px - Single column, stacked layouts, adjusted spacing
•Approach: Mobile-first with Tailwind responsive utilities (md:, lg:)

Accessibility

✓Semantic HTML: Proper heading hierarchy (h1-h4), section elements, button vs div
✓ARIA Labels: All interactive elements have descriptive aria-label or aria-checked attributes
✓Keyboard Navigation: All buttons, links, and form inputs are keyboard accessible (Tab, Enter, Space)
✓Focus States: Visible focus indicators on all interactive elements
✓Color Contrast: WCAG AA compliant (black text on light backgrounds, white text on dark)
✓Alt Text: All images have descriptive alt attributes for screen readers

Colors

Primary Palette (9 Colors)

Background Colors (Semantic UI)

Functional Grays

Extended Colors (Component-Specific)

Typography

Font Stack

font-family: 'Pixel Operator Mono', 'Courier New', monospace;

Weights: 400 (Regular), 700 (Bold)

Warning: Weight 800 does NOT exist - always use 700!

Letter Spacing: -0.2px (default for ALL text)

Line Heights: 0.9 (headings), 1.25 (body)

Type Scale (Major Third 1.25)

Desktop sizes shown. Mobile breakpoint (768px) uses smaller sizes.

H1 Headline

50px / Bold / Line-height: 0.9 / Mobile: 32px

H2 Headline

40px / Bold / Line-height: 0.9 / Mobile: 28px

H3 Headline

32px / Bold / Line-height: 0.9 / Mobile: 24px

H4 Headline

26px / Bold / Line-height: 0.9 / Mobile: 20px

P1 Body Text (Large)

26px / Regular / Line-height: 1.25

P2 Body Text (Standard)

22px / Regular / Line-height: 1.25

P3 Body Text (Small)

18px / Regular / Line-height: 1.25

Small Text (Captions/Labels)

11px / Regular / Line-height: 1.25

CSS Variables

--font-size-h1: 50px;

--font-size-h2: 40px;

--font-size-h3: 32px;

--font-size-h4: 26px;

--font-size-p1: 26px;

--font-size-p2: 22px;

--font-size-p3: 18px;

--font-size-small: 11px;

--line-height-headings: 0.9;

--line-height-normal: 1.25;

--letter-spacing-default: -0.2px;

Mobile Responsive Scale

Level	Desktop	Mobile (<768px)
H1	50px	32px
H2	40px	28px
H3	32px	24px
H4	26px	20px
P1	26px	26px
P2	22px	22px
P3	18px	18px

Spacing System

8px Base Grid

All spacing values follow an 8px base grid for authentic pixel-style design.

XS

8px

SM

16px

MD

24px

LG

32px

XL

48px

2XL

64px

3XL

96px

4XL

128px

Section Spacing

Consistent vertical padding applied to ALL page sections. Change once in design-tokens.css, updates everywhere.

--section-padding-y

120px (desktop)

--section-padding-y-mobile

32px (mobile)

--section-element-gap

60px (between boxes)

Usage Rules:

ALL sections use same vertical padding tokens
Change value in design-tokens.css → all sections update
Use --section-element-gap for spacing between multiple boxes within a section

Content Spacing

Spacing for elements inside content boxes.

--box-content-gap

30px (title → content → CTA)

--page-max-width

1400px

Shadows & Layers

Shadow System Types

Three Shadow Types:

1. Pixel-Art Shadows (PixelButton)

Rendered as grey (#666666) pixels in a 14-row grid. NOT CSS box-shadow. Used for main interactive buttons.

2. Floating Shadows (50% opacity)

--shadow-floating: 6px 6px 0 rgba(0,0,0,0.5) • --shadow-floating-lg: 8px 8px 0 rgba(0,0,0,0.5) • Used for tooltips, dropdowns, notifications, modals.

3. No Shadows (Flat)

Inputs, textboxes, form fields, content containers. Keep it flat for clarity.

When to Use Each Type:

🎮 PixelButton: Primary actions (PLAY, START GAME, navigation)
📦 CSS Shadow: Floating UI (modals, tooltips, dropdowns)
🔲 No Shadow: Form inputs, content cards, containers
⚠️ Never: Don't mix shadow types on nested elements

Flat Container (NO shadow)

PIXEL SHADOW

Z-Index Hierarchy

0

Background

Page background, flat

1

Content

Form fields, cards, flat

2

Interactive

PixelButtons (pixel-art shadows)

3

Overlays

Modals, tooltips, dropdowns (shadow-floating 50% opacity)

Buttons & Controls

Link Buttons

Scale 1.07 on hover, standard link-style buttons

Primary

Secondary

Action Buttons

Flicker animation (1.3s) with saturation/brightness changes. Scale 1.07 on hover.

Action

Action Alt

Button States

Error state applies to all button types. Button turns red with 3x flash animation.

Error State

Red background (#ef223c), white text, 3x flash, disabled until reset

ERROR - TRY AGAIN

Interactive Demo

Click "Trigger Error" to see the state transition (auto-resets after 3s)

State: IDLE

START GAME

Button Sizes

Three sizes available: sm (17px), md (20px - default), lg (24px)

Small (sm)

SMALL BUTTON

CANCEL

DELETE

Medium (md) - Default

MEDIUM BUTTON

CANCEL

DELETE

Large (lg)

LARGE BUTTON

CANCEL

DELETE

Arrow Buttons

⚠️ These are NOT Unicode characters - built from positioned divs with scale(0.5)!

• Size: 30×30px buttons
• Color: Strunk green (#6ee706)
• Border: 3px solid black
• Hover: Scale 1.07
• Construction: Built from 5 rows/cols of 8px divs scaled to 0.5

Mobile Button Sizes

Two mobile sizes: default (1.0× ~42px) and compact (0.85× ~36px)

📱 Resize browser to ≤767px to see mobile scaling

Default Mobile Size (mobileSize="default")

Scale 1.0× (~42px height) - same as desktop

ACCEPT

REJECT

Compact Mobile Size (mobileSize="compact")

Scale 0.85× (~36px height) - for side-by-side buttons in modals/dialogs

CANCEL

CONFIRM

Side-by-Side Comparison

Same button at different mobile sizes (visible on mobile viewport)

DEFAULT

~42px

COMPACT

~36px

Technical Details

Pixel Button Specifications:

• Pixel-perfect 3px × 3px grid rendering
• Dynamic width based on text length
• 14 rows × variable columns (42px base height)
• Shadow color: Fixed grey (#666666)
• White highlights on top-left edges
• Black outline border (3px pixels)
• Three sizes: sm (17px), md (20px - default), lg (24px)
• Font: Bold, 1px letter-spacing
• Link buttons: Scale 1.07 on hover, 0.95 + darken on click
• Action buttons: Flicker 1.3s, scale 1.07 on hover, scale 0.95 on click
• Error State: Red (#ef223c), white text, 3x flash animation
• Mobile Default (≤767px): Scale 1.0× (~42px height, same as desktop)
• Mobile Compact (≤767px): Scale 0.85× (~36px height) for side-by-side

Navigation Bar

Desktop Demo

Full-width navigation with logo, CTA button, sound toggle, and equal-width tabs. Click any tab to see active state. Click the sound icon to toggle mute state (persists in localStorage).

Mobile Demo

Mobile navigation with hamburger menu that opens full-screen overlay. Resize your browser below 768px to see the mobile version, or view this demo in a phone-sized container. Sound defaults to OFF on mobile. No animations - instant open/close (pixel-world style).

Mobile Preview (375px)

Click the hamburger icon to open the mobile menu

Specs

Desktop (≥768px)

Colors

Background: --color-black (#000)
Text default: White (#fff)
Active state: --color-strunk-green (#6ee706)

Typography

Logo: 30px, 700 weight, 2px letter-spacing
Tabs: 22px (P2), 700 weight, 0.9px letter-spacing
Dropdown items: 22px (P2), 700 weight, 1px letter-spacing

Layout

Top row: Logo left-aligned, CTA+sound right-aligned (flush to edges)
Tabs: Full width, equal distribution (flex: 1)
Tab padding: 22px 10px 12px (top/sides/bottom)
Active state: Green background, black text
Hover state: Green text only (no background)
Tab separators: None (clean pixel aesthetic)

Dropdown Menu

Trigger: Shows on parent tab hover
Background: Black (#000)
Item padding: 12px 20px
Item hover: Green background, black text
Item border: 2px solid #666 between items

CTA Button

Type: action-secondary (PixelButton)
Size: md
Color: --color-strunk-green (#6ee706)
Animation: Flicker (1.3s infinite)

Sound Toggle

Position: After CTA button (far right)
Size: 32px x 20px
Hover: scale(1.07)
Default: Sound ON
Persistence: localStorage (pixelstrunk-muted)

Mobile (<768px)

Header (Collapsed)

Layout: Logo | Hamburger
Padding: 12px 16px
CTA button: Hidden (only in expanded menu)
Sound toggle: Hidden (only in expanded menu)
Hamburger: 28px × 20px, 3 green lines (4px height)

Full-Screen Menu

Background: Black (#000) - same as desktop
Position: Fixed, covers entire viewport
Z-index: var(--z-modal) (1000)
Close button: Pixel X icon, green, top-right
Animation: None - instant open/close
Body scroll: Locked when open

Menu Logo

Font size: 28px
Color: Green (#6ee706)
Position: Centered, margin-top: 48px
Text shadow: 2px 2px 0 #000

Nav Items

Container: max-width 300px, centered
Item border: 3px solid green
Item padding: 16px 24px
Font: 21px, bold, uppercase
Gap between items: 12px
Active state: Green background, black text
Hover state: Green background, black text

Sound Toggle (Mobile)

Position: Bottom of menu (margin-top: auto)
Default: Sound OFF on mobile
Label: Shows "Sound ON" / "Sound OFF"
Icon size: 32px × 20px
Hover: Text turns green

Form Elements

Text Inputs

Name (with softValidateName)

Email (with softValidateEmail)

Website (with softValidateUrl)

Message (with softValidateMessage)

Form Validation Example

Name *

Email *

Phone *

Message *

VALIDATE FORM

Selections

Select Option

Checkboxes

Newsletter

Updates

Announcements

Radio Buttons

Basic Plan

Pro Plan

Enterprise

Content Blocks

ContentBox Component

Full-width content box for legal pages (Imprint, Privacy Policy, etc.) with optional pixel font toggle.

Page Title

Pixel Font:On

Section Heading

This is the ContentBox component used for legal and content pages. The pixel font toggle allows users to switch between the Pixel Operator font and Courier New for better readability.

Toggle state is stored in a cookie for 30 days. Default state is ON (Pixel font enabled).

Usage (Uncontrolled):

<ContentSection title="Imprint" showFontToggle>
  <h3>Section Heading</h3>
  <p>Content goes here...</p>
</ContentSection>

Usage (Controlled - shared state across sections):

<ContentSection
  title="About"
  showFontToggle
  pixelFontEnabled={pixelFontEnabled}
  onFontToggle={setPixelFontEnabled}
>
  ...
</ContentSection>

Note: Headlines are NEVER affected by the font toggle.

Headline Styles

Plain Headline

Clean and minimal, no decoration

Underline Headline

Bottom border creates visual connection

Background Box

Green background makes it pop

Inline Tag

Matrix-style label effect

Textboxes

Pro Tip

This is an informational textbox with helpful content for users.

Success

Your action was completed successfully. Everything worked as expected.

Warning

Please be aware of this important information before proceeding.

Error

This field is required. Please enter a valid username to continue.

Cards

Strategy

Product planning and development services for digital products.

LEARN MORE

Design

Product planning and development services for digital products.

LEARN MORE

Build

Product planning and development services for digital products.

LEARN MORE

Dropdowns

Dropdown Menus with Pixel-Art Arrows

Modals

Modal Variants

STANDARD MODAL

WARNING MODAL

DANGER MODAL

SUCCESS MODAL

Cookie Banner

Show Cookie Banner

SHOW COOKIE BANNER

Cookie Settings Button

Used in the footer to allow users to re-open the cookie banner and change their preferences.

Size: 40px × 40px

Background: Black (#000000)

Border: 3px solid white (#FFFFFF)

Corners: 3px × 3px chamfered (GameBoy-style using ::before with box-shadow)

Icon: 24px × 24px cookie PNG (pixelated rendering)

Hover: scale(1.07) - instant, no transition

Active: scale(0.95) - instant, no transition

Position: Left side of footer copyright (left: 43px)

Click the button above to open the cookie banner.

Pop-ups & Tooltips

Hover Tooltips

HOVER ME (MATRIX STYLE)

This is a matrix style tooltip

HOVER ME (WARNING)

This is a warning tooltip

HOVER ME (INFO)

This is a info tooltip

Notifications

Toast Notifications (Top-Right)

SHOW SUCCESS

SHOW WARNING

SHOW ERROR

SHOW INFO

YouTube Play Button

Pixel-Art Play Triangle (5 Columns)

Accordion

Light Variant

Click headers to expand/collapse. Arrow switches instantly (no rotation animation).

This is the content of section one. The accordion uses the same PixelArrow SVG as the NavigationBar dropdowns.

This is the content of section two. Content expands with a smooth max-height transition.

This is the content of section three. Multiple accordions can be open at the same time.

Dark Variant

Used in the mobile footer. Green arrow matches the strunk-green brand color.

This is the content of the dark variant accordion. Used for dark backgrounds like the mobile footer or dark UI sections.

The green arrow and border match the strunk-green brand color. Content uses P3 (18px) for readability.

Click this header to expand. Multiple accordions can be open simultaneously.

Footer

Desktop Footer

3-column layout with hover effects. Hover over links to see the white arrow appear. Click triggers 200ms blink animation before navigation. Heart icon has easter egg - click 3x within 2s!

Handmade within Berlin.

Heart Easter Egg (Desktop & Mobile)

Hidden easter egg triggered by clicking the heart icon 3 times within 2000ms. Works on both desktop and mobile footers!

Animation Sequence:

1st click: Vibrate 500ms
2nd click: Vibrate 1000ms
3rd click: Vibrate 3000ms + Scale 20x (from bottom, simultaneous)
After animation: Heart resets, modal opens with Rick Roll video

CSS Classes Used:

.animate-vibrate-500.animate-vibrate-1000.animate-vibrate-scale

Try it! Click the heart 3 times quickly:

Handmade within Berlin.

Click count: 0/3

Mobile Footer

Accordion layout with prominent social buttons. Click headers to expand/collapse sections. Heart easter egg works here too - click 3x!

Follow Me

YOUTUBE LINKEDIN X/TWITTER

Handmade within Berlin.

Pagination

Section Navigation

StrunqueeSlider

An infinite scrolling marquee component for displaying lists of items (companies, features, etc.) in a sleek animated banner. The items scroll continuously from right to left.

Default (15s)

Trade RepublicSumUpNewStoreShopgate

Fast (8s)

AmazoneBayZalandoSVPGMeta

Usage

import StrunqueeSlider from '@/components/ui/StrunqueeSlider'
import '@/styles/strunquee-slider.css'

// Default speed (15s)
<StrunqueeSlider items={['Item 1', 'Item 2', 'Item 3']} />

// Custom speed
<StrunqueeSlider items={['Fast', 'Scrolling']} speed={8} />

// With custom class
<StrunqueeSlider items={['Custom']} className="my-class" />

Props

Prop	Type	Default	Description
items	string[]	required	Array of strings to display
speed	number	15	Animation duration in seconds
className	string	""	Additional CSS class for the section

Custom Scrollbar

PIXELSTRUNK Design System

Welcome to the PIXELSTRUNK design system. This scrollable textbox demonstrates Option B for our scrollbar design - the "Bold Pixel" approach that maintains consistency with our interactive elements.

The scrollbar uses the same 3px border thickness as our buttons and other interactive components, creating a cohesive visual language throughout the system.

Typography Standards

Our typography system is built on Pixel Operator Mono with Courier New Monospace as fallback. All text maintains a line-height of 1 for authentic pixel-style aesthetics.

Font weights are limited to 400 (regular) and 700 (bold) - weight 800 does not exist in our system and should never be used.

Spacing System

We use an 8px base grid for spacing throughout the design system. This creates a consistent rhythm and authentic pixel-style feel reminiscent of classic Game Boy games.

The spacing scale follows: 8px, 16px, 24px, 32px, 48px, 64px, 96px, 128px. Exceptions are allowed for buttons and forms where 12px padding provides better optical balance.

Color Palette

Our primary color is Strunk Green (#6ee706), complemented by a carefully selected palette of 9 core colors including neutrals, secondary purple (#9a00ff), functional colors like red (#ef223c) and gold (#f8b034).

Extended colors like Footer Gray (#e8e8e8) and LinkedIn Blue (#0077b5) are reserved for specific component use cases only.

Shadow System

Interactive elements like buttons receive 4px shadows to indicate their clickable nature. Container elements like textboxes, cards, and sections remain flat with border-only styling.

This creates clear visual hierarchy - if you can interact with it, it has shadow. If it's just a container, it stays flat.

Component Philosophy

Every component in PIXELSTRUNK is designed with both modern web functionality and authentic retro gaming aesthetics in mind. We balance clean, usable interfaces with pixel-perfect visual details.

Custom pixel-art elements are built from positioned divs rather than standard icons, ensuring true pixel authenticity throughout the system.

Scroll for More

Notice how the scrollbar maintains the same bold, chunky aesthetic as our other components? The 12px width provides good usability while the 3px borders keep it visually consistent with buttons and other interactive elements.

The Strunk Green thumb color reinforces our primary brand color throughout the interface, even in utility elements like scrollbars.

Keep scrolling to see how the hover state adds subtle feedback with a slightly darker green.