button
Starts an action. One component covers the text button, the icon button and the FAB.
A preview of the Durusu UI design system while the Angular library is being built. All 56 components with their appearances, sizes and states. Switch the theme and the density in the bar: every component on the page is recalculated from the same tokens. Plain HTML and CSS, no scripts.
Fonts
font-sans
Figtree
ABCDEFGHIJKLM abcdefghijklm 0123456789 & ?!
Every component and all five type categories
font-serif
Merriweather
ABCDEFGHIJKLM abcdefghijklm 0123456789 & ?!
Editorial content only; no component uses it
font-mono
Roboto Mono
ABCDEFGHIJKLM abcdefghijklm 0123456789 & ?!
Code and technical tabular data
Weights
Light 300Normal 400Medium 500Semibold 600Bold 700
display-large6rem / 6.5rem · 700 · -0.02emClear water
display-medium4.5rem / 5rem · 700 · -0.015emClear water
display-small3.75rem / 4.25rem · 600 · -0.01emClear water
headline-large3rem / 3.5rem · 600 · -0.01emSixty components, one system
headline-medium2.25rem / 2.75rem · 600 · -0.005emSixty components, one system
headline-small1.875rem / 2.375rem · 600 · 0emSixty components, one system
title-large1.5rem / 2rem · 600 · 0emInvite your team
title-medium1.25rem / 1.75rem · 600 · 0emInvite your team
title-small1.125rem / 1.625rem · 500 · 0.005emInvite your team
body-large1.125rem / 1.75rem · 400 · 0.01emChanges are saved as you type and synced to every device.
body-medium1rem / 1.5rem · 400 · 0.015emChanges are saved as you type and synced to every device.
body-small0.875rem / 1.25rem · 400 · 0.02emChanges are saved as you type and synced to every device.
label-large1rem / 1.5rem · 500 · 0.01emSave changes
label-medium0.875rem / 1.25rem · 500 · 0.015emSave changes
label-small0.75rem / 1rem · 500 · 0.02emSave changes
Spacing, sizing and shape
Sizing tokens · live: change the density above and these move
control-height-sm32px at 0 · 28 at −1 · 24 at −2control-height-md40px at 0 · 36 at −1 · 32 at −2control-height-lg48px at 0 · 44 at −1 · 40 at −2item-height36px at 0 · 32 at −1 · 28 at −2row-height48px at 0 · 40 at −1 · 32 at −2bar-height56px at 0 · 48 at −1 · 40 at −2control-inset8px at 0 · 6 at −1 · 4 at −2cell-padding-inline16px at 0 · 12 at −1 · 8 at −2surface-padding24px at 0 · 16 at −1 · 8 at −2surface-padding-sm16px at 0 · 12 at −1 · 8 at −2stack-gap24px at 0 · 16 at −1 · 8 at −2target-min24px at 0 · 24 at −1 · 24 at −2target-min-coarse44px at 0 · 44 at −1 · 44 at −2Spacing scale · n × 0.25rem · density never changes it
spacing-00remspacing-px1pxspacing-0.50.125remspacing-10.25remspacing-1.50.375remspacing-20.5remspacing-2.50.625remspacing-30.75remspacing-3.50.875remspacing-41remspacing-51.25remspacing-61.5remspacing-71.75remspacing-82remspacing-92.25remspacing-102.5remspacing-112.75remspacing-123remspacing-143.5remspacing-164remspacing-205remspacing-246remspacing-287remspacing-328remspacing-369remspacing-4010remspacing-4411remspacing-4812remspacing-5213remspacing-5614remspacing-6015remspacing-6416remspacing-7218remspacing-8020remspacing-9624remRadius · follows size
none0remxs0.125remsm0.25remmd0.375remlg0.5remxl0.75rem2xl1rem3xl1.5rem4xl2rem5xl2.5rem6xl3remfull9999pxColour roles
surfacesurface-subtlesurface-containersurface-container-highsurface-raisedsurface-inverseon-surfaceon-surface-mutedon-surface-inverseborder-subtleoutlineprimaryon-primaryprimary-containeron-primary-containerprimary-textfocus-ringsuccesson-successsuccess-containeron-success-containersuccess-textwarningon-warningwarning-containeron-warning-containerwarning-textdangeron-dangerdanger-containeron-danger-containerdanger-textinfoon-infoinfo-containeron-info-containerinfo-textscrimshadow-colorActions
toggle-button
A button that stays on. Alone it toggles one setting; in a group it picks one or several of a few options.
dropdown
The menu: a list of actions that opens from a trigger.
toolbar
A bar that groups a title and the actions that belong to one surface.
ripple
A directive that draws a wave from the point of contact, for hosts that opt in to a stronger press.
Mid-expansion: a 16% wave in the content colour, clipped by the host.
Form controls
form-field
The wrapper that draws the box, label and message for every text-like control.
input
The native text input and textarea. It has no styling of its own; the form field draws it.
checkbox
Turns one option on or off, or picks several from a list.
UncheckedHoverCheckedIndeterminateFocusDisabledDisabled
radio
Picks exactly one of a short list.
MonthlyHoverYearlyFocusDisabledDisabled
toggle-switch
Turns a setting on or off with immediate effect.
OffOnFocusDisabledDisabled on
slider
Picks a number, or a range, by dragging along a track.
Volume
Price range · dragging
Disabled
knob
A rotary control for a bounded number, where a slider has no room.
64%
Gain21°C
Focus50%
rating
Captures or shows a score out of a small number of stars.
4.0 · 128 reviews
select
Picks one value, or several, from a closed list.
combobox
A select you can type in: filters a closed list as you type.
autocomplete
A text input that offers suggestions. The value is whatever is typed.
listbox
A list of options that is always visible, for one or several choices.
option
One row in a select, combobox, autocomplete or listbox. Shared by all four.
chips
Compact pills that filter, choose, or hold the entries of a multi-value field.
AllActiveDraftArchivedFocusDisabled
datepicker
Picks a date or a date range from a calendar, or by typing.
November 2026
MoTuWeThFrSaSu
timepicker
Picks a time of day from columns of hours and minutes, or by typing.
picklist
Moves items between an available list and a chosen list, and orders the chosen ones.
Available columns
Selected columns
Layout and containers
card
A static surface that groups related content.
Raised
surface-raised, a border-subtle hairline and shadow-1.
Outlined
surface with a border-subtle hairline. The default on a plain page.
Filled
surface-container, no edge. For groups inside another surface.
accordion
A stack of headers that each reveal a panel.
Send items back within 30 days for a full refund. Return shipping is free on orders over $50.
collapsible
The headless primitive that shows and hides one region.
divider
A hairline that separates content.
or continue with
grid-list
Lays out tiles of equal weight in a responsive grid.
North quay
48 files
Reef mapping
312 files
Estuary
7 files
splitter
Divides an area into panes that can be resized by dragging the gutter between them.
Files
Editor
Inspector · dragging
scroll-area
A scroll container with thin, themed scrollbars.
Depth soundings were taken at low water on the north quay between the fuel berth and the slipway. Readings are corrected to chart datum and averaged over three passes. Outliers above two standard deviations were removed before plotting the contours shown in the attached sheets.
pnpm add @durusu/ui @durusu/theming @durusu/cdk
virtual-list
Renders only the visible rows of a very long list.
Sounding 4,812
Sounding 4,813
Sounding 4,814
Sounding 4,815
Sounding 4,816
Rows 4,812–4,816 of 10,000. Nine rows are in the DOM.
carousel
Shows a row of slides one view at a time.
timeline
Shows events in order along a line.
Survey published
Today, 09:12
Version 2.4 is live for all members.
Review approved
Yesterday, 16:40
Soundings uploaded
11 Nov, 08:05
48 files added by Amina Yusuf.
Final sign-off
Pending
Overlays
dialog
A modal surface that asks for a decision or a short task.
Delete "Harbour survey"?
The project and its 48 files will be removed for all 6 members. This can't be undone.
drawer
A panel that slides in from an edge, as an overlay or pushing the content beside it.
Filters
Only my projects
popover
A small non-modal surface anchored to a trigger, for content richer than a tooltip.
Share "Harbour survey"
Anyone in the workspace with the link can view.
tooltip
A short text label that appears on hover or focus.
Copy linkArchived projects stay searchable for 30 days.Bold ⌘B
toast
A brief message about something that just happened, shown at the edge of the screen.
Project published
Version 2.4 is live for all members.
Upload failed
tide-gauge.csv is larger than 50 MB.
Feedback and status
alert
A message in the page about the state of a task or a section.
Changes published
Version 2.4 is live for all members.
Sync in progress
Large files can take a few minutes to appear.
Your trial ends in 3 days
Add a payment method to keep your projects editable.
Upload failed
The file is larger than 50 MB. Compress it and try again.
badge
A small label for status, category or count.
DraftBetaNewActiveExpiringFailedSyncing83
progress-bar
Shows how far a task has got, or that it is running.
Uploading soundings.zip64%
Preparing export
Upload completeDone
progress-spinner
A circular indicator that something is loading or progressing.
skeleton
A placeholder in the shape of content that is loading.
meter
Shows a measurement within a known range: storage used, password strength, a score.
Storage24 of 100 GB
Password strengthStrong
API quota78% · high
Disk96% · almost full
meter-group
One bar split into segments that add up to a whole.
Storage68 of 100 GB
Surveys32 GBImagery18 GBExports12 GBOther6 GB
radial-meter
A meter drawn as a ring, for a single headline percentage.
72%
Coverage94score
18%
Battery · lowgauge
A half-ring that shows where a reading sits on a scale, optionally against coloured bands.
58%CPU load
62km/h · caution
Data display
table
Rows and columns of data that can be sorted, selected and paged.
| Project | Owner | Status | Files | |
|---|---|---|---|---|
| Estuary sensors | Kofi Mensah | Draft | 7 | |
| Harbour survey | Amina Yusuf | Active | 48 | |
| Reef mapping | Lucía Ortega | Syncing | 312 | |
| Tide tables 2027 | Jonas Weber | Expiring | 1,204 |
chart
The shared look for charts: series colours, axes, grid, legend and tooltip.
UploadsExportsActive members
avatar
Represents a person or a team with an image, initials or an icon.
AYJWLOKMDUAYAYJWLO+5
icon
Renders one glyph from the icon set at a text-relative or fixed size.
Icon at 110% beside text
Foundations in use
State layers
One rule for every interactive part: state is an overlay in the colour of the content, never a new colour.
Rest
Hover 8%
Focus 12%
Press 16%
Drag 16%
Selected 8%
Current 12%
Rest
Hover 8%
Focus 12%
Press 16%
Drag 16%
Sel. + hover
Disabled
Rest
Hover 8%
Focus 12%
Press 16%
Drag 16%
Elevation
Six levels, each tied to a kind of surface. Pick the level by what the thing is, never by taste.
0Flat
1Raised card
2Hover, sticky
3Menu, tooltip
4Drawer, sheet
5Dialog
Motion
Motion says where something came from and that the interface heard you. Pick the easing by what is happening, the duration by how far it travels.
easing-linear
State layers, loopseasing-move
Tab indicator, slidereasing-enter
Menu, tooltip ineasing-exit
Menu, tooltip outeasing-enter-emphasized
Dialog, drawer ineasing-exit-emphasized
Dialog, drawer outeasing-overshoot
Tick, switch thumb