Design system v0.1

Knowledge Porridge design system.

One stylesheet (/ds/kp.css) shared by knowledgeporridge.ai and howtoteachyourself.com. Tokens live in :root; every component below is plain HTML with kp- classes and no JavaScript.

Colour

Ink
--kp-ink #151521

Primary
--kp-primary #5650f5

Primary soft
--kp-primary-soft #eceefe

Accent
--kp-accent #dcf83c

Surface soft
--kp-bg-soft #f4f5f7

Surface tint
--kp-bg-tint #eef1fd

Surface dark
--kp-bg-dark #0d0e14

Yellow
--kp-yellow #fbc540

Green
--kp-green #72bf82

Orange
--kp-orange #fb7c4f

Pink
--kp-pink #f5a3cf

Sky
--kp-sky #a8d5fa

Good
--kp-good #1f8a46

Warn
--kp-warn #b86a00

Bad
--kp-bad #cf2d20

Violet
--kp-violet #7e3aa8

Type

Display, 64px

Heading 1, fluid 30–42px

Heading 2, fluid 24–30px

Heading 3, 22px

Lead paragraph, 18px, secondary ink.

Body, 16px / 1.6, Plus Jakarta Sans (SIL OFL 1.1, self-hosted). Italic emphasis, bold, a link, a highlight and inline code.

Small muted text, 14px.

Buttons and links

Primary Secondary Ghost Dark Accent Danger

Large Small

Link with arrow tile

Eyebrow, chips and badges

Eyebrow pill

ChipYellowGreen tag

NeutralPrimaryKnownFrontierGapVocabulary

Role cards

TitleOne-line description DisabledComing soon

Checklist and steps

Checklist item
Another item

Step titleStep description.
Second stepDescription.

Cards and tiles

Card

Elevated card with a soft shadow.

Flat card

Border only.

Soft card

Tinted, no border.

42%Stat tile

120Concepts

0Trackers

Quote cards

Label

Yellow quote card.

Attribution

Label

Green quote card.

Attribution

Label

Sky quote card.

Attribution

Forms

Select

Textarea

Error message

Info message

Quiz options and progress

An optionThe right answerA wrong pick

Panel, FAQ and comparison

Dark panel

For a mission or a promise.

Action

FAQ question

Answer. Pair every FAQ with FAQPage JSON-LD.

Another question

Answer.

Feature	Us	Them
Row	yes	no

WordmarkAnother

Illustrations