Design System
A living, interactive documentation of the design system for Elaine Roselle's online presence. Built with intentional simplicity, clean visual hierarchy, and structural consistency.
01. Interactive Colors
Our palette is warm, organic, and minimal. Click on any value to copy it instantly.
02. Typography & Playground
Type combines editorial serifs with geometric sans-serifs. Edit the field below to try custom text.
"Instrument Serif", serif
Used for headers, callouts, and italicized emphasis. Adds editorial elegance and organic character.
"Instrument Sans", sans-serif
Used for body copies, tags, navigation, buttons, and subheaders. Clean, modern, and highly legible.
Helping Solopreneurs Build Simply
font-family: var(--font-serif); font-size: clamp(2.5rem, 6vw, 4.5rem); Helping Solopreneurs Build Simply
font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 3rem); Helping Solopreneurs Build Simply
font-family: var(--font-serif); font-size: 1.6rem; Helping Solopreneurs Build Simply
font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.2rem); Section heading inside long-form copy — blog posts, the about page, and standalone pages. Carries a bottom rule.
Helping Solopreneurs Build Simply
font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 1.7rem); Subsection within long-form copy. No rule.
Helping Solopreneurs Build Simply
font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.6; Helping Solopreneurs Build Simply
font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; 03. Buttons & Live Customizer
Our buttons utilize square edges and smooth transition animations. Play with the options to view configurations.
04. Badges & Tags
Tags and flags utilize square borders with high contrast background tones.
class="badge-sample" class="badge-sample badge-sample-accent" class="badge-sample-category" 05. Spacing Scale
Visual alignment blocks and standard layout margin/padding rules.
06. Product & Card Layouts
A standard product card mockup showing alignment structure, square corners, and spacing.
Simple Website Starter
This is a mockup of the product card style used on the store page. Notice the strict square corners, high-contrast border, and balanced text columns.
07. Interactive Accordions
Clean CSS-only summary indicators with dynamic rotate actions.
How is this accordion structured?
It uses standard semantic HTML <details> and <summary> tags. The accent-coloured chevron rotates 180° when the details element is toggled to [open], and the native disclosure marker is hidden.
Does it support smooth transitions?
Yes. Utilizing layout properties and transition keyframes, the content container fades in smoothly when active, enhancing user experience.
08. Scrapbook Elements
Cards are "pinned" with washi tape and photos sit slightly askew, then straighten on hover. Rotation is the resting state, not the interaction.
Taped Card
A rotated card with tape straddling the top edge.
Washi tape overlay
Tilted photo — hover to straighten
Two rules that keep tape visible
A rotated card creates its own stacking context, so a tape strip inside
it cannot out-rank the card's own background with z-index
alone. Lift the card's content instead
(.card > *:not(.tape-strip) { position: relative; z-index: 1; })
and keep the tape above it.
The tape sits at a negative top so it overhangs the card's
edge. That overhang is clipped away entirely by
overflow: hidden — taped cards must use
overflow: visible.