Typography
Outfit geometric sans paired with Space Mono machined uppercase labels.
Live portfolio template
Signal Portfolio Template: Signal is built for engineers and product leaders.
A precise, proof-first portfolio with an immersive mint-emerald aesthetic.
Project proofClear timelinesTechnical credibility
Visual system
Obsidian dark backdrop with vibrant mint-emerald highlights (switchable to warm chalk-white).
SEO structure
Clear headings, project sections, metadata controls, and a public preview path make this template easier to understand and share.
Template style guide
The design system behind Signal.
Use this guide to decide whether the template matches your work before you publish.
Obsidian
oklch(0.09 0.015 160)
Mint Emerald
oklch(0.72 0.16 160)
Chalk White
oklch(0.985 0.005 153)
Card BG
oklch(0.13 0.015 160 / 55%)
Layout rhythm
Asymmetrical double-column sections, bento grids, and embedded inline forms.
Component language
Floating glass navigation, stacking cards, borderless input fields, and custom floating widgets.
Best content to prepare
One-line positioning and status indicator
Outcome-led projects deck with tags
Timeline details (experience, education, awards)
Inline message form and newsletter signup
Technical Spec Sheet
Engineering blueprint.
Developer specifications, design tokens, responsive thresholds, and structural rules powering this template.
Visual Strategy
Signal is a premium-tech-editorial portfolio template designed as an atmospheric, themeable presentation canvas for professionals who want to highlight their journey, authority, and accomplishments.
premium-tech-editorialHue: mint-emerald (oklch(0.72 0.16 160))
The Floor
The page canvas operates with Obsidian Dark (#0c100e) switchable to Warm Chalk-White (#fbfcf9). Layout transitions handle values cleanly across dark and light palettes.
Dark Canvasoklch(0.09 0.015 160)
Light Canvasoklch(0.985 0.005 153)
03 / BRAND COLOR MATRIX
Accent & Surface Hues
Accent (Dark)
oklch(0.72 0.16 160)
Accent (Light)
oklch(0.55 0.15 160)
Obsidian Paper
oklch(0.09 0.015 160)
Chalk Paper
oklch(0.985 0.005 153)
04 / TYPOGRAPHIC HIERARCHY
Text Tokens
| Token | Size | Weight | Purpose / Use Case |
|---|---|---|---|
| display-xl | clamp(2.5rem, 5.5vw, 4.8rem) | 900 | Hero main headline |
| display-lg | clamp(1.8rem, 4vw, 3.2rem) | 850 | Section title headings |
| display-md | clamp(1.5rem, 3vw, 2.2rem) | 800 | Project card titles, contact header |
| body-lg | 1.15rem | 450 | Hero bio paragraph, big quotes |
| body-md | 0.95rem | 450 | Default body copy, descriptions |
| body-sm | 0.85rem | 400 | Card timestamps, secondary metadata |
| label-mono | 11px | 700 | Monospace tags, status text, index counts |
Developer Spec Sheet
Building or customizing this template?
Turn on Developer Mode to inspect styling tokens, layout padding values, shape border-radii, responsive queries, and the raw specs JSON.
Best fit
Use Signal when the portfolio needs this kind of reader.
Software engineers & developers
Technical founders & executives
Systems architects & researchers
Medical professionals & doctors
Consultants & strategists
Creative directors & designers
Lawyers & legal advisors
Writers & journalists
Motion direction: Scroll-stacking project cards with blur reveals and background radial glows.
Suitability by target role
Engineers & Architects
Monospace accents and structured tables represent technical rigour perfectly.
Doctors & Clinicians
The mint-emerald highlights offer a clean, medical-grade confidence and pristine clinical authority.
Founders & Executives
High-impact headers and interactive project decks focus on results and outcomes.
Consultants & Counsel
Minimalist bento-grids and deep narrative sections convey structured thinking.
Frequently Asked Questions
Got questions about Signal?
Explore answers to common questions about this layout, design styling choices, and performance optimizations.
Signal features a premium-tech-editorial aesthetic with an atmospheric, themeable canvas. It pairs heavy geometric Outfit display headlines with machined Space Mono technical labels, accented by a vibrant mint-emerald green to guide the visitor's focus.
Signal supports two native modes: Obsidian Dark (default, using a deep oklch(0.09 0.015 160) backdrop and radial emerald glows) and Warm Chalk-White (using a warm oklch(0.985 0.005 153) canvas). You can toggle between them seamlessly via a dedicated floating widget.
Signal uses GSAP ScrollTrigger to enable physical stacking cards on scroll. For optimal performance, backdrop mesh glows are kept static to save GPU cycles, and the stacking animation is disabled on viewport sizes below 1024px to ensure smooth natural scrolling on mobile devices.
Signal is built specifically for software engineers, systems architects, doctors, and product founders. The structured asymmetric grid, metadata labels, and interactive proof sections establish professional credibility, clinical authority, and clear results.
Instead of intrusive modal overlays or page redirects, Signal integrates forms directly into the linear page flow. The inputs feature custom 12px rounded borders, transition smoothly to green accent focus outlines, and store submissions locally on the client side as frontend mocks.
Ready to build