3 Concrete Approaches

All share: Dracula bg (#282a36), dot matrix texture, rounded soft cards. They differ in accent color strategy.

A

Purple Focus (recommended)

#bd93f9 mauve as the single accent. Gradient title (purple→pink). Clean card hover with purple glow. Cohesive and refined.

IoT Learning
OJ Platform

Online judge

Code Runner

Run snippets

Textbooks

Reference books

B

Cyan Dev

#8be9fd cyan as accent. Glowing title, left-border accent on cards. Closer to the old terminal vibe — just upgraded. More "code editor", less "app".

IoT Learning
OJ Platform

Online judge

Code Runner

Run snippets

Textbooks

Reference books

C

Multi-Accent Rainbow

Each card gets a different Dracula color top border (pink, purple, cyan…). Title uses all colors. Most colorful — looks like syntax highlighting applied to the UI.

IoT Learning
OJ Platform

Online judge

Code Runner

Run snippets

Textbooks

Reference books