The system behind
10M+ tutoring sessions.

What Pencil Spaces is.

Pencil Spaces is a virtual classroom built for tutoring, not retrofitted from video conferencing. It powers more than 10 million live tutoring sessions and is the connective tissue across every Pencil Learning Technologies vertical.

Story

The world spent twenty years getting good at meetings. Pencil Spaces spent five years getting good at tutoring — the fundamental act of one person helping another person learn something hard.

Where a meeting tool optimizes for “everyone hears the speaker,” tutoring optimizes for the moment a student picks up a pen. Whiteboards, manipulables, persistent rooms, sub–100ms ink, side-by-side documents, recordings that index by what was written — these aren’t features. They’re the table stakes of the work.

That single decision — build for tutoring instead of meeting — is the whole brand. Designed in the spirit of Dieter Rams and Don Norman: less, but better; useful before clever; honest before impressive; and built around how people actually feel when they use it.

Mission

Positioning, in one paragraph

Pencil Spaces is the virtual classroom built for tutoring. Tutors get a single room they can decorate, fill with materials, and reuse with every student. Programs get session recordings, attendance, and curriculum delivery in one place. Schools and districts get a procurement-ready platform that holds up under SOC 2 and student data privacy review. Marketplaces get an embeddable layer that lets them keep their brand on top of the lesson.

Audiences we serve

Numbers we earn the right to say

• 10M+Tutoring sessions delivered. Live count, not lifetime gross.
• 100msWhiteboard ink latency target. The threshold below which writing feels like writing, not lag.
• SOC 2Type II. FERPA & COPPA aligned. Procurement-ready by default.
• 0Other vendors required to run a tutoring business on Pencil Spaces.

Three rules. Two thinkers.

Pencil Spaces is built on a working philosophy assembled from two of the great design minds of the last seventy years: Dieter Rams on what makes a thing well-designed, and Don Norman on why people end up loving (or quietly hating) it. Rams tells us how. Norman tells us why people care. Three working rules sit on top, used to settle every disagreement — in design review, copy edits, feature scoping, and recruiting.

The three working rules

Distilled from Rams. Carried in our heads. Used to break ties in fewer than thirty seconds.

The full Rams — ten commandments, translated

Dieter Rams formalized his ten principles of good design at Braun in the 1970s. They are the most quoted — and most misunderstood — design principles in the world. Here they are, each translated to one concrete instruction for Pencil Spaces. Our three working rules above are the bolded ones; the rest are the supporting cast.

Norman’s three levels — designing for how people actually feel

Don Norman’s Emotional Design reframed the question from “is this usable?” to “does the person who uses this end up liking themselves more?” He named three levels at which design works on us. Every Pencil Spaces decision should clear at least two of them — ideally all three.

How to use all of this in practice

• In reviewWhen two people disagree on a design, copy line, or feature decision, the three working rules break the tie. Cite the number. If the disagreement is about feel, ask which Norman level is in play.
• In hiringCandidates who can’t name something they removed from a product they’re proud of don’t fit principle 01. Candidates who can’t articulate the visceral / behavioral / reflective split haven’t thought hard enough about emotion.
• In writingBefore publishing copy, ask: is this honest (Rams #6)? Will it land viscerally (Norman L1) or only intellectually (L3)? If only L3, it’s a press release, not a marketing site.
• In feature scopingEvery new feature gets a one-line scorecard: Rams # it satisfies / Norman level it plays at / what gets removed to make room for it.

Sounds like a tutor who's also a great writer.

Stripe’s precision meets a Sunday newsletter’s warmth. We are educators talking to educators — not a SaaS company performing “tone of voice.” The aim is to land at all three of Norman’s emotional levels: visceral (the rhythm, the verbs, the surprise), behavioral (the reader knows exactly what to do next), and reflective (they want to send the link to a colleague).

Voice pillars

House style

• SentencesShort and varied. Long sentence, then short. Rhythm matters more than uniformity.
• NumbersRound only when the rounded number is true. “10M+ sessions” is fine. “Millions of educators” when we mean tens of thousands is not.
• NamesPencil Spaces (two words, both capitalized). Pencil Learning Technologies / PLT. Sierra TMS. Carbon.dev (lowercase d). Spacebar.ai.
• PunctuationOxford commas. Em dashes for asides. No exclamation marks except in genuinely celebratory product moments.
• CapitalizationSentence case for headlines and buttons. Title Case is reserved for proper nouns and product names.
• Pronouns“You” for the reader. “We” for the team behind the product. Never “our customers love us” — let them say it.

How we write hero lines

Forbidden words and phrases

These show up in 90% of ed-tech copy. They’ve lost their meaning. Edit them out.

Tone shifts by surface

One mark. Used carefully.

The Pencil Spaces logo is a wordmark with a pencil mark. It is never redrawn, recolored beyond the approved variants, or set in another typeface. Use the SVGs shipped with this guide. The mark is honest in the Rams sense (#6): it depicts what the product is for. People teach here. People hold pencils to teach. The logo is a pencil. Don’t outsmart it.

Primary lockup — four approved variants

The pencil mark — anatomy

Use the pencil mark alone for app icons, favicons, social avatars, and any space too small for the wordmark. Never recolor the parts independently.

Clear space

Reserve clear space equal to the height of the “P” in the wordmark on all four sides. Inside this margin: nothing — not a tagline, not a partner logo, not a divider line.

Minimum sizes

Aligned with the official PLT brand guide (March 2026): wordmark 120 px digital / 1 inch print, pencil mark 12 px digital / 0.5 inch print.

Don’ts

The official PLT guide explicitly forbids: rotating the logo, stretching the logo, and drop shadows. We extend that list with the four illustrated cases below.

One blue does most of the work.

PS Blue carries identity. Pencil yellow and coral are accents, not surfaces. Neutrals are Apple-grade and do the heavy lifting in product. Greens, ambers, and reds are reserved for semantic state — never decoration. This palette is engineered for Rams #5 (unobtrusive) and #10 (as little design as possible): one blue does almost all the work, and a small set of neutrals does the rest. PS Blue is the visceral hit (Norman L1); the neutrals do the behavioral lifting (L2) without competing. The palette below is the marketing-side essentials; the full production design system (62 primitives + 15 semantic aliases) is documented at the end of this section.

Pencil accents

Mid-blue accent

Specified in the official March 2026 brand guide as the “Accent Color.” Sits between primary and secondary on the blue scale. Useful for hover states on tinted surfaces, secondary chart series, and decorative dividers.

Semantic colors

PS Blue tonal scale (50–950)

Use 500 for primary action; 600 for hover/pressed. 50 and 100 are tints (we ship as --ps-tint-2 and --ps-tint). 200 is the soft fill (--ps-secondary). 700+ for dense data viz only.

Neutral scale — Apple-grade

Eleven steps from white to black, calibrated against macOS / iOS gray ramp. Avoid pure black on pure white — we use #1D1D1F as max ink and #FFFFFF only as canvas.

Approved on-brand pairings (WCAG AA verified)

Full production palette — the Figma design system

Everything below is the actual canvas truth from the active Design System Figma file (file key YVgDpPUHBXwJ3YwFSQCcXV). Two collections: Color/Global Tokens (62 primitives) and Color/Semantic Tokens (15 aliases). This is the production palette — the marketing tokens above are a curated subset.

Inter does the work. Fraunces does the soul.

A two-and-a-half typeface system: a workhorse sans, a serif italic for emphasis, and a developer mono for spec. The italic is the signature — used sparingly, it does more than any color ever could. This is Norman’s visceral level (L1) at work: Fraunces italic is the unexpected gesture in an otherwise sober line of Inter, and that contrast is what makes a headline feel handmade rather than templated. Inter does the behavioral work (L2). The italic is the soul.

The three families

The Fraunces italic rule

Type scale

Use the named tokens, not raw pixel values. The scale is geometric — each step a comfortable jump.

Numerics

• UITabular figures (font-feature-settings: "tnum") for any column of numbers.
• BodyProportional figures — the default — in flowing prose.
• DisplayFor statistics like “10M+ sessions,” lining figures, slightly tighter tracking (-.02em).

Loading the fonts

/* Inter + Fraunces (italic only) + JetBrains Mono */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@1,9..144,300..400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Eight pixels, compounded.

Every margin, padding, and gap is a multiple of 4px, with 8px as the default unit. Nothing in our product or marketing should be 13px, 17px, or 22px. The grid is the discipline that makes everything else look right. Rams #5 (unobtrusive) lives here: well-considered spacing is invisible. The user never thinks “the padding feels nice.” They just stop noticing the chrome.

Spacing scale

Container widths

Breakpoints

Radius scale

Inputs & small buttons: --r-2. Cards: --r-3. Hero modules: --r-4. Floating panels & large CTAs: --r-pill (capsule). We never use sharp 0px corners and never use uneven radii.

Elevation

Shadows are blue-tinted (warm-cool difference of <0.05) for an Apple-like feel. Never gray. Never harder than 12% alpha on the deepest blur.

Small kit. Built carefully.

Five button variants, three sizes. Five badges. One input pattern. One card. One nav. Resist the urge to add a sixth of anything until the existing five aren’t enough. This is where Rams #8 (thorough down to the last detail) and Norman’s behavioral level (L2) overlap: every component carries a clear affordance (it looks pressable, droppable, editable), provides immediate feedback (hover, focus, click states), and respects natural constraints (one primary CTA per view forces a single answer to “what does this page want from me?”).

Buttons

Badges

Beta Live Action needed Failed Draft

Cards

Form input

Sticky nav (the marketing pattern)

Translucent white surface (rgba(255,255,255,.85)) with backdrop blur. Sits on top of any background. No borders top or bottom — uses elevation 1 only on scroll.

Lucide. Line only. 1.75 px.

We use the Lucide icon set, modified to a 1.75px stroke (Lucide ships at 2px). The result reads as a half-step finer than typical SaaS icons — closer to system iOS, further from the Heroicons-everywhere look. Icons are Norman’s signifiers: they tell the user, before any text label, what an element will do. We pair them with labels almost always — pure pictographs are guesswork, and guesswork is friction.

Sizing

Rules

• StrokeAlways 1.75px on a 24 viewBox. Never solid-fill icon styles. Never two-tone.
• ColorInherits currentColor. Match the surrounding type weight. Never PS Blue unless the icon is itself the affordance (e.g., a primary button glyph).
• PairingAlways with a label, except in established affordances (close X, search, menu). No icon-only navigation in marketing.
• CustomIf Lucide doesn’t have it, the icon is drawn on the same 24 grid with 1.75px strokes, 2px round caps and joins.

Quick. Honest. Never decorative.

Motion answers a question: did my action register? Where did this thing come from? Where did it go? If a transition doesn’t answer one of those, remove it. This is Norman’s feedback principle in its purest form: the system has to respond to every action within ~100ms, or the user starts to doubt themselves. Motion is the visible answer to “did that work?” — and a quiet vote of confidence in the user’s next move.

Durations

Easings

Principles

• 01Movement is functional. If you can’t name what it’s telling the user, it’s wrong.
• 02Distance × mass ≈ duration. Bigger objects take longer. A modal is slower than a tooltip.
• 03Honor prefers-reduced-motion. Cross-fade everything when it’s on.
• 04One animated thing at a time on a hero. Multiple competing motions is amateur work.

Real rooms. Real students.

Photography of actual sessions and product screenshots that haven’t been Photoshopped. Illustration is restrained — line work, geometric shapes, brand colors. This is the reflective level (Norman L3): tutors looking at our marketing should see people who look like them, in rooms that look like theirs, doing work that looks worth doing. Stock smiles in stock kitchens fail the test instantly — and reading as fake at L3 is unrecoverable.

Photography — the bar

• RealReal students. Real tutors. Real rooms. With consent. Always.
• QuietAvailable light. Soft contrast. Not the over-saturated stock-photo look.
• ComposedEye level. Subject not centered. Negative space on one side reserved for type.
• HonestIf we have a learner on screen, they’re actually using the product. No props pretending to be ours.

Illustration styles — three approved

What we never use

• ×Stock photography of generic students looking happily at laptops.
• ×3D abstract shapes, blob gradients, glassmorphism for its own sake.
• ×AI-generated imagery without explicit creative direction and disclosure.
• ×Mascot characters, cartoon illustrations of teachers, anything that infantilizes the audience.
• ×Mockups in unbranded laptops/phones. If we show product, we show our product.

The brand in the wild.

Concrete specs for surfaces that touch users every day — favicons, OG cards, signatures, social tiles. Anything not listed here defaults to the rules above.

Favicon & app icon

Open Graph card — default

1200×630 PNG. Generated dynamically per page; this is the reference layout.

Email signature — reference

HTML signature uses inline styles only (most clients strip <style> blocks). Keep total height under 180px. No animated GIFs, no “sent from my iPhone,” no quotes.

Social — required dimensions

WCAG 2.1 AA floor. AAA where we can.

Education has the broadest user base of any industry. We design and build to a baseline of WCAG 2.1 AA across product and marketing, and to AAA on critical paths (signup, billing, lesson join). This is also where one of Norman’s deepest principles applies: when something goes wrong, blame the system, not the user. Error messages should never imply the user was foolish; the design should make the failure mode obvious and recoverable. A tutor who can’t use the product because they can’t see the contrast, or can’t tab through the form, isn’t a “bad fit” — we shipped a worse product.

Practical checklist

• All body text passes 4.5:1 contrast against its background. All large text passes 3:1.
• Color is never the sole indicator of state — pair with icon, label, or pattern.
• Every interactive element has a visible focus state. Default ring: 3px var(--ps-tint) at 4px offset.
• Hit targets are at least 44×44 px on touch surfaces.
• Forms have visible labels, never placeholder-as-label. Error messages are specific and actionable.
• Headings are nested correctly (h1 → h2 → h3). One h1 per page.
• All images, including decorative ones, have alt. Decorative imagery uses alt="".
• Video content has captions; live sessions support real-time captions.
• Motion respects prefers-reduced-motion: reduce.
• Keyboard navigation works for every flow without a mouse.
• Screen reader landmarks (main, nav, aside) are present and labeled.
• Skip-link to main content on every marketing page.
• Color-blind safe combinations — never red/green as the only differentiator.
• Language is set on <html lang="en">; localized pages set their own.

Tools we run

• AxeBrowser extension run on every PR review. Zero violations to ship.
• LighthouseAccessibility score 95+ on all marketing pages.
• VoiceOverSpot-check critical flows on macOS / iOS quarterly.
• NVDASpot-check on Windows quarterly.
• ManualTab-only nav of signup, lesson join, billing once a month.

Drop into any project.

Brand tokens shipped as CSS custom properties and a Tailwind config snippet. Pull what you need. Don’t fork the values — reference them.

CSS custom properties (full set)

:root {
  /* Brand */
  --ps-primary:        #2F80ED;
  --ps-primary-h:      #1F6FDC;
  --ps-secondary:      #BBD8FF;
  --ps-accent:         #609ED8;
  --ps-tint:           #EBF3FF;
  --ps-tint-2:         #F5F9FF;
  --ps-yellow:         #FEE133;
  --ps-coral:          #E5616D;

  /* Semantic */
  --ps-green:          #13A876;
  --ps-green-h:        #0E8E5C;
  --ps-green-deep:     #0E6F47;
  --ps-warn:           #B45309;
  --ps-error:          #DC2626;

  /* Ink */
  --ink:               #1D1D1F;
  --ink-2:             #333333;
  --ink-3:             #515154;
  --ink-4:             #6E6E73;

  /* Surfaces & lines */
  --bg:                #FFFFFF;
  --bg-2:              #FBFBFD;
  --bg-3:              #F5F5F7;
  --line:              #D2D2D7;
  --line-2:            #E5E5EA;
  --line-3:            #F2F2F4;

  /* Radius */
  --r-1: 4px;  --r-2: 8px;  --r-3: 14px;
  --r-4: 20px; --r-5: 28px; --r-pill: 980px;

  /* Spacing (8pt grid) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;
  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-2: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-3: 0 12px 32px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.04);
  --shadow-4: 0 24px 64px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);

  /* Motion */
  --dur-instant:   140ms;
  --dur-quick:     220ms;
  --dur-standard:  360ms;
  --dur-considered:560ms;
  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --ease-accelerate: cubic-bezier(.4, 0, 1, 1);

  /* Type */
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;
}

Production palette CSS variables (full Figma design system)

Mirrors the live Figma file. Use these in product UI; the marketing tokens above are a curated subset.

:root {
  /* Brand */
  --brand-50:  #F0F4FF; --brand-100: #BBD8FF;
  --brand-200: #609ED8; --brand-300: #2F80ED;

  /* Gray (neutral) */
  --gray-100: #F2F2F2; --gray-200: #E0E0E0;
  --gray-300: #BDBDBD; --gray-400: #828282;
  --gray-500: #4F4F4F; --gray-600: #333333;

  /* Slate Gray (cool — “Introduced Grays”) */
  --slate-25:  #FCFCFD; --slate-50:  #F9FAFB;
  --slate-100: #F2F4F7; --slate-150: #EFF1F5;
  --slate-200: #EAECF0; --slate-250: #DCDFEA;
  --slate-300: #D0D5DD; --slate-400: #98A2B3;
  --slate-500: #667085; --slate-600: #475467;

  /* Black (Figma-matched, dark mode boards) */
  --black-100: #C7C7C7; --black-200: #7C7C7C;
  --black-300: #444444; --black-400: #2B2B2B;
  --black-500: #1A1A1A;

  /* Reds */
  --light-red-25:  #FFFBFA; --light-red-50:  #FEF3F2;
  --light-red-100: #FCEAEA; --light-red-200: #FEE4E2;
  --light-red-300: #FECDCA; --light-red-400: #FDA29B;
  --red-100: #F4ACAC; --red-300: #E5616D;
  --red-400: #F97066; --red-500: #F04438;

  /* Greens — Dark Green 1/2 are CANVAS values; variables stale */
  --green-50:  #ECF7F0; --green-100: #D1FADF;
  --green-150: #B1E0C5; --green-200: #5FBFA5;
  --green-250: #33A787;
  --dark-green-2: #1A644F; /* canvas; var Green/300 stale at #2B8C71 */
  --dark-green-1: #154F3E; /* canvas; var Green/400 stale at #226D58 */
  --green-600: #7EA6A5;
  --bright-green: #40CA45;

  /* Burgundy — full 5-step canvas scale */
  --burgundy-light:  #DFACB1;
  --burgundy-mid-2:  #B17075;
  --burgundy-mid-1:  #8A373F;
  --burgundy-dark-1: #61252A;
  --burgundy-dark-2: #561F24;

  /* Yellows */
  --yellow-50:  #FFFAEB; --yellow-100: #FFFAE9;
  --yellow-150: #FEF0C7; --yellow-200: #FFE9A7;
  --yellow-250: #FEDF89; --yellow-300: #FEE133;

  /* Oranges */
  --orange-100: #FEC84B; --orange-200: #FDB022;
  --orange-300: #F79009;
  --orange-warm: #F2994A; --orange-mid: #F1B077;
  --orange-light: #F2C69F;
  --dark-orange-1: #8A4100;
  --dark-orange-2: #793B03;

  /* Selection states (near-whites) */
  --selected-blue:    #F0F4FF;
  --selected-purple:  #FEFBFF;
  --selected-orange:  #FFFAF6;
  --selected-green-2: #FAFFFC;
  --board-bg-light:   #FFFBFB;

  /* Purples */
  --purple-50:  #FEFBFF; --purple-100: #F7EEFB;
  --purple-150: #E0BBEE; --purple-200: #CD9BDA;
  --purple-300: #A36BB2; --purple-400: #430054;
  --purple-500: #470D56;

  /* Dark blues (paint-only — promote when next touched) */
  --dark-blue-1:    #043160;
  --dark-blue-2:    #1B3E64;
  --stone-blue:     #7E7F9A;

  /* Board canvas backgrounds */
  --board-bg-red:    #FCEAEA; --board-bg-blue:   #F0F4FF;
  --board-bg-yellow: #FFFAE9; --board-bg-green:  #ECF7F0;
  --board-bg-purple: #F7EEFB; --board-bg-dark:   #1E1E1E;

  /* Semantic — Warning & Error */
  --warning-50:  #FFFAEB; --warning-100: #FEF0C7;
  --warning-200: #FEDF89; --warning-300: #FEC84B;
  --warning-400: #FDB022; --warning-500: #F79009;
  --error-25:  #FFFBFA; --error-50:  #FEF3F2;
  --error-100: #FEE4E2; --error-200: #FECDCA;
  --error-300: #FDA29B;

  /* Semantic background tokens (resolved aliases) */
  --bg-brand-default:        var(--brand-300);
  --bg-brand-hover:          #FFFFFF;
  --bg-brand-click:          #FFFFFF;
  --bg-brand-selected:       var(--brand-50);
  --bg-brand-disabled:       var(--gray-100);
  --bg-secondary-gray-default:var(--gray-100);
  --bg-secondary-gray-selected:var(--brand-50);
  --bg-secondary-white-default:#FFFFFF;
}

// tailwind.config.js — extend with PS brand
module.exports = {
  theme: {
    extend: {
      colors: {
        ps: {
          DEFAULT: '#2F80ED',
          50:  '#F5F9FF', 100: '#EBF3FF', 200: '#BBD8FF',
          300: '#8DBEFF', 400: '#5DA3FF', 500: '#2F80ED',
          600: '#1F6FDC', 700: '#1659BA', 800: '#0F4391',
          900: '#0A2E68', 950: '#06184A',
          accent: '#609ED8',
        },
        yellow: { ps: '#FEE133' },
        coral:  { ps: '#E5616D' },
        ink:    { DEFAULT: '#1D1D1F', 2: '#333', 3: '#515154', 4: '#6E6E73' },
        line:   { DEFAULT: '#D2D2D7', 2: '#E5E5EA', 3: '#F2F2F4' },
      },
      fontFamily: {
        sans:    ['Inter', 'system-ui'],
        display: ['Fraunces', 'serif'],
        mono:    ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        DEFAULT: '14px', sm: '4px', md: '8px',
        lg: '14px', xl: '20px', '2xl': '28px',
        pill: '980px',
      },
    },
  },
};

Quick-start: the “PS button” recipe

/* Drop-in primary button */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--ps-primary);
  color: white;
  font: 500 14px/1 var(--font-body);
  border: none;
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-standard);
}
.btn-primary:hover { background: var(--ps-primary-h); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ps-tint);
}

Where to find things. Who to ask.

Source files, font licensing, sister-brand boundaries, and how to request changes to this guide.

Design tokens (extracted from Figma)

Live values pulled from the active Design System Figma file (YVgDpPUHBXwJ3YwFSQCcXV). Single source of truth for product tokens. Re-extract whenever the file changes — do not maintain by hand.

Official brand guideline PDFs (archive)

The original PLT brand guidelines from Lyka Pinlac (March 2026). Bundled here for archival reference. Where they conflict with this guide, this guide wins — but partners and printers may still ask for the PDFs of record.

Logo files

SVGs are the source of truth. PNGs are exports for systems that don’t accept SVG (Slack workspace icon, some email clients).

Fonts

Self-hosting is preferred for marketing site performance. Use font-display: swap. Subset to Latin + Latin Extended unless localizing.

Sister-brand boundaries — do not cross-contaminate

Pencil Spaces is one of several brands under Pencil Learning Technologies. Each has its own design system. Do not import tokens, type, or color across brands — sister brands are intentionally distinct.

Governance

• OwnerAyush Agarwal · ayush@pncl.tech
• EditsBrand changes — tokens, voice rules, typeface decisions — require owner approval. Component additions go through design review.
• VersioningSemantic. v1.0 first complete reference. v1.1 reconciles the official March 2026 PLT brand PDFs. v1.2 integrates the live Figma design system (62 primitives + 15 semantic tokens). v1.3 reconciles canvas truth vs. variables — identifies stale Dark Greens and 9 unpromoted colors. v1.4 resolves Mid Blue 2 from a direct .fig source-file read — canvas-validated end to end. v1.5 weaves Dieter Rams’ ten principles and Don Norman’s emotional design framework throughout. v2 reserved for typeface or palette changes.
• CadenceReviewed quarterly. Last review: May 2026. Next review: August 2026.
• SourceThis guide is the canonical reference. The March 2026 official PDFs are archived in this bundle for partners and printers but are superseded by this guide where they conflict.
• Open questionSource Sans Pro (official) vs. Inter (current direction). Resolve before next quarterly review and re-version the official PDF.

Three things to remember when nothing else is clear

The three working rules above — Rams-distilled. Underneath them: ten Rams principles for what to build, three Norman levels for why it matters. When all that fades, fall back here.

Further reading

• RamsLess and More: The Design Ethos of Dieter Rams (Klemp & Ueki-Polet, 2010). The catalog from the Frankfurt retrospective; the closest thing to a primary source for the ten principles.
• RamsRams (Hustwit, 2018, documentary). Ninety minutes inside the man’s house and head. Watch it once a year.
• NormanEmotional Design: Why We Love (or Hate) Everyday Things (Norman, 2004). The visceral / behavioral / reflective framework, in his own words.
• NormanThe Design of Everyday Things (Norman, 1988, revised 2013). The foundational text. Affordances, signifiers, feedback, conceptual models — all here.