Names and contact details
Key details remain text, so they do not disappear when images are blocked.
2026Brand identity, website, and email signature builder
Signlume: Email Signature Platform
A visual signature builder designed around the limits of email.
Core Infinite / ProjectWeb
A visual signature editor built around the limits of everyday email apps.
Signlume helps people turn a name, role, portrait, and contact details into an email signature. The project covers the brand, website, template library, and editing workflow.
The central design problem was the gap between a browser and an inbox. An editor can offer rich controls, but email apps may block images, change colors, or ignore parts of a layout. We kept editing separate from the simpler signature prepared for email.
Published signatures
Each signature keeps its chosen template version when the library changes.
Short animation
Motion adds personality, with a still version for apps that cannot play it.
Email setup
Installation steps end with a test message in the user's email app.
Give people design freedom within email limits
A signature needs to work in a small space and across email apps with different rules. A layout that looks right in the editor may look different after it is sent.
Teams add another need: people should be able to update their own details while following a shared brand. The editor had to make those boundaries easy to understand.
What we had to balance
Flexible editing and dependable email output
Personal details and shared team styles
Optional motion and quick reading
Our approach
Design in the browser. Prepare for the inbox.
The working design and the installed signature serve different jobs. The editor offers layers, image tools, and undo. Publishing turns that design into simpler email code.
Preview checks sit before publishing, not after installation. People can review narrow layouts, dark mode, blocked images, and plain text before sending a real test message.
- Keep contact details readable without images
- Show email limits when they affect a choice
- Make save, publish, and install separate steps
The user flow
Find a starting point
Search the library by category, access level, or animation. Open a full preview, then start with sample details, saved profile details, or a blank draft.
Make it your own
Add names, roles, contact links, portraits, and logos. Arrange the elements and adjust images with a live preview beside the controls.
Check the result
Review email views and warnings about size or layout. Save the draft, then publish the version intended for installation.
Install the signature
Follow the guide for the chosen email app. Send a test message and check it on the devices and apps that matter to the user.
What we designed
Email output
The published signature uses a smaller set of layout tools than the editor.
- Table layouts and inline styles
- Text for names, roles, and contact details
- Clickable links and a plain-text version
- Checks for code size and remote images
- No scripts, forms, or browser-only controls
Versions and recovery
Drafts, template versions, and published signatures are kept separate so a new edit does not replace earlier work.
- A saved template version for each signature
- Publication history for earlier outputs
- Unsaved-work warnings and local recovery
- Recovered work opens as a draft
Shared team designs
Teams use shared starting points while each signature has a clear owner.
- Separate owner, admin, brand manager, member, and viewer roles
- Role-based editing and publishing controls
- Shared designs for consistent layouts
Key decisions
What we chose and why
Prepare image crops before sending
DecisionUse the selected template's image area to calculate the crop and zoom.
WhyEmail cannot be expected to support every browser image effect. Preparing the image helps preserve the placement chosen in the editor.
Keep animation short
DecisionGive each animation a complete still state and keep contact details outside it.
WhySome email apps stop or block animation. The signature still needs to identify the sender and provide usable links.
Design details
Website and app
Bold on the website, quieter in the editor
Large headlines, fine lines, square buttons, and warm paper colors give the website a strong identity. The editor uses smaller type and softer backgrounds so the signature remains the focus.
- Clear separation between tools and preview
- Grouped controls for content, images, and brand settings
- Consistent layouts on wide and narrow screens
Editing
Make small adjustments easy to follow
A layer list shows how the signature is built. Direct controls handle image fit, fill, and tiling, while undo and redo let people try changes without starting over.
- Pointer and keyboard layer reordering
- Focused controls for the selected element
- Zoom for detailed work
- Visible save and publish states
Signlume in motion
Screen recording
Signlume homepage preview
A short screen recording of the Signlume homepage, from the wordmark to the product introduction.
Product care
Email differences
A preview is not a delivery guarantee
Checks can catch common problems, but email apps still handle layouts differently. The installation flow asks users to send a real message rather than treating the preview as proof.
- Dark, narrow, images-off, and plain-text previews
- Still images when animation is unavailable
- No promise of identical results in every email app
Activity reporting
An image load is not a confirmed read
Email scanners and privacy services can load images or follow links without a person reading the message. Reporting labels known automated traffic separately and presents activity as an estimate.
- Overall signature and link activity
- No individual recipient profiles
- Clear limits beside view and click figures
The brand
Give the signature character without hiding the message.
The Signlume identity starts with a handwritten stroke and a small point of light. It connects the personal feel of a signature with a bright, expressive website and a quieter working app.
Primary wordmark
The Lume Stroke is an S-shaped gesture that ends in a point of light. The connected wordmark carries that movement through the full name. Light, dark, and one-color versions cover different backgrounds.
Primary wordmark
Ink and Signal Blue on a light background.
Reversed wordmark
Paper and Acid on a dark background.
Lume Stroke
The compact mark for small spaces.
Lume Stroke reversed
The compact mark on dark backgrounds.
One-color mark
A single-color version for print and engraving.
App icon
A compact version for app and browser icons.
Signal Blue version
A bright version for light backgrounds.
Acid version
A high-contrast version for dark backgrounds.
Signal Pink version
A softer color option for supporting artwork.
Ink
#0A0A0ADark backgrounds, text, and lines
Paper
#F2EEE6Warm website background
Acid
#D7FF3FBright details on dark backgrounds
Signal Blue
#3047FFLinks, focus, and actions
Signal Pink
#FF6F91Secondary brand color
Pearl
#FFFDFCApp background
Graphite
#202020App text and controls
Mineral Blush
#F5D9DDSoft background
Mist Lavender
#DDD5F3Soft background
Crystal Violet
#C9BFE9Supporting accent
Sea Glass Mint
#D6E9E2Supporting accent
Syne
Website headlines
Your identity, set in motion.
Plus Jakarta Sans
Website body text and controls
Design it. Publish it. Install it.
Newsreader
App headings and feature stories
A signature ready for the inbox.
Manrope
App text and controls
Save, check, and publish.
IBM Plex Mono
Versions and technical labels
EMAIL HTML / VERSION 13
Writing style
- Short, active instructions
- Clear explanations of email limits
- Specific facts instead of broad promises
Images
- Glass forms and colored light
- Signature previews and real product screens
- Portraits framed around the sender's identity
Where it is used
- Connected wordmark on website pages
- Compact Lume Stroke in app and browser icons
- Large Syne headlines paired with fine lines
- Softer colors around editor controls
What to avoid
- Stretching or separating the connected wordmark
- Turning contact details into a single image
- Looping animation that competes with the message
Motion
Short reveals guide attention on the website. Videos pause when hidden, with still images for reduced motion. Signature animation ends on a useful portrait.
A closer look
The homepage introduces the Signlume wordmark and the design, publish, and install steps.
The library uses large previews to help people compare signature styles.
Search and filters narrow the library by category, access level, and animation.
The Quiet Line template keeps the sender's details and links easy to read.
The teams page introduces shared designs, people, roles, and publishing.
The compatibility page explains dark mode, blocked images, narrow layouts, and email-app differences.
The Gmail guide covers manual installation and a final test email.
A clear path from design to installation
The project connects the template library, editor, publishing flow, and setup guides. Its main design choice is to keep creative tools in the browser while preparing a simpler result for email.
Services behind this project
Explore the scope, process, and deliverables for similar work.
Start a project
Tell us what you need to build.
Share the product, the current stage, and the support you need. We will reply with practical next steps.
Start a project