Mediterranean
Personal account signup
Personal Account Signup
Personal Account Signup
Component samples
Typography
Display heading — 36px Heading 1 — 28px Heading 2 — 22px Heading 3 — 18px Subtitle — 16px medium Body text — 14px regular. The quick brown fox jumps over the lazy dog. Caption — 12px
Layout primitives
Background
Surface
Surface variant
or
Feedback
Changes saved successfully.
Profile updated.
Could not save. Try again.
Loading…
No results found
Try adjusting your filters or search terms.
Data
| Name | Role | Status |
|---|---|---|
| Maria Silva | Admin | OK |
| João Costa | Editor | Beta |
| Ana Souza | Viewer | Review |
Progress 72%
Revenue 40%
1,284 Active users ↑ 12% this week
R$ 42k Revenue ↓ 3% this month
Navigation
Buttons
Form elements
Dialog
Are you sure you want to apply this preset?
Containers
Card title
Card body text — secondary information lives here.
Interactive card
Informational message — something to be aware of.
Success — action completed.
Warning — review before continuing.
Error — something went wrong.
Tab content appears here.
What is Koder Design?
Koder Design is the canonical design system for the Koder Stack.
How do I use presets?
Koder Design is the canonical design system for the Koder Stack.
New Beta OK Review Error
Typography
Display heading — 36px Heading 1 — 28px Heading 2 — 22px Heading 3 — 18px Subtitle — 16px medium Body text — 14px regular. The quick brown fox jumps over the lazy dog. Caption — 12px
Layout primitives
Background
Surface
Surface variant
or
Feedback
Changes saved successfully.
Profile updated.
Could not save. Try again.
Loading…
No results found
Try adjusting your filters or search terms.
Data
| Name | Role | Status |
|---|---|---|
| Maria Silva | Admin | OK |
| João Costa | Editor | Beta |
| Ana Souza | Viewer | Review |
Progress 72%
Revenue 40%
1,284 Active users ↑ 12% this week
R$ 42k Revenue ↓ 3% this month
Navigation
Buttons
Form elements
Dialog
Are you sure you want to apply this preset?
Containers
Card title
Card body text — secondary information lives here.
Interactive card
Informational message — something to be aware of.
Success — action completed.
Warning — review before continuing.
Error — something went wrong.
Tab content appears here.
What is Koder Design?
Koder Design is the canonical design system for the Koder Stack.
How do I use presets?
Koder Design is the canonical design system for the Koder Stack.
New Beta OK Review Error
By surface
Create account
Key rules for this surface
44 px min touch target
Bottom-anchored primary actions
Single-column form layout
Create account ⌘ K
Key rules for this surface
28–32 px compact density
Hover + keyboard focus states
Multi-column form layout
Create account
Key rules for this surface
36 px inputs with HTML semantics
Responsive grid (1 → 2 cols)
Progressive enhancement — no JS required
Create account
⬆⬇⬅➡ D-pad navigation · OK to confirm
Key rules for this surface
56 px+ oversized touch targets
4 px focus ring — D-pad navigation
No hover states — use focus-visible only