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.

NameTypefaceWeightSizeLh
TinyLibre FranklinRegular12px16px
Body SmallLibre FranklinRegular14px24px
BodyLibre FranklinRegular16px24px
Body LargeLibre FranklinRegular18px32px
Heading XSMerriweather SansLight21px32px
Heading SmallMerriweather SansNormal24px40px
HeadingMerriweather SansBook28px48px
Heading MediumMerriweather SansMedium32px56px
Heading LargeMerriweather SansBold36px64px
Heading XLMerriweather SansBlack48px72px
DisplayMerriweather SansRegular60px80px
Display XLMerriweather SansRegular72px96px

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

{# you can use custom content in Vue.JS to overwrite this here default content #}

ModaL title