UX Developer Intern Challenge

Build a single-page responsive website for a fictional tech startup – AcmeStack.

Rules

1. The final result must live on CodeSandbox (no other submissions will be accepted).
2. You can use any frontend tech stack you choose (CSS pre-processor, JS framework / library, vanilla html/css/js, etc).

Challenge

You must recreate, as faithfully as possible, this single-page website.

Screenshots

• iPhone X (product render)
• iPhone 5 (320 x 568)
• Desktop (1440 x 900)

The iPhone X screenshots provide a rendered example of how we expect the site to look on that device.

Minimum required deliverables

• Reproduce the designs provided in the screenshots
• At least one media breakpoint (mobile vs desktop)
• Simulate a server request by using a “timeout” on form submit
• During the simulated server request, toggle a “loading” state
• Both “username” and “password” inputs must validate against a min/max character count
• Togglable “remember me” checkbox
• Success state “sign out” button must link back to the initial state of the website
• Correct usage of:
  • Colours
  • Typography
  • Layout

Details to omit

• This website is just a prototype, so interactions with a server are not necessary
• “remember me” checkbox does not need to perform an action (simply write the styles and make the element interactable)
• Social links (Google, Facebook, Twitter) do not need to go anywhere
• You have evergreen browser support (build for the newest browser versions), so don’t worry about backwards compatibility for older browsers

Design system

AcmeStack brand colours

• White: #fff
• Black: #000
• Red: #ff0051
• Light purple (lighter): #f4ecff
• Light purple: #e4d2ff
• Light purple (darker): #caaef2
• Dark purple (lighter): #8456ff
• Dark purple: #7e24fa
• Dark purple (darker): #6624d2

The design also contains a linear gradient, which shifts from Dark purple to Light purple (darker) at a 45 degree angle.

Typography

The rendered typography is to use the default primary sans-serif of the operating system / device the webpage is accessed from. On the latest MacOS / iOS, that typeface is San Francisco. We have provided you the font stack for San Francisco:

font-family: -apple-system, BlinkMacSystemFont, "San Francisco";

It is up to you to include smart defaults for Windows and Linux.

Icons

All SVG assets can be found in the svg folder. This folder consists of:

• AcmeStack logo
• Google logo
• Facebook logo
• Twitter logo
• Loading spinner

You will need to copy the .svg markup into your project (do not link directly to a hosted asset).

If struggling to use the SVGs, feel free to substitute them with an empty <div /> in the markup, stylized to be:

• Same size as the icon presented in the design
• A perfect circle
• Solid Dark purple background