One accent family for IRIS
CVI sub-brand rule: figures keep the dark grey body and head, only the arms take one accent tone. The same family drives the blob background. The page ships with one default, #E0D993, and no other presets: add candidate colours with the picker in the bar, and the arms take that colour as it is, and each one gets a card with the two lighter tints, the blob stops and the pale tint derived from it, every value with its hex code, and the live contrast check. Click a card to try that family on the whole page.
Logo lock-ups
The mark is the original Eesti geenivaramu vector, recoloured per the sub-brand rule. Primary logo (decided): large IRIS with Estonian Biobank beneath, as the portal's navbar logo does. Secondary: EstBB IRIS on one line with a descriptor, for the app header.
portal
Eight text styles, nothing else
Outfit for everything that names or leads, DM Sans for everything that is read. Sizes follow the mgv desktop scale. Specimens use placeholder text on purpose, so the shapes read without the words. These eight are the only text styles in the system; anything that does not fit one of them is a new component, not a new style. Bold and colour changes inside a style are allowed, size changes are not.
Controls, ported from mgv-public
Every control below uses the values from the portal's SCSS and UnoCSS config: 48 px pills with heading-font 700 at 14/16, secondary as 10 % ink, badges at 16 px radius with an icon, the shadow set tinted violet (82,89,150). Buttons, badges, the three navigation levels and loading states live here; form controls have their own section below. Primary buttons are always black; the accent appears only in the Accent variant.
Black, Accent, Secondary, Danger and Link are the only button styles allowed for buttons with text. 48 px pills (Link is text only), Outfit 700 at 14/16, 12/24 padding. Hover darkens or deepens, Active darkens further and drops 1 px, Focused adds the blue ring, Disabled is 30 % opacity and keeps its width. No blue-filled, outlined or faded text buttons.
Icons lead for navigation verbs (Menüü, Sulge, Tagasi) and trail for forward motion (Esita, Alusta). Small size is 32 px. Rule: an icon-only button is always a perfect circle (48 or 32 px, equal width and height, 50 % radius), never an oval; icon with a text label is a pill in one of the five variants.
Badge = 16 px radius, 6/12 padding, bold body text with a warning icon on yellow and red. Tag = black pill. Notification = black or blue-1 card at 16 px. Progress bar with numbers is the portal's questionnaire stepper.
Rule: in tables and lists a status column fills the whole cell with the status colour and bold text, never a pill. Status cells keep their colour in striped and selected rows. Pills are reserved for tag-type columns where several values can appear at once.
Material pills are a fixed set of three and always carry their icon: Fenotüüp (blue, record icon) = phenotype data, Genotüüp (violet, DNA icon) = genotype data, Proovid (green, vial icon) = biological samples. Used wherever released material is listed: tables, application summaries, release protocols. Text-only or recoloured variants are not allowed.
Every page starts with the main navbar: the primary logo (mark, IRIS, Estonian Biobank) at 48 px height, never the bare mark; vertical separator, chevron and page title in heading-3; on the right the user name in bold, written as the person writes it (Mari Tamm, never forced lower case), and the Menüü/Sulge pill. Closed, the navbar sits directly on the blob with no background of its own and the page sheet starts under it. Open, the navbar and the menu become one white sheet, 0 0 32 32 radius and the xl shadow, first topic in blue; the blob shows only below the sheet. Rule: the whole area the open menu covers, navbar included, is white. Rule: the main navbar is always on top. It stays fixed while the page scrolls, covers the content that passes beneath it, and that content fades out under the bar through a soft edge, never a hard line. The main navbar is the only navigation on landing, sign-in and dashboard pages.
Page top navbar, for record pages with several views of one object (application, inquiry, release, consent): a glass strip under the record title, tabs separated by hairlines, the active tab in blue with a short inset underline. Up to six tabs, never scrolling; the strip stays put while the content below changes. Never used as site navigation.
Page side navbar, for multi-step and multi-section pages such as the application draft: a 300 px glass rail, sticky 76 px below the main navbar, numbered steps with four states: done (accent circle), current (black pill), needs attention (yellow circle), upcoming (grey). Every step is clickable; the autosave line sits at the bottom. On mobile the rail collapses to a horizontal stepper above the content.
Rule: three navigation levels, each with one component. Main navbar on every page; page top navbar only inside a record with several views; page side navbar only on pages with ordered steps or sections. A page never carries two of the same, and the top and side navbars never replace the main navbar.
Rule: while content loads, show a shimmering skeleton in the exact geometry of the final content: text bars at the height of the text style they stand in for, cards, table rows with the status cell and the action circle, pills. Skeleton is 10 % ink with a 1.4 s shimmer (static under reduced motion), appears immediately and is replaced in place with a 350 ms fade, so nothing jumps. Spinners are used only inside buttons and for full-page transitions. After 20 s the skeleton gives way to an error notification with a retry action.
Inputs, selection, text and files
Inputs are white 64 px cards with an uppercase caption label and a bold value (VeeInputText). Selection follows one rule: no dropdowns; every option visible for 5 or fewer, autocomplete for more. Multiple choice is checkboxes, on/off is the 30×16 toggle. Multi-paragraph text is written in the block editor, numbered paragraphs saved as structured data; the plain textarea with a counter stays only for one-paragraph notes. File handling is its own block: several uploads at once with progress, a preview drawer on click, containers opened to their structure. Domain values, diagnoses, medications and measurements, come from vocabulary selectors that search wide and store the one supported code system; datasets and genomic data are choice cards that show contents and cost before the choice. Sign-in uses TÜ account, myAccessID and e-mail link, not Estonian eID. The complete form assembled from these sits in the Complex form section.
White card 64 px, 16 px radius, 3 px transparent border, sm shadow. Label is the uppercase caption in secondary grey, value is bold 20 px. Focus gets a black border and the input shadow. Error text sits below with 10 px indent.
Typed values keep the same card. Date: one field with the YYYY-MM-DD mask in tabular figures; focus opens a one-month calendar below the field (Monday first, today ringed in blue, selected day black), typing stays possible and either route writes the same value. Range: two values on one card with an en dash, the unit in grey after them; a date range is two date fields, Alates and Kuni, as in the filter drawer. Duration: a whole number and a unit segment inside the card, tundi / päeva / kuud / aastat (h, d, m, y), never a dropdown; typing a shorthand such as 3h, 3d, 3m or 3y (Estonian 3t, 3p, 3k, 3a also works) sets the number and flips the unit; stored as an ISO 8601 duration. Year: a stepper, previous and next circles beside the four-digit year, typing allowed, range clamped. Rule: extra controls live inside the card, never as a second control beside it.
Autocomplete, for more than 5 options: the same 64 px input card, typing filters the list, the match is bold blue, arrow keys and Enter pick. The chosen value then reads like any other input value.
Visible choice, for 5 or fewer options: every option on screen at once. Pills in one row for short labels, the compact segment inside drawers and toolbars. Selected is the black fill.
CustomRadioInput, the vertical visible choice for 5 or fewer options with longer labels: connector line with dots, active option gets the black check circle and bold text.
Rule: no dropdowns and no native selects anywhere. Up to 5 options: every option is visible at once, as a pill row or compact segment for short labels, or the connector radio for labels that need a description. More than 5 options: an autocomplete field, never a scrolling list. Multiple choice uses checkboxes, on/off uses the toggle. Applies to forms, filter drawers and table tools alike.
Rule: a vocabulary selector searches wide and stores narrow. Diagnoses are found by ICD-10 code, Estonian or English name or SNOMED CT code and stored as ICD-10 only; medications by brand name or active ingredient and stored as the active ingredient with its ATC code; measurements by LOINC code, analysis name or the laboratory's local abbreviation and stored as LOINC. It is the same 64 px autocomplete card as every other list of more than 5 options: the result row shows the stored code first, the matched text in blue, and at the right the source when the match came from another vocabulary (SNOMED CT, a brand, a local name). The chosen value becomes a chip with the stored code in black, the name, and beneath it what was typed and what it was mapped to, so the mapping stays visible and can be undone. Enter takes the first match, Backspace on an empty field removes the last chip. Nothing outside the supported code system is ever stored, so a SNOMED-only concept without an ICD-10 mapping does not appear.
Rule: datasets and genomic data are choice cards, not pills. A card says what it contains before it is chosen: a short description, the first five fields with a count of the rest, the number of participants, and whether it is in the base price or costs extra. Cards are multiple choice with the checkbox; versions inside a card (imputation panels) are sub-options in a pill row and dim when the card is off. Genomic data is one fixed set: WGS long read, WGS short read, WES, imputed genotypes (choose the panels), GSA microarray. The summary strip under the group counts the selection and names the items that carry an extra charge, and it says plainly that the application computes no price. Rule: the application never shows a price or an estimate; the pre-inquiry (eelpäring) gives the indication and the contract fixes the amount. Cards may say only whether an item carries an extra charge. Participant counts here are illustrative.
Rule: any field that can hold more than one paragraph is a block editor, not a textarea. Text is stored as structured data: an ordered list of paragraph blocks, each with a stable random id, a level 1 to 4, its text and its illustrations. The visible number (1., 1.1., 1.1.1., 1.1.1.1.) is derived from position and level at render time and renumbers itself when a paragraph is moved, indented or deleted; the id never changes, so comments and discrepancy notes stay attached. Levels 1 and 2 sit flush left, levels 3 and 4 are tabbed in by one and two steps; a level can only go one deeper than the paragraph above it. Level 1 is bold. Enter adds a paragraph at the same level, Tab and Shift+Tab change level, Backspace on an empty paragraph removes it. An illustration always belongs to a paragraph: it sits under that paragraph’s text, shares its left edge and tab, and is captioned Joonis plus the paragraph number. The same structure renders the submitted preview, the print and the export. The plain textarea below survives only for single-paragraph notes with a hard limit.
Click the drop zone to watch three files upload at once. Click any finished file to open it in the drawer.
Rule: several files upload at once, each with its own row, progress bar, percentage and a cancel circle. A failed upload stays in the list in red with the reason and Proovi uuesti; nothing else stops. Finished files drop into the file list in place, keeping their order.
Rule: clicking a file opens it in the right drawer (the same 40 vw drawer as the record detail, full width on mobile): PDF and Word as rendered pages with a page stepper, images as the image, with Laadi alla in the footer. The row’s Eemalda never opens the drawer.
Rule: a signed container (ASICE, BDOC) is never a black box. The drawer shows its structure: the signatures with signer, method, time and validity, then every file inside with its type and size. A contained file of a supported type (PDF, DOCX, images, text) opens inside the same drawer with a breadcrumb back to the container; unsupported types (XLSX, ZIP, CSV) show a type badge and download only. The manifest is listed last for the technically curious.
Rule: the name gets min-width:0 and truncates in the middle, keeping the last 12 characters and the extension visible, full name in a tooltip. Size and the Eemalda action never wrap or shrink; the red row shows what happens without the rule. Rule: previewable formats always show a preview of the actual content, never a file icon: the server renders page 1 of a PDF or Word file, images show themselves; the extension tag is a small secondary label. In lists the render is a 44×56 thumbnail, in messages and document tabs a 118 px card. Only containers and data files fall back to the round type badge.
Data tables: sort, filter, density, columns, pagination
One table behaviour for the whole system. Click a header to sort, shift-click to add a second or third key; the badge shows priority. Multi-value and action columns are not sortable. Pagination and two icon buttons, Seaded (sliders) and Ekspordi (download), sit on the right above every table, buttons always right-most. Seaded opens the drawer on Filtrid, Ekspordi opens it on Ekspordi; the drawer is identical for every table with tabs Filtrid, Ekspordi, Vaade, and applied filters show as chips. Density and column layout are user preferences, remembered per table. Breakout to the full monitor width is a per-table option the designer sets, exposed here in the drawer's Vaade tab so you can compare. Every table ends with the same pagination. The circle at the end of each row opens the record in a wider drawer, every field in the order set in Vaade. Where a table is editable, editing starts on select, the editor is drawn in place so nothing moves, and saving is one action at table level.
Click cycles ascending, descending, off. Shift-click adds a key; the numbered badge shows priority, up to three keys. Default sort is Tähtaeg ascending. Unsortable: Materjal (several values), Tegevused, free-text columns. Sort, filters and page are kept in the URL so a view can be shared.
Every table uses the same drawer: search field first, then groups of checkboxes with counts, date ranges as two YYYY-MM-DD fields, and a Tühjenda / Rakenda footer. Applied filters appear as removable chips above the table, plus a total count. Changing a filter returns to page 1.
Above and below every table on desktop (below only on mobile). Left: the range and total. Right: pagination, then two icon-only circle buttons in fixed order: Seaded (sliders, carries the active-filter badge) and Ekspordi (download, right-most). Rule: the two buttons are always right-most so their position never moves; pagination, whose width changes with the page count, sits to their left. Seaded opens the drawer on Filtrid, Ekspordi opens it on Ekspordi; the drawer tabs are always Filtrid, Ekspordi, Vaade (columns first, then rows per page, density, width). Pagination itself: ("11–20 / 47"), then first page, up to two pages either side of the current one, the current page as an editable number with the total beside it, and the last page. Rows per page 10 / 25 / 50 / 100 are set in the drawer's Vaade tab (Seaded, then Vaade), remembered per user. Keyboard: Enter in the number field jumps to that page.
Tavaline is 56 px rows at 16 px text, Tihe is 36 px at 14 px, chosen in the drawer's Vaade tab. Pagination controls shrink with the table. User preference, stored per user for all tables.
The Vaade tab of the drawer starts with the column list: show and hide, reorder by dragging; the first column and Tegevused are locked. Below it sit rows per page, density and width. Stored per user and per table.
Rule: the action circle at the end of every row opens the record drawer. It is wider than the settings drawer (40 vw against 25 vw on desktop, both full width on mobile), has no tabs, and lists every field of the record in the order set in Vaade, hidden columns included and marked. Status keeps its fill, materials keep their pills, dates their fixed cells. Footer: Sulge and Ava taotlus.
Rule: clicking a row selects it (pale accent on non-status cells); only the action circle opens the detail. One row at a time, kept while paging, so the drawer can be compared against the list.
Rule: in an editable table a cell edit starts on select, one click, and the editor is drawn in place: same font, padding, height and alignment, so the text never moves. Text, numbers, dates and ranges are typed in the cell; a fixed set, an autocomplete tag list or a calendar opens under the cell like the calendar under a date field, all options visible. Edited cells get an accent dot, edited rows an accent edge. Rule: nothing is persisted per cell. Edits stay pending until Salvesta muudatused at table level; Tühista reverts them all; leaving with pending edits asks first.
A table is either in the 1760 px container or breaks out to the full monitor width. This is set per table by the designer (dense registers break out, short lists stay in), not by the user. Breakout tables keep a sticky header, minimum column widths and scroll horizontally inside their own container, never the page.
Application draft with field instructions
Use case UC-2.1 in the portal's language: glass sections on the blob, caption-label inputs, instruction panels in blue-1, consent picker as white cards with the connector check, a coordinator's discrepancy note under the field it concerns (UC-2.5). The rail shows progress and open issues. Drafts save automatically.
Vali kehtiv eetikakomitee kooskõlastus. Uuringu kirjelduse väljad täidetakse selle andmetest ja neid ei saa siin muuta.
- laadi üles digiallkirjastatud konteiner (.asice), või
- lisa link ETIS kandele.
Kõik uurijad, kes andmeid näevad. Süsteem kontrollib nimekirja ETEK kooskõlastuse ja ETIS vastu (UC-4.1).
Kirjelda, keda valimisse kaasata. Eelpäringus olid need vabatahtlikud, taotlusel on kohustuslikud.
Backgrounds, shells and page layouts
The portal's background is one SVG: two blurred ellipses with a linear gradient, saturated to 70 %, with grain. Content sits either in a 70 % white blurred sheet with 32 px top corners (LayoutBlur, signed-in pages) or beside a straight 60 % white panel on a 40/60 grid (LayoutSplitMiddleStraight, landing and sign-in). The six shell treatments come first, then the eight page layouts built on them. The accent picker recolours the blob everywhere.
Sisu lebab 70 % valgel hägustatud lehel, nagu portaali LayoutBlur.
Vasakul sisu, paremal sirge klaaspaneel. Portaali LayoutSplitMiddleStraight.
Portaali sinine blob (bg_blue.svg): #00C2FF → #FF29C3, #174AFF.
iris.biobank.eeEGV-2026-0142 · SAPU
Portaali roheline blob (bg_green.svg) koolituse ja õppematerjalide jaoks.
Kolm etappi, üks keskkond.
Content max 1760px, page padding 80px (56 below 1440). Breakpoints from mgv: 768, 1024, 1440, 1680, 1920.
Navbar 48/80 padding collapsing to 24 on scroll, logo 48 px, title in heading-3 after a 24 px separator. Content sheet starts at 146 px, 98 px when collapsed.
Page ground is white in the light theme (switchable in the bar: White or Warm; dark: Charcoal, Slate, Midnight). Sheet 70 % white blur 24, xl shadow. Cards 90 % white, 16 px radius, sm shadow. Glass 50 % white with 10 % ink border and blur 16. Modal and menu panels 32 px.
Rule: a status column fills the whole cell with the status colour, no pill, and has a fixed width so the fills align vertically down the column. Pills only in tag-type columns where multiple values are allowed. The Materjal column uses the three mandatory material pills (Fenotüüp, Genotüüp, Proovid), each with its icon.
Rule: tables are striped, 4 % ink on even rows. Selection fills non-status cells with the pale accent; hover lifts with the sm shadow; keyboard focus is the blue ring. Status cells keep their own colour in every row state.
Rule: the split shell is a strict 40/60 grid. Left and right panes are separate worlds: text, buttons and images never cross the split line or sit under the glass panel. Long headlines wrap inside their pane.
Rule: PDF, Word and image attachments always show a preview of the actual content: page 1 rendered to an image with its real title and text, or the image itself. The extension tag is secondary. Only containers and data files (ASICE, CSV, ZIP) use a type badge. Names truncate in the middle.
Rule: dates are always YYYY-MM-DD, timestamps YYYY-MM-DD HH:MM (24 h), no month names or dotted forms. Dates are rendered as fixed-width character cells (each digit 0.64 em, separators 0.38 em) so they align across rows and columns in any font, plus tabular figures where the font supports them, and date columns have a fixed width. Ranges use an en dash. Entry follows the same shape: a date is one YYYY-MM-DD field, a date range two fields (Alates, Kuni), a duration a number with a visible unit segment, a year a stepper.
Rule: no dropdowns or native selects. Up to 5 options: every option visible at once, as a pill row, compact segment or the connector radio. More than 5: an autocomplete field. Multiple choice is checkboxes, on/off is the toggle. Forms, filter drawers and table tools follow the same rule.
Rule: diagnoses, medications and measurements are searched wide (ICD-10, SNOMED CT, brand names, local laboratory names) and stored narrow: ICD-10, active ingredient with ATC, LOINC. The chip shows the stored code and the term that was typed. Datasets and genomic data are choice cards with contents, participant count and whether an extra charge applies visible before the choice. No price anywhere in the application: the pre-inquiry indicates, the contract fixes.
Sections 80 px apart, cards 24–32 px padding, fields 24 px apart, controls 48 px tall, inputs 64 px. Type is the eight-style set: Title 64, H1 44, H2 32, H3 24, Subtitle 20 (Outfit), Normal 18 and Large 22 (DM Sans), and the 14 px text-with-line label.
- Decided: Outfit for headings and buttons, DM Sans for body text and as fallback. Eight text styles, no others.
- #206FEB blue for the arms. IRIS is the researcher-facing, institutional side of the biobank. That blue is already the portal's link and tab colour, so it also keeps the two products visibly related. Any other candidate goes in through the picker and gets the same card.
- Decided: horizontal lock-up (IRIS over Estonian Biobank) is the primary logo. One-line EstBB IRIS for the app header, the tile icon, gradient stickers for print.
- Decided: five text-button variants. Black primary, Accent, Secondary, Danger, Link, each with initial, hover, active, focused and disabled states. No blue-filled buttons.
This page is the design system: tokens, text styles, controls, tables, layouts and the rules beside them. On confirmation the accent colour and the background become fixed values here and the picker bar goes away.
- Fonts
- Outfit + DM Sans ✓
- Text styles
- Title · H1 · H2 · H3 · Subtitle · Normal · Large · Text with line ✓
- Primary logo
- Horizontal lock-up ✓
- Accent family
- Blue
- Buttons
- Black · Accent · Secondary · Danger · Link ✓
- Reply with
- the accent colour and the background, or a change to either