brand • design • typography
Deconstructing the Brand
The name says it all. Dither is the halftone magic that turns photos into thousands of tiny dots. Etch is the crisp, unforgiving line. Together, they’re the yin and yang of laser craft — the organic and the exact, the textured and the clean.
This guide breaks down how that philosophy translates into visual identity.
The Brand Lockup
The wordmark uses two typefaces in conversation: Bebas Neue for the words, Literata for the ampersand. The rounded ampersand softens the industrial weight and adds a touch of craft.
Standard (on dark)
Monochrome variations
Accent variations
Hover state (interactive)
Hover to see the interaction
Typography
The type system is a two-voice mix: Bebas Neue for display impact and IBM Plex Sans for clean, readable body text. Literata appears only in the brandmark’s ampersand to accentuate and balance the boldness of the display type.
Font Stack
| Role | Font | Weights | Usage |
|---|---|---|---|
| Display | Bebas Neue | 400 | Headlines, logotype, CTAs |
| Body | IBM Plex Sans | 300–700 | Body copy, UI, navigation |
| Accent | Literata | 400 | Ampersand only |
Display Scale (Bebas Neue)
All display text uses Bebas Neue at weight 400 with tight tracking (-0.025em). The font naturally
renders in uppercase-style letterforms.
About Bebas Neue: Designed by Ryoichi Tsunekawa in 2010, Bebas Neue is a display sans-serif inspired by 1920s geometric typefaces like Futura. Its clean, bold proportions and tightly spaced uppercase letters deliver a powerful modern aesthetic perfect for headlines and brand messaging. The font has become a staple in modern web design, particularly favored for tech startups, creative agencies, and brands seeking strong, minimalist impact. Popular for hero sections, navigation headers, and bold editorial layouts.
HEADER XL
3.75rem (60px) · Hero headlines
HEADER Large
3rem (48px) · Page titles
HEADER Medium
2.25rem (36px) · Section headers
HEADER Small
1.875rem (30px) · Card titles
HEADER Extra Small
1.5rem (24px) · Buttons, labels
HEADER 2XS
1.25rem (20px) · Small buttons
Body Scale (IBM Plex Sans)
Body text uses IBM Plex Sans with a comfortable line height of 1.6. The font supports weights from 300 (light) to 700 (bold).
About IBM Plex Sans: Designed by Mike Abbink & Bold Monday as IBM’s corporate typeface, IBM Plex Sans is a grotesque sans-serif inspired by Franklin Gothic. Released under the SIL Open Font License in 2017, it was specifically designed to work well in user interface environments while maintaining excellent readability. The font has become widely adopted in tech and corporate websites, valued for its professional yet approachable character and extensive language support.
Large subheading text
1.25rem (20px) · Semibold (600)
Lead paragraph text for introductions
1.125rem (18px) · Regular (400)
Standard body copy for comfortable reading across long passages of text.
1rem (16px) · Regular (400)
Small text for captions, metadata, and secondary information.
0.875rem (14px) · Regular (400)
About Literata: A serif typeface designed for Google as part of their Noto font collection, Literata brings elegant, readable serif character to digital interfaces. While traditionally used in book typography, Literata has gained popularity in web design for adding sophisticated serif accents to predominantly sans-serif designs. It is commonly used for ampersands, pull quotes, and decorative elements in modern minimalist websites.
Text Colors
Primary text
Main content
Muted text
Secondary
Faint text
Tertiary
Color Palette
The palette adapts between dark mode (default) and a warm parchment light mode. All colors are defined as CSS custom properties for easy theming.
Surfaces
Surface
Surface Raised
Surface Overlay
Accents
Accent
Primary actions
Accent Hover
Hover states
Accent Alt
Secondary accent
Borders
Border
Subtle dividers
Border Strong
Emphasized edges
Buttons
Buttons use the display font (Bebas Neue) for a bold, industrial feel. Three sizes are available.
Primary Buttons
Secondary Buttons
Button Pairing
Usage Guidelines
- Primary — Main calls to action: “View the Work”, “Get in Touch”, email links
- Secondary — Alternative actions, less emphasis