Final assessment

Question 1 of 12

• Banners cannot be built with auto layout.
• The banner competes with the check buttons for the accent, so people may no longer know where to tap first.
• Teal fails contrast on white for every text size.
• Banners are not allowed above a list.

Question 2 of 12

• #9CA3AF on white, 2.54:1.
• teal/700 on gray/950, 3.24:1.
• White on teal/400, 1.86:1.
• #6B7280 on white, 4.83:1.

Question 3 of 12

• The gap setting on the button’s auto layout frame.
• Move the label 4 px left by hand.
• Add negative padding to the label.
• Shrink the icon’s frame.

Question 4 of 12

• Both Hug contents.
• Both Fixed at 170 px.
• Both Fill container inside a horizontal auto layout row.
• Cancel Fill container, Save Hug contents.

Question 5 of 12

• Add a spacer rectangle above the button.
• Set the button to Fill container height.
• Move the button out of the auto layout content and pin it with Bottom constraints in the screen frame.
• Turn on wrap for the content frame.

Question 6 of 12

• Add Paused as a value of the Habit row’s State variant property.
• Override the 40 instances that need it by hand.
• Create a separate Paused habit row component.
• Add a boolean called Paused that hides the check button.

Question 7 of 12

• Lock the icon layer so it cannot change.
• Detach the icon from the component.
• Write a note on the Cover page.
• Set preferred values on the Icon instance swap property, such as Plus, Check and Bell.

Question 8 of 12

• Every component’s fill.
• The primitive teal values; the semantic variables that alias them update everywhere.
• Every semantic variable’s raw value.
• The text styles.

Question 9 of 12

• Override the outline color on every check button instance.
• Add a Dark mode to the Primitives collection.
• Make the outline thicker and keep the color.
• Point the outline’s semantic variable at a lighter primitive in its Dark mode value.

Question 10 of 12

• Whether the duration is longer than 1 second.
• Whether the ring layer has the same name and the same parent in both frames.
• Whether the trigger is On click rather than On tap.
• Whether the ring uses a color style.

Question 11 of 12

• Wrap each icon in a 44 × 44 frame so the tap areas are comfortable and do not overlap.
• Scale both icons up to 44 px.
• Leave them, because 20 px is close to 24 px.
• Remove the Share icon.

Question 12 of 12

• The habit row’s corner radius.
• The font family of the title.
• That habit names wrap to two lines and then truncate, and the add button’s accessible name is “Add habit”.
• The screen’s background color.