Componenten

Theorio Design System

Een overzicht van onze bouwstenen: buttons, cards en meer.

Buttons

Buttons zijn de primaire interactie-elementen. Ze gebruiken een hard-shadow systeem en een unieke font-animatie bij interactie.

Kenmerken:

  • Border Radius: 12px
  • Hard Shadow: 2px offset (Default), 3px (Hover), 1px (Pressed)
  • Font Animation: Variable width & weight changes on press
Pressed
Disabled

Card Components

Cards gebruiken ons hard-shadow systeem. Ze groeperen informatie en geven structuur.

✨

Standard Card

Uses .hard-shadow-tight and .hard-shadow-shadow . Border radius 20px default.

🎡

Carousel Shell

Radius 20px ( rounded-[20px] ). Light border, high opacity background.

Image

Image Tile

Radius 20px. Subtle shadow.

De beste study-buddy.

Icons

We gebruiken voornamelijk Google Material Symbols Rounded . Deze iconen zijn flexibel en passen goed bij onze moderne uitstraling.

Gebruik:

  • Class: material-symbols-rounded
  • Stijl: Rounded (past bij border-radius)
  • Filled: Gebruik font-variation-settings: 'FILL' 1 voor actieve states of nadruk.
  • Outlined: Gebruik font-variation-settings: 'FILL' 0 (default) voor standaard weergave.

Outlined (Default)

home Home
person User
settings Settings
edit Edit
delete Delete
add_circle Add

Filled (Active/Emphasis)

home Home
person User
settings Settings
favorite Favorite
star Star
check_circle Check

Elements & Shapes

person
Avatar (Full Radius)
New Feature Badge (Full Radius)