meshp.art — Vera

Overview

meshp.art — Vera is a minimalist portfolio platform for creative technologists, emphasizing restraint and intentionality. The design language centers on a gallery aesthetic: a near-black canvas (#040100) punctuated by a warm, earthy primary accent (#c59c6d) that evokes aged brass or terracotta. The brand personality is quiet, precise, and unapologetically technical—a space where code and craft converge. The UI employs what we call "Austere Warmth": the interface strips away ornament entirely (no gradients, no blur effects, no decorative elements beyond a single radial glow on entry), allowing the warm accent to command attention through contrast and restraint rather than saturation. Voice: measured, direct, never casual. Example: "Your work speaks louder than any introduction."

Colors

The color system is built on a near-black foundation (#040100 surface, #060201 container-lowest) that establishes a gallery-like intimacy. The primary accent (#c59c6d) is a warm, muted ochre—neither gold nor brown, but a deliberately chosen middle ground that reads as both sophisticated and approachable. It appears on interactive elements (buttons, links, focus states) and the hero glow, creating a single focal point. Secondary colors are desaturated earth tones: #17100c (dark brown, used for secondary container backgrounds) and #d0c5ba (warm beige, used for secondary text). The error/tertiary color is a restrained red (#e40014) reserved for alerts and critical actions. All text on dark surfaces uses #ece7e1 (off-white, not pure white) to reduce eye strain. The surface stack progresses in

Typography

The type system pairs Inter (humanist sans-serif, 400–700 weights) for all UI text with JetBrains Mono (monospace, 400–600 weights) for code and technical content. Display (60px, 700 weight, -0.04em tracking) is used sparingly—only for hero headings like "Click to Enter." Headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks content into subsections. Body-lg (18px, 400 weight, 28px line-height) is the default for descriptive copy, while body-md (16px, 400 weight, 24px line-height) handles UI labels and secondary text. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and badges; label-sm (12px, 500 weight, 0.02em tracking) to metadata and captions. All text on the dark background uses line-height ≥ 1.4× font size to ensure readability

Layout

The layout system is built on a 12-column grid with 24px gutters and a 1280px max-width container. The hero entry screen (fixed, full-viewport) uses flexbox centering to position the "Click to Enter" heading and scroll indicator. Content sections below the fold follow a fluid-to-fixed pattern: on mobile (< 768px), content stacks single-column with 12px side padding; on tablet (768px–1024px), it expands to 2–3 columns; on desktop (> 1024px), it locks to the 1280px container with 24px horizontal margins. Vertical rhythm is maintained through a spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major breaks, and xl (64px) for hero-to-content transitions. Cards and containers use md (24px) padding internally; list it

Elevation & Depth

Depth is conveyed through color and border shifts rather than shadows, maintaining the flat, gallery aesthetic. The elevation system defines three levels: Level 1 (Base, surface #040100) is the page background with no shadow. Level 2 (Standard Card, surface-container-low #0a0503) sits 1px above the base, marked by a 1px solid border in outline-variant (#4a4238). Level 3 (Elevated/Modal, surface-container #0f0a06) sits 2px above the base, marked by a 1px solid border in outline (#8a7f75). Interactive hover states receive a glow: box-shadow: 0 0 40px rgba(197, 156, 109, 0.3) on primary buttons a

Shapes

The shape philosophy is "Architectural Minimalism"—rounded corners are used sparingly and purposefully, never exceeding 1rem (16px). Buttons and primary interactive elements use rounded.lg (1rem / 16px) to signal clickability; cards and containers use rounded.lg (1rem / 16px) for consistency. Input fields use rounded.DEFAULT (0.5rem / 8px) to differentiate them from buttons while maintaining the geometric aesthetic. Badges and pills use rounded.full (9999px) to create a distinct visual category for metadata and status indicators. The scroll indicator wheel uses rounded.full (9999px) to echo th

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses {colors.primary} (#c59c6d) background with {colors.on-primary} (#120905) text, 48px height, 12px–24px padding, and {rounded.lg} (1rem) radius. On hover, the background shifts to {colors.primary-fixed-dim} (#b89968) and a 0 0 40px rgba(197, 156, 109, 0.3) glow appears; the element scales to 1.02× over 150ms. On active (click), the background becomes {colors.primary-fixed} (#d4b896) and scales to 0.98×. button-secondary is identical except for a transparent background, 2px solid {colors.primary} border, and {colors.primary} text; on hover, the background becomes rgba(197, 156, 109, 0.1) and the border shifts to {colors.primary-fixed-dim}. All buttons use {typography.label-md} (14px, 600 weight, Inter) a

Do's and Don'ts

**Do**

• Do use the primary accent (#c59c6d) sparingly—reserve it for CTAs, focus states, and the hero glow. Overuse dilutes its impact.
• Do maintain the dark aesthetic throughout; never use pure white (#ffffff) as a background. Use {colors.surface} (#040100) or {colors.surface-container-low} (#0a0503) instead.
• Do apply consistent 24px gutters and 1280px max-width to all content sections; this creates the gallery-like rhythm.
• Do use Inter for all UI text and JetBrains Mono only for code blocks; mixing fonts breaks the minimalist contract.
• Do transition all interactive states over 150ms cubic-bezier(0.4, 0, 0.2, 1); this easing matches Material 3 and feels intentional.
• Do use the glow effect (0 0 40px rgba(197, 156, 109, 0.3)) only on hover states for primary actions; it signals interactivity without noise.

**Don't**

• Don't use shadows (box-shadow with blur and offset) for elevation; use border color shifts and the glow effect instead. Shadows feel too soft for this aesthetic.
• Don't exceed 1rem (16px) border-radius on any element; sharp corners feel austere, full rounding feels playful. The 1rem maximum is the line.
• Don't use gradients, blur effects (backdrop-filter), or glassmorphism; this design is flat and intentional, not atmospheric.
• Don't apply the primary accent to body text or backgrounds; it's reserved for interactive elements and the hero glow. Using it elsewhere dilutes the focal point.
• Don't use pure black (#000000) or pure white (#ffffff) in the color palette; use {colors.surface} (#040100) and {colors.on-surface} (#ece7e1) instead for better contrast and warmth.
• Don't animate elements on page load or scroll; animations are reserved for user interactions (hover, focus, click). Gratuitous motion breaks the gallery aesthetic.