Eden Labs

A quiet portfolio preview for selected artwork, studio context, and a discreet inquiry path.

Lantern light, a reaching hand, and a face emerging from blue-green darkness.
01: Color Palette

Warm dusk canvas, quiet ink, atmospheric light

Warm paper surfaces and muted color fields keep selected work at the center of the page.

Brand

primary (Ink)
#292524
Primary inquiry action.
primary-active
#0c0a09
Pressed or active state.

Surface

canvas
#f5f5f5
Warm page floor.
canvas-soft
#fafafa
Soft archive band.
surface-card
#ffffff
Light panel for artwork details.
surface-strong
#f0efed
Badges and metadata.
surface-dark
#0c0a09
Nocturnal section surfaces.

Text & Hairlines

ink
#0c0a09
Display and primary text.
body
#4e4e4e
Statement and body text.
muted
#777169
Captions and supporting text.
muted-soft
#a8a29e
Secondary text and inactive states.
hairline
#e7e5e4
Fine dividers.
hairline-strong
#d6d3d1
Stronger panel borders.

Atmospheric Gradient Stops (signature)

gradient-mint
#a7e5d3
Lichen glow for atmosphere only.
gradient-peach
#f4c5a8
Umber glow.
gradient-lavender
#c8b8e0
Violet glow.
gradient-sky
#a8c8e8
Mineral glow.
gradient-rose
#e8b8c4
Rose glow.

Semantic

success
#16a34a
Confirmation.
error
#dc2626
Validation errors.
02: Typography

Light serif display with quiet sans labels

Display type stays light and spacious. Body copy remains calm, readable, and precise for captions, statements, and metadata.

display-mega64px / 300 / 1.05 / -1.92px (Waldenburg)
Eden Labs in low light
display-xl48px / 300 / 1.08 / -0.96px
A nocturnal portfolio of selected works
display-lg36px / 300 / 1.17 / -0.36px
Selected work
display-md32px / 300 / 1.13 / -0.32px
Artist statement
title-md20px / 500 / 1.35 (Inter)
Work title
body-md16px / 400 / 1.5 / 0.16px
Measured copy for statements, captions, and studio notes.
body-sm15px / 400 / 1.47 / 0.15px
Caption text.
caption-uppercase12px / 600 / 1.4 / 0.96px
Viewing room
button15px / 500 / 1.0
Inquire
nav-link15px / 500 / 1.4
Work · Statement · Exhibitions · Contact
03: Buttons

Quiet actions for inquiry

Use one filled inquiry action and quieter secondary paths.

button-primary
Filled ink pill, 40px high.
button-primary-active
Darker state for press and keyboard focus.
button-outline
Transparent with a 1px hairline border.
button-tertiary-text
Inline text link.
04: Atmospheric Color Fields

Artwork crops as atmosphere

Local artwork sets the mood: green reach, graphite shadow, ochre body, and lantern light.

A hand reaches upward toward a green circular glow.Hand reach
A graphite face emerges from a dark field beside chalky light.Graphite face
Warm ochre figure study layered over transparent shadow.Ochre body
05: Artwork Detail Card

Artwork detail preview

Shows one work with a view control, rhythmic mark, and essential metadata.

Nocturne Study I
2026 · mixed media on panel · 48 x 60 in
06: Exhibition Notes

Exhibition and studio notes

Rows separate titles, dates, and notes without turning the page into a catalog.

NS
Nocturne Study I
Selected work · 2026
TB
Threshold Bloom
Private viewing · 2025
AR
Afterimage Room
Studio note · 2025
SL
Soft Architecture
Archive study · 2024
07: Selected Work Notes

Selected work context

Nocturne studies

Large abstract works set the opening mood through shadow, surface, and restrained metadata.

Low-light rooms

Exhibition notes and private viewing details support the work without becoming a catalog.

Studio contact

Inquiry paths stay visible for collectors, galleries, and design-minded viewers.

08: Artwork Availability

Featured work can invert to dark

Use dark inversion to mark selected work or a viewing note without loud decoration.

Nocturne Study I

01 work
  • 2026 · mixed media
  • 48 x 60 in
  • Available for inquiry

Threshold Bloom

02 note
  • 2025 · pigment and wash
  • 30 x 40 in
  • Private viewing note
  • Available for inquiry

Afterimage Room

03
  • 2025 · graphite and wash
  • 36 x 48 in
  • Archive study
  • Exhibition note
09: Forms

Inquiry inputs

10: Badges

Short labels for work state and context.

New workStudyAvailableExhibition
11: Spacing Scale

A 4px base scale with a 96px section pause.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
12: Border Radius

Use pills for quiet actions and badges, 16-24px for panels, and full radius for compact marks.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
24 · xxl
pill
13: Elevation & Depth

Use hairlines and one soft shadow; atmospheric depth comes from quiet color fields.

Flat canvas

Page bands and footer areas.

Panel

Light panel with a fine border.

Soft shadow

One subtle shadow tier for interactive lift.

Atmospheric field

Soft color depth for artwork-led sections.

14: Responsive Behavior
NameWidthKey changes
Mobile< 640pxHero title scales down; work panels stack; nav condenses; color fields shrink.
Tablet640 to 1024pxHero title uses medium scale; work panels move to two columns.
Desktop1024 to 1280pxFull hero title scale; supporting panels use three columns.
Wide> 1280pxContent width caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Layout collapse