QuickPoint — Brand & Style Guide

First principles

Seven rules that make it feel like QuickPoint

One purple.A single saturated accent per composition. Yellow appears only on black.
Hairlines, not shadows.Regions divide with 1px lavender lines. No drop shadows, no glows, no gradients.
Buttons are quiet text.Navigation actions are text that gains a soft pill on hover and focus. Only the primary CTA is a filled purple pill.
Radius 4–8px.Softened corners, never fully round. Pills are reserved for hover states and the CTA.
Branding is ambient.The lockup sits in low-attention corners, embossed or knocked out of the surface — never a loud stamp.
Content is serif, chrome is sans.Reading matter is set in a bookish serif on warm paper; interface and headlines are a geometric sans on lavender-white.
AAA is the floor.Text contrast ≥ 7:1 (4.5:1 only at display sizes), interactive boundaries ≥ 3:1, hit targets ≥ 44px.

Typography

Two voices, strictly separated

This page is set in system stand-ins. Production uses the real faces — ask for the font package before finished artwork.

Avantt LightDisplay & headlines
Commercial (Displaay) — self-hosted woff2

Accessible presentations, instantly.

Avantt Regular / 500UI, navigation, labels
0.9rem / weight 500 for controls

Features How it works Accessibility Get started

ET BookLong-form content
Free, self-hostable. Fallback: Palatino

Write your lecture in plain text. QuickPoint generates clean slides and compliant documents — no design tools, no manual fixing, just your words structured for learning. Body copy holds a 60–72 character measure.

CourierCode, tokens, data
Sparingly

title: The Machine Age

Scale

Base 1rem · buttons and labels 0.9rem/500 · meta text 0.8rem minimum. Nothing below 0.75rem, ever. Headlines use the Light weight with tight (−1%) letter-spacing; uppercase labels take +14% tracking.

Color — light theme

Surfaces & ink

Every ratio shown is computed against the color's intended ground. Toggle your OS theme (or the viewer's switch) to see the dark equivalents live on this page.

Page background#FFFFFF · the main canvas

Navigation surface#F7F5FF · white with a whisper of lavender

Frame / hairlines#E5E1F8 · 1px dividers, hover pills

Content paper#FFFFF8 · warm reading surfaces

Content ink#111111 · 18.8:1 on paper

Chrome ink#333333 · 11.7:1 on nav · hover #1A1A1A

Muted ink#4A4A4A · 8.1:1 · secondary labels

Meta ink#595959 · 7.0:1 on white · the floor for small text

The one purple — and why it splits in two

Purple · fill#6B4FDB · white on it is 5.6:1 → large text only

Purple · small text / small-label fills#5335C9 · 7.7:1 both ways

Brand yellow#F4EC7A · on black 17.1:1 · only on black

Logo tint#8265FD · decorative only, never text

Link teal#1D5E75 · 7.2:1 · inline links

Focus ring#4A90D9 · 3px, every interactive element, both themes

The purple rule

Ads and layouts use one purple per composition. Big display type or a button with large text may sit on #6B4FDB. The moment purple carries small text — as the text itself or as a fill under white labels — switch to #5335C9. In dark contexts purple used as text brightens to #AC9BF3; fills stay identical in both themes.

Dark theme

Near-black with the same lavender cast — not grey. Hairlines still divide; shadows still don't exist. Solid surfaces only: no translucent bars over scrolling content.

Page#121016

Navigation#1C1927 · always solid

Frame / hairlines#332E45

Content ink#F5F3FA · 17.2:1

Purple as text#AC9BF3 · 7.9:1 · flat #6B4FDB is icon-only here

Meta ink#A19BB3 · 7.1:1

Components

The pieces, live

These are working demos — hover, tab through them, and note the 3px focus ring.

Nav actions: quiet 0.9rem/500 text, frame-colored pill on hover and focus. Primary CTA: #5335C9 pill, radius 8px (white label is small text, so the AAA fill applies). Secondary: hairline outline, no fill.

Yellow lives only here

#F4EC7A on #000000 — 17.1:1 — the closing CTA band. Identical in both themes: black is already a dark surface.

Advertising

Ad compositions — the three sanctioned grounds

An ad is finished artwork: its colors are literal and never retheme (notice these tiles stay identical when this page switches theme). Every QuickPoint ad is built on one of three grounds — lavender-white with ink, black with white and yellow, or purple with white. One ground per ad, one purple per ad, and the lockup sits quietly in a corner.

Accessible presentations

Your words, structured for learning.

Write in plain text. QuickPoint builds the clean, compliant slides.

“The first deck my whole class could actually read.”

Try it free

Free for educators. No design tools required.

QUICKPOINT

Black text / light ground. Ground #F7F5FF (or #FFFFFF / paper #FFFFF8). Ink #111111, body #4A4A4A, legal #595959 — never lighter.

WCAG AAA by default

Slides everyone can read.

Accessibility isn't a checkbox here. It's the whole point.

Get started

quickpoint.me — works in any browser.

QUICKPOINT

White text / black ground. Headline #FFFFFF (21:1), supporting text #D9D6E3 (14.6:1). Yellow #F4EC7A is the accent — eyebrow and CTA only, never body copy.

From text to talk

Lecture notes in. Presentation out.

Paste your notes, get a deck — with the document to match.

See how it works

Sixty seconds from paste to present.

QUICKPOINT

White text / purple ground. Ground is the small-text-safe #5335C9 (white on it: 7.7:1) so every role can be white. On brighter #6B4FDB (5.6:1) only display-size text is allowed — no body, no legal. CTA inverts: white pill, purple label.

Text roles in an ad — face, weight, size, color

Role	Face & weight	Size	On light ground	On black	On purple #5335C9
Eyebrow / kicker	Avantt 500, +14% tracking, uppercase	0.8rem	#5335C9	#F4EC7A	#FFFFFF
Headline	Avantt Light (300), −1% tracking	display, free	#111111	#FFFFFF	#FFFFFF
Subhead	Avantt 400	1.05–1.25rem	#333333	#FFFFFF	#FFFFFF
Body	Avantt 400	0.95–1rem	#4A4A4A	#D9D6E3	#FFFFFF
Quote / testimonial	ET Book italic	1–1.1rem	#111111, ideally on paper	avoid — the serif voice belongs on light grounds
CTA label	Avantt 500	0.9rem	white on #5335C9 pill	black on #F4EC7A pill	#5335C9 on white pill
Legal / footnote	Avantt 400	0.8rem, floor 0.75rem	#595959	#D9D6E3	#FFFFFF
Lockup	Avantt 500, +14% tracking	0.8rem	#333333	#FFFFFF	#FFFFFF

Ad guardrails

Never: black text on the purple grounds, yellow anywhere but black, purple text on purple, white body copy on #6B4FDB, or grey legal lines lighter than #595959 on white. Animated formats keep the reduced-motion rule: no flashing, and any loop under platform limits. CTA hit area stays ≥ 44px even in the smallest banner size — if the format can't fit it, the format doesn't get a button.

The accessibility floor

Non-negotiables for any deliverable

Rule	Threshold	Notes for artwork
Text contrast	≥ 7:1	4.5:1 allowed only ≥ 24px, or ≥ 18.66px bold — display headlines qualify, captions never do
UI & icon boundaries	≥ 3:1	Button outlines, icons, focus rings against their ground
Hit targets	≥ 44px	Both axes, including in banner ads and interactive embeds
Minimum text size	0.75rem	Legal lines included — nothing smaller, anywhere
Focus visibility	3px ring	#4A90D9 on every interactive element, never removed
Motion	reduced-motion	All animation gated behind `prefers-reduced-motion`; no autoplaying flashes

Guardrails

Do & don't

Let whitespace carry the composition — the brand breathes. When in doubt, remove an element rather than shrink four.

Don't

Use the legacy greys #757575 or #95999D for text — they fail the floor. #595959 is the lightest permitted small-text grey.

Set long copy in the serif on paper #FFFFF8, and interface language in the sans on lavender-white.

Don't

Add gradients, drop shadows, glows, or a second accent hue. One purple; yellow only on black; hairlines divide everything else.

Invert ink-dark logo lockups in dark contexts (brightness(0) invert(0.9)). The knockout watermark adapts by itself.

Don't

Set text in orange, warning or otherwise — orange is a fill with dark text on it. And nothing fully round: radius stops at 8px.