UIKit

A starter library for reference in WebPack and Tailwind CSS

This page addresses many separate projects as one:


Typography

AaBbCcDdEe

1234567890?!

Merriweather Sans— for headings

AaBbCcDdEe

1234567890?!

Libre Franklin— for body copy

The type scale enables you to indicate content hierarchy. These sizes and styles are designed to balance content density with increased readability.

Name Typeface Weight Size Lh
Tiny Libre Franklin Regular 12px 16px
Body Small Libre Franklin Regular 14px 24px
Body Libre Franklin Regular 16px 24px
Body Large Libre Franklin Regular 18px 32px
Heading XS Merriweather Sans Light 21px 32px
Heading Small Merriweather Sans Normal 24px 40px
Heading Merriweather Sans Book 28px 48px
Heading Medium Merriweather Sans Medium 32px 56px
Heading Large Merriweather Sans Bold 36px 64px
Heading XL Merriweather Sans Black 48px 72px
Display Merriweather Sans Regular 60px 80px
Display XL Merriweather Sans Regular 72px 96px

Line Length

The number of characters per line influences readability. Studies indicate the following guidelines for English:

Satisfactory

45-75 characters (desktop) or 35-40 characters (mobile) per line iswidely regarded as a satisfactory line length.

Optimal

Around 66 characters (desktop) or 39 characters (mobile) is optimal.

Too long

More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.

Studies show that different aspects of reading performance such as comprehension, reading speed, method of movement, and eye movements are affected by changes in line length.


Color

Color Contrast for Accessibility

Follow the WCAG 2.0 Level AA guidelines to ensure proper color contrast.

Color Contrast Values
  • - Fail – Your text doesn’t have enough contrast with the background.
  • - AA Large – The smallest acceptable amount of contrast for type >= 18px.
  • - AA – This is the sweet spot for text sizes below below 18px.
  • - AAA – Enhanced contrast.

Main Colors

These are the splashes of color that should appear the most in the UI, and are the ones that determine the overall "look". Best for things like primary actions, links, navigation items, icons, accent borders, or text that should be emphasized.

Accent Colors

These colors should be used fairly conservatively throughout the UI to avoid overpowering the primary colors. Used an element needs to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.

Special Gradients

A beautiful and harmonious color palate will draw the user in and invite interaction; and is therefore critical to good UX.


What if your blog title is really, really long? (h1)

Aquarian Web Studio listens carefully to clients from the start, creating secure, flexible websites configured to your workflows and goals. We start simply and refuse to make things complex when they don’t need to be, exploring options for your company from many angles, because we love to help those who help others.

Here's another text paragraph. How does the spacing look? Does it look right on mobile? can we make improvements for middle-width devices? Big screens, small screens all about the thread memes.

Secondary heading (h2)

image
Sometimes, by Caroline C. Blaker Latex on Canvas, 2011 ~ Contact for Price

Too many businesses rely on limited blog and web brochure platforms that are often risky, waste money and limit growth over time. They can be impersonal and stiff and work against customer-facing needs. We believe that although the web is an automated, template-laden landscape, understanding the way people interact, and communicate with companies is our most valuable asset.

Tertiary heading (h3)

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

Aquarian Web Studio enables clients to publish anything they want, whenever they want, as they desire to do so by giving small to medium sized organizations the ultimate flexibility and scaling web development options to fit growing needs. We have implemented hundreds of additional features and changes seamlessly into clients’ websites since 2010.

Reminder heading or punchline (h4)

Aquarian Web Studio offers a combined 40+ years of web problem solving for clients and is led by Caroline Blaker, a nationally renowned “tech lead” who guides efficient, focused contractors with her fifteen years of web creation. Caroline has twelve years’ experience programming in Wordpress, and has utilized ExpressionEngine for the benefit of her clients since version 1.6.3!

More info heading (h5)

UI Components

This field has an error.

This field has an error.

Checkboxes

Radio buttons

Unstyled

No way am I styling those things. Have you read about what it takes just to change their color? Psh. You have to hide the actual element and reproduce a styled shape that looks just like this but a different color. The whole thing just feels dishonest.

Contact Form

We appreciate your contact and will be with you shortly.

Please correct the following error(s):

  • {{ error }}


Images

Painting: Sometimes
image
Painting: Sometimes
image
Sometimes, by Caroline C. Blaker Latex on Canvas, 2011 ~ Contact for Price

Cards