Back to Home
Style Guide & Tokens

Design System

A living, interactive documentation of the design system for Elaine Aquino-Galindo'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.

Cream (Background)

Main body background. Warm, off-white tone that reduces eye strain.

Forest Green (Primary)

Primary brand color. Used for headers, body text, and line rules.

Dark Green (Text/Contrast)

High contrast color. Used for headings, card titles, and dark block backgrounds.

Lime Yellow (Accent)

Bright accent color. Used for primary CTA buttons, badges, and important hover highlights.

02. Typography & Playground

Type combines editorial serifs with geometric sans-serifs. Edit the field below to try custom text.

Serif Family

"Instrument Serif", serif

Used for headers, callouts, and italicized emphasis. Adds editorial elegance and organic character.

Sans-Serif Family

"Instrument Sans", sans-serif

Used for body copies, tags, navigation, buttons, and subheaders. Clean, modern, and highly legible.

Display Heading (H1)

Helping Solopreneurs Build Simply

font-family: var(--font-serif); font-size: clamp(2.5rem, 6vw, 4.5rem);
Section Heading (H2)

Helping Solopreneurs Build Simply

font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 3rem);
Card Title (H3)

Helping Solopreneurs Build Simply

font-family: var(--font-serif); font-size: 1.6rem;
Lead Paragraph

Helping Solopreneurs Build Simply

font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.6;
Body Text

Helping Solopreneurs Build Simply

font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7;
Tagline / Label
Helping Solopreneurs Build Simply
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.

Live Preview
HTML Markup 
<a href="#" class="btn btn-accent">Explore Products</a>

04. Badges & Tags

Tags and flags utilize square borders with high contrast background tones.

Featured Flagship class="badge-sample"
Coming Soon class="badge-sample badge-sample-accent"
Google Sheets class="badge-sample-category"

05. Spacing Scale

Visual alignment blocks and standard layout margin/padding rules.

Spacer XS 0.5rem (8px)
Spacer S 1rem (16px)
Spacer M 2rem (32px)
Spacer L 4rem (64px)
Spacer XL 7rem (112px)

06. Product & Card Layouts

A standard product card mockup showing alignment structure, square corners, and spacing.

Google Sheets $15

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.

Best for: Coaches and solopreneurs.

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 plus/minus icon is created using CSS pseudo-elements (::before and ::after) that rotate when the details element is toggled to [open].

Does it support smooth transitions?

Yes. Utilizing layout properties and transition keyframes, the content container fades in smoothly when active, enhancing user experience.

Copied to clipboard!