Full design reference · Edventures Design System

Quick start

Run locally: npm run tokens then npm run dev (Hugo Extended). Live Hugo partials and full page mocks are on Examples. In any consuming Hugo site, drop these partials in your base template:

{{ partial "edventures/theme-toggle.html" . }} {{ partial "edventures/css.html" . }} {{ partial "edventures/nav.html" . }} … page content … {{ partial "edventures/footer.html" . }} {{ partial "edventures/scripts.html" . }}

Foundations

The mark, the principles, the personality.

mark / on paper

mark / on lime

mark / on ink

⚡

Move with momentum

Every screen should feel like progress. Direct copy, big CTAs, no hedging.

🎯

Confident, never cocky

Knowledgeable and warm. We back founders; we don't talk down to them.

🧱

Built, not bought

Solid borders, hard shadows, tangible blocks. The work feels real and earned.

Colour

Violet leads, lime & pink accent. Keep ink and paper doing the heavy lifting.

PRIMARY · electric violet

Violet 50

--violet-50

#F4EFFF

Faintest violet wash — hero gradient start, large tinted backgrounds.

Violet 100

--violet-100

#E9DEFF

Subtle chips, soft fills, gradient mid.

BASE

Violet 500

--violet-500

#7100FF

Primary buttons, links, focus. Locked — never substitute.

Violet 700

--violet-700

#5400BF

Pressed / hover violet on primary actions.

Violet 900

--violet-900

#2E0066

Deepest violet — strong contrast on light tints.

VIOLET ON SURFACES

Violet on muted

--violet-on-muted

#E6DCFF

Body text on violet surfaces (e.g. featured card).

ACCENTS

Lime

--lime

#C6FF3D

One highlight moment per screen. Never body text or on white.

Pink

--pink

#FF3D9A

Tags, punctuation, sparing emphasis.

Lime soft

--lime-soft

#EAFFC2

Gradient end, gentle fills.

Pink soft

--pink-soft

#FFD9EC

Badge fills, soft pink backgrounds.

Pink deep

--pink-deep

#9B0F50

AA text on pink-soft.

NEUTRALS & STATUS

Ink

--ink

#120B22

Default text and signature 2px borders.

Ink 50

--ink-50

#5B5470

Secondary body text.

Ink 30

--ink-30

#8079A0

Muted labels, placeholders.

Line

--line

#E7E2F2

Hairline dividers inside cards.

Paper

--paper

#FBFAFF

Page background.

Surface

--surface

#FFFFFF

Cards, inputs, nav pill.

Success

--success

#16A34A

Success states, status dots.

Warning

--warning

#FFB020

Warnings, in-progress.

Error

--error

#FF3D5D

Errors, destructive cues.

DISABLED · off-system greys only

Grey fill

--grey-fill

#F1EEF7

Disabled control background.

Grey text

--grey-text

#A39CB5

Disabled label text.

Grey border

--grey-border

#C9C3D6

Disabled control border.

Rule of thumb

≈ 70% ink & paper · 20% violet · 10% lime + pink. Lime is for highlights and one hero moment per screen — never body text. Keep AA contrast: ink on lime ✓, white on violet ✓, ink on pink ✓.

SEMANTIC ROLES · tier 2

TokenResolves toLight valueDark note

Primary

--color-primaryPrimary actions, links, brand surfaces.--violet-500#7100FFunchanged

--color-primary-hoverPrimary hover / pressed.--violet-700#5400BFunchanged

--color-primary-subtleSoft violet fills, chips.--violet-100#E9DEFF--violet-900

--color-primary-faintFaint backgrounds, gradient start.--violet-50#F4EFFF--violet-faint-dark

--color-primary-strongHigh-contrast text on light tints.--violet-900#2E0066--violet-900

Text & links

--color-linkInline links, violet text, interactive icons.--violet-500#7100FF--violet-bright

--color-on-primary-mutedMuted text on violet surfaces.--violet-on-muted#E6DCFFunchanged

--color-textDefault body and heading text.--ink#120B22--text-dark

--color-text-mutedSecondary text.--ink-50#5B5470--text-muted-dark

--color-text-subtlePlaceholders, tertiary labels.--ink-30#8079A0--text-subtle-dark

Accents

--color-accentOne highlight moment per screen.--lime#C6FF3Dunchanged

--color-accent-softGentle lime fill, gradient end.--lime-soft#EAFFC2unchanged

--color-punctuationTags, punctuation, sparing emphasis.--pink#FF3D9Aunchanged

--color-punctuation-softSoft pink badge fills.--pink-soft#FFD9ECunchanged

On-colour pairs

--color-on-primaryText on violet (AA).--white#FFFFFFunchanged

--color-on-accentText on lime (AA). Never violet on lime.--ink#120B22unchanged

--color-on-punctuationText on pink (AA).--ink#120B22unchanged

--color-on-punctuation-softText on pink-soft (AA).--pink-deep#9B0F50unchanged

Structure

--color-bgPage background.--paper#FBFAFF--bg-dark

--color-surfaceCards, inputs, nav.--surface#FFFFFF--surface-dark

--color-borderSignature border colour.--ink#120B22--border-dark

--color-dividerHairline dividers in UI.--line#E7E2F2--divider-dark

--color-focusFocus ring colour (violet shadow).--violet-500#7100FFunchanged

Disabled

--color-disabled-bgDisabled control background.--grey-fill#F1EEF7--surface-2-dark

--color-disabled-textDisabled label text.--grey-text#A39CB5--text-disabled-dark

--color-disabled-borderDisabled control border.--grey-border#C9C3D6--divider-dark

Status

--color-successSuccess messages, badges.--green#16A34Aunchanged

--color-warningWarnings, in-progress.--amber#FFB020unchanged

--color-errorErrors, validation.--red#FF3D5Dunchanged

SHADOWS · hard offset only

--shadow-sm3px 3px 0 inkBadges, pills, small chips.

--shadow4px 4px 0 inkDefault — cards, panels.

--shadow-lg5px 5px 0 inkHero cards, marketing callouts.

--shadow-lime4px 4px 0 limeVary rhythm on cards — don’t use one colour everywhere.

--shadow-violet4px 4px 0 violetInput focus ring; highlighted cards.

--shadow-pink4px 4px 0 pinkSparing accent; blog covers.

BORDER & RADIUS

--border2px solid inkShorthand for signature sticker border.

--bw-hairline1.5pxBadges and pills.

--bw-default2pxDefault ink border width.

--r-sm9pxBadges, pills, section-tag.

--r-md12pxButtons, nav pill.

--r-lg16pxCards, panels, large containers.

--r-pill999pxFull-pill chips, toggles.

SPACING · 8-pt scale

--s-14pxIcon nudge, micro-gap.

--s-28pxIcon-to-label, tight lists.

--s-312pxBadge padding, input pad-y.

--s-416pxCard pad-y, body margins.

--s-524pxCard padding, element gaps.

--s-632pxSection sub-gap, component pad.

--s-748pxSection-to-section gap.

--s-864pxHero breathing room.

--s-996pxPage-level section padding.

Typography

Funnel Display for impact, General Sans for everything you read.

Funnel Display

Headlines, display, big numbers · weights 400–800

--font-display · --ff-display

400 · 500 · 600 · 700 · 800

General Sans

Body, UI, labels, long-form reading · weights 400–700

--font-body · --ff-body

400 · 500 · 600 · 700

Display

--fs-display · --fw-display · --lh-display

--ls-tight · --font-display

Build it.

Section

--fs-section · --fw-section · --lh-section

--section-title-* · .section-title

Built with partners.

--fs-h1 · --fw-h1 · --lh-h1

--ls-tight · --font-display

Founders aren't born

--fs-h2 · --fw-h2 · --lh-h2

--font-display

Stop guessing. Start building.

--fs-h3 · --fw-h3 · --lh-h3

--font-display

Meet Anna, your AI coach

Quote

--fs-quote · --fw-quote · --lh-quote

.quote · testimonial body

It's like having a co-founder who never sleeps.

Body

--fs-body · --fw-body · --lh-body

--font-body · never below 16px

Clear, adaptive feedback that grows with your business idea. Turn messy thoughts into a structured plan you can actually execute.

Small

--fs-small · --fw-small · --lh-small

--font-body

Used for secondary UI text, captions, and metadata.

Label

--fs-label · --fw-label

--ls-label · uppercase · --font-body

AI Coaching

Icons & Emoji

Bold emoji for marketing energy. Clean line icons inside the product.

⚡ 🔥 🚀 💥 🏆 🎯 💡 🌱 ✨ 🧱

Use on the marketing site, blog, social and email — one or two per section, sized 1.5–2× the text. They carry the playfulness. Don't mix emoji and line icons in the same block.

2px stroke, rounded caps & joins, 24px grid. Ink by default; violet when interactive. Keep them simple and consistent across the app.

Components

The shared kit across edventures.ai, the blog and help centre. Live partial renders (nav, FAQ, footer, and more) are on Examples.

BUTTONS · hover to see the press

btn--primary

Violet · main CTA

The single most important action in the view. "Get started", "Sign up", "Continue", "Submit". One primary per section — never two side-by-side. Hero context: use btn--lg, one per page above the fold.

Rule: if you're tempted to put two primaries next to each other, one of them should be secondary or outline.

btn--secondary

Lime · second-priority action

Paired alongside a primary for the second-most-important action. "Book a demo", "See plans", "Watch video". Lime is the one accent highlight per screen — don't use secondary in multiple places on the same page.

Rule: one lime moment per screen (same 10% lime budget as colour). Never two secondary buttons in the same row.

btn--outline

White fill, ink border · tertiary

Tertiary actions that need button affordance without competing for attention. "Log in", "Learn more", "Cancel", "See all". Works well as the third action when primary and secondary are already present, or as the sole action when low emphasis is needed.

Rule: nav "Log in" is always outline. Don't use for the main conversion CTA.

btn--ghost

No fill, no border · lowest prominence

Nav-level text-button hybrids: "Features ›", "Back", "Skip", inline "Read more" links that should feel like a button. Use inside dense UI where a bordered button would feel heavy, or for inline navigation between sections.

Rule: never use ghost as the primary CTA. If the action matters, use a bordered variant.

btn--sm · (default) · btn--lg

Sizes

sm — Compact UI, table rows, inside cards and help rows, secondary inline actions (44px touch-safe minimum).
md (default) — Most CTAs, form submissions, modal actions.
lg — Hero CTAs only. One per page, above the fold. Don't scatter large buttons.

NAVIGATION · desktop & mobile

Product Pricing Company Blog

Product Resources Pricing Company Blog

Desktop: floating pill, 2px border, hard shadow.
Mobile: full-screen sheet, same items stacked, active item on Violet 50.
The mark and the 5 primary links stay identical across all three sites.

CARDS

⚡

Action Plans

Turn big ambitions into bite-sized daily tasks. Track milestones, ship momentum.

Learn more ›

★ Featured

Meet Anna

Your AI coach — sharper thinking, faster decisions, the conviction to execute. The work stays yours.

Try Anna ›

blog cover 16:9

Customer Discovery

Moving from assumptions to evidence

Anna · 6 min read

card card--pink

Feature card

Product feature or capability on the marketing homepage. Icon slot (any accent fill), title, body, link. Use 3–4 per grid. Vary shadow colours across cards (ink / lime / violet / pink) for visual rhythm — don't use the same shadow on every card in a row.

Shadow: default is lime. Swap to box-shadow:var(--shadow) or var(--shadow-violet) on neighbours.

card card--featured

Featured card

Violet surface, white text. The single most important item in a section — flagship product, lead offer, hero value prop. Grabs immediate attention via the 20% violet budget. Use at most one per section. Never place two featured cards side-by-side.

If you need a second highlighted card, use a feature card with --shadow-violet instead.

card card--blog

Blog / content card

Content listing with 16:9 cover image, category tag, title, and author meta. Use on blog listing pages, "Related posts" panels, and homepage content previews. The cover fills the full card width; keep aspect ratio locked at 16:9 for consistent grid rhythm.

Tag uses --color-accent-soft fill. Author avatar is a 28px circle — use real image or initials.

🚀 Getting started with Anna Set up your first project in 5 minutes 💳 Billing & plans Manage your subscription 🧭 Using the Canvas Build and test your business model

BADGES & PILLS

New Free Beta Outline Active In progress

INPUT

Work email

COMPONENT TOKENS · tier 3

Prefer semantic tokens in new UI. Use these when overriding or building component recipes in tokens/_components.scss.

TokenResolves toNote

Button

--button-radius--r-md (12px)Default button corners.

--button-border--border2px ink border.

--button-shadow--shadowResting shadow.

--button-shadow-hover6px 6px 0 inkPair with translate(-2px,-2px).

--button-shadow-active1px 1px 0 inkPair with translate(2px,2px).

--button-pad-y / --button-pad-x13px / 26pxMedium button padding.

--button-primary-bg / --button-primary-text--color-primary / --color-on-primaryPrimary variant.

--button-secondary-bg / --button-secondary-text--color-accent / --color-on-accentLime secondary.

--button-disabled-*--color-disabled-*Disabled button trio.

.btn__iconinherits --button-outline-text / variant text12px SVG chevron; stroke currentColor.

Card

--card-bg--color-surfaceDefault card fill.

--card-radius--r-lg16px card corners.

--card-shadow--shadowSwap lime/violet/pink for rhythm.

--card-pad26pxInner card padding.

--card-featured-bg / --card-featured-text--color-primary / --color-on-primaryViolet featured card.

Nav

--nav-bg--color-surfaceFloating pill background.

--nav-radius--r-lgPill corner radius.

--nav-shadow--shadowHard offset under nav.

--nav-gap20pxLink spacing in desktop nav.

Badge

--badge-radius--r-sm9px badge corners.

--badge-border--bw-hairline solid ink1.5px — lighter than default border.

--badge-pad-y / --badge-pad-x6px / 12pxBadge padding.

--badge-violet-* / --badge-lime-* / --badge-pink-*semantic on-colour pairsVariant bg + text tokens.

Input

--input-radius11pxBetween r-sm and r-md.

--input-focus-shadow--shadow-violetViolet focus ring.

Section tag

--section-tag-size42pxSticker section marker (01, 02…).

--section-tag-bg--color-accentLime sticker fill.

--section-tag-shadow--shadow-smSmall hard shadow on tag.

Text sticker

--text-sticker-bg / --text-sticker-border / --text-sticker-shadow--color-accent / --border / --shadow-smInline lime highlight (partners, hero).

--text-sticker-radius / --text-sticker-pad-x / --text-sticker-rotate8px / 10px / -1.5degSticker geometry.

Partners

--partners-bg / --partners-text / --partners-subtext--violet-900 / --white / --color-on-primary-mutedIntro block; dark mode → faint violet + text-dark.

--partners-intro-pad-top / --partners-cta-margin-bottom60px / 40pxIntro spacing before paper track.

Partners track (marquee)

--partners-track-bg / --partners-track-border-top--paper / --borderFull-bleed rolling band; dark → --color-surface.

--partners-track-marquee-duration / --partners-track-marquee-gap35s / --s-4Infinite scroll; pauses on hover.

Partners logo tile

--partners-logo-bg / --partners-logo-border / --partners-logo-shadow--white / 2px ink / none at restMarquee tile — flat until hover; lime shadow on hover (both themes on violet-900 band).

--partners-logo-min-width / --partners-logo-height / --partners-logo-img-max-height200px / 64px / 36pxTile + logo bounds (website parity).

Dark Mode

Activate with data-theme="dark" on <html>. Semantic tokens recompute — violet, lime, and pink fills stay locked.

DARK PRIMITIVES

--bg-dark

#140E26

Surface

--surface-dark

#1A1230

Surface 2

--surface-2-dark

#241838

Border

--border-dark

#4A3D66

Violet bright

--violet-bright

#B794FF

Text

--text-dark

#F4F1FA

Text muted

--text-muted-dark

#B8B0CC

Text subtle

--text-subtle-dark

#857C9E

Shadow

--shadow-dark

#000000

SEMANTIC FLIP · light vs dark

RoleLightDark

--color-bg--paper #FBFAFF--bg-dark #140E26

--color-surface--surface #FFFFFF--surface-dark #1A1230

--color-text--ink #120B22--text-dark #F4F1FA

--color-link--violet-500 #7100FF--violet-bright #B794FF

--color-border--ink #120B22--border-dark #4A3D66

--shadow4px 4px 0 ink4px 4px 0 #000

LIVE PREVIEW · always dark (isolated panel)

Free

Meet Anna

Components read semantic tokens — borders and shadows use --color-border and --shadow-dark on dark surfaces.

Try Anna ›