← ec-design-system

Color

Working specimen. Only primary #BEF264 is locked.

Brand · the one make signal

Primary

#BEF264

Create New fill only. Dark ink sits on it.

Primary tint

#E8F4C4

Rail Create New, empty-state well, selection, focus ring. Never current nav.

Primary deep

#163300

Text or icon on a tint. Never a second button color, never a hover.

Paper & type · the stage and the text

Canvas

#F7F6F2

Page / main column. Cards and the rail sit on this.

Surface

#FFFFFF

White chrome: rail, top bar, dialogs, cards on canvas.

Card

#F8F8F8

Component cards on a white stage. Cool mist, not canvas.

Current

#F3F3F3

Current nav tile. Quiet — not lime.

Line

#E8E8E6

Hairline borders, dividers, rest-state strokes.

Ink

#2A2A2A

Titles, file names, primary labels.

Body

#3F3F3F

Paragraphs and supporting sentences.

Muted

#8A8A8A

Meta, timestamps, inactive nav, kebab.

In action · type

My library

Edcafe is a teacher’s content workshop. Files live in folders, recent work sits across the top, and Create New is the one lime action. Students never see this screen — Thomas is building quizzes, graders, and chatbots between lessons.

Last opened: 19 Feb 2026 · 5 files · 2 folders

Identity · which folder, not which state

Folders, and anything that needs a stable “this object, not that one” color. Not buttons, not Premium, not saved.

Red

#ED5565

Orange

#FC6E51

Yellow

#FFCE54

Green

#A0D468

Aqua

#4FC1E9

Blue

#5D9CEC

Lavender

#AC92EC

Rose

#EC87C0

Kind · which tool, not which folder

Pastel tiles for file types. Two variants: green for AI Speech, violet for Assignment Grader and Chatbot. Same 36px footprint as folders.

AI Speech

#D8F5E2 / #1F7A4A

Assignment Grader

#E4E8FF / #4F5AA8

Chatbot

#E4E8FF / #4F5AA8

Gold · membership only

Premium

#FFD11A

The Premium chip under the account name. Not a CTA, not a folder.

On premium

#3D3200

Ink that sits on the gold chip. Dark enough to read.

Type tag · named file kinds in cards

Tag fill

#E4E8FF

Quiz / Flashcards pills on recent-file cards.

Tag ink

#5B6094

Text on the tag. Not brand, not folder.

Status · how something is doing

Success

#2EAD4B

Created, saved, healthy publish.

Warning

#F07800

Quota, unsaved, about to expire.

Danger

#D03238

Delete, errors. A label, not a red card.

In action · buttons

Rail Create uses the No files yet wash. Header Create is lime fill.

In action · nav

WORKSPACE

My Library
Submissions

In action · cards

Quiz

CAT Q (Clone) (Clone)

Flashcards

Cell organelles drill

Quiz

Photosynthesis check

Quiz

Year 8 warm-up

In action · list

NameTypeModifiedSubmissions
Test QA
Folder
YT Quiz
Folder
Ai speech
AI Speech19 Feb 2026,08:29:23—
assignment grader
Assignment Grader16 Feb 2026,09:35:005
Biology 2
Chatbot18 May 2026,14:21:560

In action · premium and tags

TThomas GoldPremium
QuizFlashcards

In action · field and empty state

Folders group quizzes, graders, and chatbots.

No files yet

Create New to start a quiz, flashcards, or a chatbot. It will land here.

In action · status

Folder created

Test QA is in My library. Drop files into it anytime.

5 AI credits left this month

Quiz generation will pause when you run out.

Couldn’t save the quiz

Check your connection and try again.