emmi.framer.website website design: fonts, colors and UI patterns

Overview

Emmi Wu's portfolio presents a deliberately unpolished, craft-forward visual system that balances editorial refinement with playful spontaneity. The design operates across two distinct modes: a warm off-white canvas for daytime browsing and a near-black dark mode for dramatic contrast. The core personality emerges from the tension between classical serif typography—used for display and poetic moments—and utilitarian monospace for navigation, labels, and functional text. The layout rejects rigid grids in favor of scattered, collage-like compositions where cards, stickers, and image tiles appear to have been placed by hand. Tiny ASCII-art sprites and hand-drawn icons populate the negative space, reinforcing the designer's stated interests in prototyping, storytelling, and visual craft. This is a portfolio that performs personality rather than merely describing it.

Colors

The palette is intentionally restrained, with warm neutrals and a small set of vivid accents that appear in specific component roles. The system supports light and dark modes through canvas and ink inversion.

The light mode dominates the portfolio's work and about sections, where the warm off-white canvas allows photography and colorful project thumbnails to breathe. The dark mode appears in the footer, creating a dramatic terminal-like atmosphere where the ASCII sprites glow in pink and green against the deep background. Accents are deployed sparingly and semantically: orange signals identity and primary information, peach provides secondary containment, green labels specific metadata, and blue handles decorative and sticker-like elements. No gradients or shadows are employed; color blocks sit flat against the canvas.

Typography

Four font families establish the typographic hierarchy, each serving a distinct communicative role. The display voice is entirely Self Modern's elegant serif, while functional and technical text belongs to IBM Plex Mono. Body copy uses the lighter weight of Figtree, and Kode Mono appears available for specialized code-like moments.

Self Modern carries the portfolio's editorial soul, its high-contrast letterforms and slight italic lean lending sophistication to even brief phrases. IBM Plex Mono provides the structural backbone, its mechanical regularity creating deliberate friction against the serif's warmth. Figtree at light weight handles extended reading without competing for attention. Kode Mono Bold remains available for specialized emphasis or code-adjacent moments. Verify licensing for these families before production use; Self Modern is attributed to Lucas Le Bihan, IBM Plex Mono to Bold Monday with designers Mike Abbink, Paul Van Der Laan, and Pieter Van Rosmalen, Figtree to Erik Kennedy, and Kode Mono carries no listed attribution.

Layout

The layout system abandons conventional centered containers in favor of asymmetric, scattered compositions that suggest physical collage. Elements appear to float at slight rotations, with generous and irregular negative space between them.

The playground page demonstrates the most radical expression: project cards of varying dimensions are distributed across a dotted grid background without apparent alignment to a single axis. Some cards overlap slightly; others sit in isolation. The implicit grid is loose, perhaps 12 columns at desktop scale, but items break from it freely. A subtle dot pattern at 1rem or smaller intervals provides texture without enforcing structure.

The about section compresses the collage into a tighter cluster: a large orange card rotated several degrees counter-clockwise anchors the composition, while a smaller peach text box overlaps its lower right corner. A blue square sticker and green rectangular label orbit nearby at independent angles. This creates depth through layering rather than shadow.

The footer returns to relative order with a three-column structure: a wide left column for the poetic quote, a middle column for contact links, and a right column for page navigation. Below this, the ASCII sprites scatter across the full width in a field-like distribution, their positions seemingly randomized but maintaining minimum separation.

Spacing follows a 0.25rem base unit. Section vertical padding is generous at 6rem, allowing each mode shift to feel deliberate. Card internal padding is 1.5rem, providing comfortable breathing room for text without excessive containment. Between scattered elements, distances vary from 1rem to 4rem, creating rhythm through variation rather than repetition.

Visual language

The visual language is defined by three signature elements: the scattered collage composition, the hand-drawn sprite system, and the deliberate material flatness.

Collage composition manifests as rotated rectangular cards, overlapping edges, and elements that appear to have been placed rather than positioned. The orange about card tilts approximately 8 degrees; the peach text box tilts slightly less in the opposite direction. This imperfection signals human touch and rejects the precision of template-driven portfolios.

The sprite system consists of tiny ASCII-art and line-drawn figures scattered across both light and dark backgrounds. On the light canvas, small green and pink icons appear near card corners and in open space—simple forms resembling plants, faces, and abstract marks. On the dark canvas, these sprites multiply and glow in neon pink and yellow-green, creating a digital garden effect. They function as texture, not content, and their density increases in dark mode.

Material flatness means no drop shadows, no gradients, no glassmorphism. Cards and stickers exist as solid color blocks with crisp edges. The only dimensional cue is the occasional folded corner on text boxes, rendered as a small triangular cutout revealing a darker shade beneath—suggesting paper craft without attempting photorealism.

Photography and project imagery appears unframed within cards, bleeding to the edges without borders or rounded corners on the images themselves. The card container provides the shape; the image provides the content.

Components

Navigation bar

• Anatomy: Horizontal bar spanning full viewport width, with logo or name at left and link cluster at right
• Surface: Transparent background over canvas; no border or shadow
• Typography: {typography.navigation} in uppercase
• Spacing: Approximately 1.5rem vertical padding, 2rem horizontal margins
• Composition: Flex row with space-between alignment

Info card

• Anatomy: Large rectangular container with text content, occasionally with small square cutouts along top edge suggesting binder holes or paper texture
• Surface: {colors.accent-orange} background with {colors.ink-light} text
• Typography: {typography.hero-display} for primary statement; line breaks follow natural phrase rhythm
• Shape: {rounded.card} corners; slight rotation applied via transform, approximately -8 degrees
• Spacing: {spacing.card-padding} internal padding
• Variants: May appear with or without top-edge square details; rotation angle varies by context

Text box

• Anatomy: Smaller rectangular container for secondary biographical or descriptive content
• Surface: {colors.accent-peach} background with {colors.ink} text
• Typography: {typography.body-mono} for technical, personal details
• Shape: {rounded.card} corners; slight rotation, approximately 3 degrees counter to adjacent info card
• Spacing: {spacing.card-padding} internal padding
• Composition: Positioned to overlap info card corner, creating layered depth

Sticker

• Anatomy: Small square decorative element, often containing a simple icon or sprite
• Surface: {colors.accent-blue} background
• Shape: {rounded.sticker} corners; perfectly square aspect ratio
• Spacing: Compact internal padding of approximately 1rem
• Composition: Orbits near larger cards at independent angles

Label tag

• Anatomy: Small rectangular identifier, often containing non-Latin script or short metadata
• Surface: {colors.accent-green} background with {colors.ink} text
• Typography: {typography.label} or slightly larger depending on script requirements
• Shape: {rounded.card} corners; minimal padding

Project card

• Anatomy: Image-first container showing photography, illustration, or design work
• Surface: Image fills entire card; no border, no overlay, no text within card
• Shape: Sharp corners; no radius on image itself
• Spacing: Variable external margins creating scattered distribution
• Composition: Appears in grid-like but non-aligned distribution across dotted canvas

Footer

• Anatomy: Full-width dark section with three-column top area and full-width sprite field below
• Surface: {colors.canvas-dark} background
• Typography: {typography.section-display} in italic for quote; {typography.label} for link columns
• Composition: Quote left-aligned with generous right margin; link columns center and right; sprites distributed as texture across lower two-thirds

Responsive behavior

The scattered collage layout presents inherent challenges at narrower viewports. The current desktop implementation shows full card distribution with visible negative space. At reduced widths, the system should maintain the collage spirit while preventing overlap that obscures content.

Recommended approach: maintain the rotation and layering effects but transition from free scatter to a loosely staggered single column. Card rotations should reduce to 2-4 degrees to prevent excessive cropping at viewport edges. The about section's overlapping pair should stack vertically with the peach text box beneath the orange card, preserving the slight rotation on each.

The sprite field should remain visible but reduce in density, perhaps showing one-third of the desktop sprite count distributed across the same vertical space. Navigation should collapse to a compact menu or remain as a small set of uppercase links, depending on link count.

The dark footer quote, being the most text-heavy element in the most dramatic context, should maintain its large display size down to tablet, then scale to {typography.hero-display} at mobile to preserve readability against the busy sprite field.

Practical implementation guidance

### Preserve - The exact rotation angles and overlapping relationships between about-section cards; these are calibrated for specific visual tension - The flat color-block aesthetic without shadows or gradients - The dotted canvas texture on light backgrounds; this is essential to the playground atmosphere - The two-mode color system with explicit light and dark contexts - The sprite density difference between modes: sparse and delicate on light, dense and glowing on dark

### Avoid - Centering all content or enforcing strict grid alignment; this destroys the collage personality - Adding shadows or elevation to cards; the design achieves depth through overlap and rotation only - Rounding corners on project images; keep image edges sharp within potentially rounded containers - Generic sans-serif for display text; Self Modern's character is irreplaceable in this system - Excessive sprite animation; the static scatter is part of the craft aesthetic

### Recommended build order 1. Establish the two canvas backgrounds and ink colors as root variables 2. Implement the typography hierarchy with Self Modern and IBM Plex Mono loaded first 3. Build the navigation bar as a transparent, flex-based component 4. Create the info card and text box with rotation transforms and overlap positioning 5. Develop the dotted canvas background pattern 6. Implement the project card grid with variable positioning 7. Build the dark footer with sprite field 8. Add accent colors to specific component roles

### Accessibility - Ensure text on rotated cards maintains sufficient contrast; the orange-to-cream pairing meets requirements, but verify if rotation causes partial background clipping - Provide prefers-reduced-motion alternatives if any sprite or scroll animations are added; the static design should remain fully functional - Consider the dark mode quote readability; the large serif text against near-black works at display sizes but would fail at body scale - Maintain keyboard focus indicators that respect the flat aesthetic, perhaps using outline offsets in accent colors rather than default browser rings

Scope note

This guide covers the portfolio homepage, playground, and footer surfaces visible in the supplied images. Navigation interactions, project detail pages, form behaviors, and any motion or scroll-triggered animations are not represented. Measurements are practical adaptation targets derived from visual inspection. The exact sprite positioning algorithm and any responsive breakpoint specifications are not included.

More website design guides

Browse website design guides by pattern and website.