Paper
#ffffffPage background, light-section canvas, inverse-mode text on dark sections
Elvina Prasad
elvinaprasad.com
Website preview
The design language
A portfolio language built on typographic monumentality: massive Neue Montreal headlines that occupy the full width of the viewport, set against a binary canvas that flips between pure white and pure black across scrolling sections. The system is entirely achromatic — no brand color, no accent, no gradient — and lets scale, weight, and light/dark inversion do all the expressive work. Project imagery overlaps the type rather than sitting beside it, breaking the grid and making the text itself a compositional surface. Everything else is quiet: a two-letter monogram, a single nav word, a hairline scroll cue.
Color palette
neutral
Ink
#000000Dark-section canvas, headline type on light sections, full-bleed background blocks
Graphite
#333333Body copy, secondary text, hairlines and card borders — the working neutral for content
Bone
#f7f7f7Tinted surface for subtle elevation against the white canvas, used for off-white blocks and muted framing
Steel
#525252Muted helper text, caption weight, secondary metadata where Graphite reads too heavy
Typography
Type scale
Major Second (1.125) · 16px basedisplay
178px · 300 · 1 · 8.9px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1.1 · 2px trackingThe quick brown fox jumps
heading
38px · 400 · 1.1 · 1.9px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.1 · 1.6px trackingThe quick brown fox jumps
subheading
27px · 300 · 1.3 · 1.35px trackingThe quick brown fox jumps
body
18px · 300 · 1.4 · 0.9px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · 0.7px trackingThe quick brown fox jumps
caption
11px · 400 · 1.3 · 0.55px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neue Montreal
- Weights
- 300, 400, 500
- Sizes
- 11px, 18px, 27px, 178px
- Line height
- 1.00–1.40
- Letter spacing
- 0.05em positive across all sizes
- Fallback
- Inter, Manrope, or Space Grotesk
Signature display and heading face — weight 300 for monumental headlines at 178px, weight 400 for subhead and body, weight 500 for emphasized labels. The 178px display line-height of 1.00 lets letterforms stack into a typographic block; 0.05em positive tracking prevents the hairline weights from collapsing at small sizes and adds the wide, airy grotesk character that defines the brand.
Additional typeface
Neue Montreal Variable
- Weights
- 400 (variable axis)
- Sizes
- 14px, 32px, 38px, 40px
- Line height
- 1.00–1.43
- Letter spacing
- 0.05em positive
- Fallback
- Inter variable, Manrope variable
Variable-axis instance used for interactive and mid-scale elements — links, icons, navigation, and mid-weight display blocks. The variable axis lets weight, optical size, and slant interpolate smoothly for hover and active states without swapping fonts.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.43
- Fallback
- system-ui
System fallback only — appears in non-brand utility contexts where a system font is acceptable
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 85px
- Card padding
- 21px
- Element gap
- 16px
Border radius
tags
0pxcards
0pximages
0pxbuttons
0pxSpacing scale
5px7px14px16px17px21px29px32px50px72px85px89px180px270px273pxGuidelines
Do
- Use Neue Montreal weight 300 for all display headlines — the hairline weight is the signature; never substitute 600 or 700 here.
- Set display type at 178px with line-height 1.00 so letterforms stack into a typographic block — do not increase line-height to 'improve readability'.
- Apply 0.05em positive letter-spacing to every Neue Montreal size — the tracking is non-negotiable and defines the voice.
- Alternate full-bleed #ffffff and #000000 sections at major breakpoints to create the light/shadow rhythm — never use tints, never use gradients.
- Let project images overlap display headlines by 40–80px — the collision is compositional, not an accident to fix.
- Invert all text and icon color to match the current section's canvas — Paper type on Ink backgrounds, Ink type on Paper backgrounds.
- Keep navigation to the monogram and a single 'MENU' label — no secondary nav, no breadcrumb, no utility links.
Don’t
- Do not introduce any chromatic color — the palette is binary; adding a brand hue breaks the editorial system.
- Do not add box-shadows, drop-shadows, or any elevation effects — the design uses color inversion instead of depth.
- Do not use border-radius on cards, buttons, images, or any surface — every corner is 0px and sharp.
- Do not set display type below 100px or use a different weight for hero headlines — 178px / 300 is the only correct scale step.
- Do not use Arial or system fonts for display, headings, or navigation — Arial is utility-only.
- Do not wrap content in a max-width container with auto margins — sections are full-bleed by design.
- Do not place project images beside or below the headline in a clean grid — they must overlap or bleed into the type.
Components
Monogram Mark
Brand identity anchorTwo lowercase letters 'ep' set in Neue Montreal 400, ~40px, 0.05em tracking, color flips between Paper (#ffffff) and Ink (#000000) to match the current section. Fixed top-left, 32px–40px margin from the edge. The only persistent brand mark — no wordmark, no logotype.
Menu Trigger
Primary navigationSingle word 'MENU' in uppercase Neue Montreal 400, ~14px, 0.05em tracking, color flips Paper/Ink by section. Fixed top-right, 32px–40px margin. No visible affordance beyond the word — no hamburger icon, no border.
Display Headline
Section-defining typographySet in Neue Montreal weight 300 at 178px, line-height 1.00, letter-spacing 0.05em (8.9px). Occupies nearly the full viewport width and bleeds past margins; may overlap with project imagery. Color inverts per section: Paper on Ink canvas, Ink on Paper canvas. The display is the hero — no accompanying eyebrow or kicker.
Scroll Cue
Scroll affordance and section transitionLabel 'KEEP SCROLLING' in Neue Montreal 400 uppercase, ~14px, 0.05em tracking, paired with a circular icon button (24–32px diameter, 1px border, downward chevron, no fill). Sits bottom-right of the viewport, fixed or section-anchored. The circle is the only geometric form in the system.
Project Mockup
Portfolio artifactFull-bleed project screenshot, 0px radius, no border, no shadow, no background card. Positioned absolutely or in flow, intentionally overlapping the display headline by 40–80px. Images are raw edges — no mask, no tilt, no parallax wrapper.
Light Section Block
Section surface — light modeFull-bleed #ffffff background, no internal max-width constraint. Content aligns to viewport edges with 72px left/right gutter on content bands. Headlines and body in Ink (#000000) and Graphite (#333333).
Dark Section Block
Section surface — dark modeFull-bleed #000000 background, viewport-spanning. All type and icons in Paper (#ffffff). Used to invert the reading rhythm — the page alternates between these two states at major breakpoints rather than using subtle tints.
Hairline Divider
Section separation1px line in Graphite (#333333) spanning the full viewport width. No padding above or below — the line IS the spacing. Used sparingly between light and dark sections to reinforce the break.
Icon (Utility)
Interface icons and affordances1px stroke, geometric, monoline, no fill. Color matches the current section's text color (Paper or Ink). Sized 16–24px. Only the scroll-arrow circle and a few inline icons appear — no icon system, no grid.
Surfaces & elevation
Level 1
Paper
#ffffffLight section canvas — the default reading surface
Level 2
Bone
#f7f7f7Tinted off-white block for subtle contrast against Paper, used for nested surfaces within light sections
Level 3
Ink
#000000Dark section canvas — the inverted reading surface that resets visual rhythm
Elevation is expressed through color inversion (Paper ↔ Ink) and full-bleed section blocks, never through box-shadow. The system has no shadow tokens because depth is unnecessary — the binary canvas does the structural work that soft shadows do in conventional UIs.
Layout & imagery
Layout
Full-bleed page model with no max-width container — content reaches the viewport edges with 72px left/right gutter on text bands. The page alternates between full-viewport-height black sections and full-viewport-height white sections at major breakpoints, creating a binary light/dark rhythm. Each section is anchored by a single 178px display headline that occupies the upper half of the viewport; project imagery appears in the lower half and overlaps the headline. Navigation is minimal: a two-letter monogram fixed top-left, a 'MENU' label fixed top-right, a 'KEEP SCROLLING' cue fixed bottom-right. No sidebar, no mega-menu, no sticky header beyond the three corner anchors.
Imagery
Imagery is product-focused and raw: full-bleed project screenshots and device mockups with no border, radius, or shadow. Images sit on the canvas with sharp edges and intentionally overlap display headlines, breaking the typographic block. No photography, no illustration, no decorative graphics — the project artifacts ARE the imagery. Density is low: one or two images per section, each given room to collide with the type.
Design notes
Agent Guide
**Quick Color Reference** - text (light section): #000000 Ink - text (dark section): #ffffff Paper - background (light): #ffffff Paper - background (dark): #000000 Ink - border: #333333 Graphite - muted text: #525252 Steel - primary action: no distinct CTA color **3–5 Example Component Prompts** 1. *Full-viewport dark hero section.* Background #000000 Ink. Headline 'Human centred designs' in Neue Montreal weight 300, 178px, line-height 1.00, letter-spacing 0.05em (8.9px), color #ffffff Paper. Monogram 'ep' top-left at 40px, #ffffff. Label 'MENU' top-right at 14px uppercase, #ffffff. No other content. 2. *Light portfolio section with overlapping imagery.* Background #ffffff Paper. Display headline in Neue Montreal weight 300, 178px, color #000000 Ink, anchored top-left. Two project mockup images (phone screenshot and packaging) positioned to overlap the headline by ~60px from below, 0px radius, no border, no shadow. Scroll cue 'KEEP SCROLLING' at 14px uppercase + 32px circle border button with 1px #000000 stroke and a downward chevron, fixed bottom-right. 3. *Hairline section divider.* Full-viewport-width 1px line in #333333 Graphite, no padding above or below, sits between a light and dark section block to mark the transition. 4. *Footer link row.* Background #f7f7f7 Bone. Three text links in Neue Montreal 400, 14px, 0.05em tracking, color #333333 Graphite, separated by 32px gaps. No underlines, no icons. 5. *Caption block.* Single line at 11px Neue Montreal 400, 0.05em tracking, color #525252 Steel, 50px top/bottom padding. Used for project metadata and date stamps.
Similar brands
Locomotive
Agency portfolio with massive display type on a binary light/dark canvas, no accent color, and project imagery that bleeds into the layout rather than sitting in cards
Rauno Freiberg
Single-creator portfolio using Neue Montreal–weight grotesk type at extreme display sizes, alternating full-bleed black and white sections with no decorative chrome
Pentagram
Editorial typography as the primary visual element, sharp 0px corners throughout, no shadows, and a strictly achromatic palette that lets the work speak
Ruslan Yevchuk
Designer portfolio with oversized 100–200px headlines, 0px radius, full-bleed sections, and project artifacts overlapping the type instead of living in a grid
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
