Very Big Header

Less Big Header

Small Header

Bold Title

Paragraph title

This text contains a link to somewhere else

This header contains a link to somewhere else

Splitcontent

This line needs your attention.

This line means something went wrong.

This line means something is very wrong and needs your attention.

This page contains all the html elements in the public UI, with the exception of some very specific point styles. All design work should reference this page, preferably as-is for easy comparison. The design includes the header, footer and menu. The menu expander and the accessibility options are the only live elements on this page. Buttons and links go nowhere but they do show the action state. Everything is presented in every available state for convenient reference.

The main menu can be behind an action (typically the burger icon) and will include toggle switches and a list of links. These functions must be available on every page.

A footer is 100% required. Links to TOS + Privacy must be visible. No, you can't hide them under a menu.

High-contrast mode is required (look in the main menu) and should be designed separately. Flow will NOT be changed for high-contrast display, this includes graphics.

Large font is implemented by increasing the root-font-size.

Hover over most elements to see their node and class name. Or use the inspector.

The QR code on the right has certain requirements, like size, contrast and margins. in general, it needs to be black on white with at least 6px white border and 6px margin.

Size is proportional to the contained data and cannot be preset. We can make small ones bigger but we cannot make big ones smaller.

You can stop reading here. Filler text follows.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proigroup-2, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

変リアマ殺27復カフスメ動着リ中71応ぱ属35純うゃてル国拳ヨエ公限91政ソサメ毎本さだが政書キケハ撃童か結施畳後ンみほ落一射窃貴ょゅく。出ラち半組力リイミ看決りの動道エ認教れかを豆時ワ服国にのば整屋ソ投治フべう語指ユモ共辺ン利図ド提図ルちむ応歩ク萩型ろ氏任ほせ。長佐評美フソア天兼づ基1将ンイあ意断チオフマ英万コ売約オヤ日真ロセヌ雪活京徳曽てぽ。

集サケ涙権日せな信会ゅ由活オレヘ結合しめむぼ家知ら夏悦企ぐこょせ彩川ひけわば市計差説熊ルら。音の我含フ出五ンあま揮参ケマ黄試情額も在質ヲウラム事図トヱク趣合アホヘ物控ぴづ協時ト計賃がい則査ルヤヲキ断22球イヘ純社フスケモ記監ヒネ知議えぎごお。9業知ユセノク属例りもく間性ヤトヨソ面成ずやを性能広あく予毎ほドーッ文47崎滞選カ秋締ロ対強ゆはぶぜ済奨貯鏡すが。

Site palette

The circles are not part of the design

Spot colors like badges and highlights are not included here.

Many are semi-transparent. Click to add background colors.

Icons

Graphics

All graphics must be in SVG format, individual files, and NOT overqualified. That means don't design a 32px graphic as a 4K graphic. And if it looks like a line with rounded ends, you make it a line with rounded ends and not an outline with a dozen control points. If the SVG file is more than 1kB then you have very likely made an error here.

Graphics must either be high contrast, or easily adaptable to high contrast. This is easy with SVG

Graphics in font files will NOT be accepted.

Exception: graphics smaller than 24px must typically be built manually, pixel by pixel, in BMP or PNG format. The `resize` function often produces a blob at this scale.

Animated GIF is acceptable but not preferred. CSS animation is much smoother

The `Hello Person` on personalized-content pages:

With smaller text and allergy alert block:

The standard `Person` ID block with reduced info:

Form inputs:

All inputs have the standard box-shadow style.

All input fields must be at least 30px high and 3 to 4 em wide.

This data

This data

This data

Big space for more text.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

An Uploader for anything

All modes displayed here. All modes required in any design work.

Icons should be modified by property (opacity, color etc) rather than multiple icons

Low-contrast version (change site settings in the menu for high contrast version)

Highlighted things

The colours are always the same sequence, are separate from the site palette, and should be distinct from it's neighbours. A gradient series of the same base color is not acceptable. Wraps after 11, and needs to be an odd number.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen

One Two Some inline Text Three Four

Multiple choice buttons with big words

All buttons must be at least 40px high and 80px wide.

There is NO guarantee of text content - button design must accept overflow.

Big Choice Chosen Big choice number Two Big choice number Three Big choice number Four. With extra text that should wrap to the next line

Multiple choices with small words. One of them is disabled. The buttons self-balance and then wrap.

One Two Three Four

Multiple choice switcher.

One Two Three

Smaller buttons suitable for lots of choices.

• 9:00 9:15 9:30 9:45
• 10:00 10:15 10:30 10:45
• 11:00 11:20 11:40
• 12:00 12:10 12:20 12:30 12:40 12:50

The other type of checkbox

• Boxes that need checking
• Box that cannot be (un)checked

Action Buttons

All buttons must be at least 40px high and 80px wide.

There is NO guarantee of text content - button design must accept overflow.

Finished! Hover Disabled Attention!

Cancel Hover Disabled

Icon Left Icon Right

Big Action

Button as Label Label

Big Action + Icon

Big Action (clicked state)

Anchor as button Anchor as button

List of something

• One
• Two
• Three
• Four
• Five

3. One
4. Two
5. Three
6. Four
7. Five

Action Boxes

Value Boxes

Need to do this

Task is done

Task Failed

General-Purpose Carousel

Table of Values

Yes, the values are in monospace font.

Table of test results in a box

Table of Assignments

Test results, with high-low values

Width of the block is variable

Date Bar

Visually identical to the calendar, but different actions

A Calendar

One day can have multiple properties. For example today, current day selection, special day, closed.

The footer below is 100% required. Links to TOS + Privacy must be visible. No, you can't hide them under a menu.