Limestone Design System — the University of Kansas
PatternLab documentation
Bootstrap documentation.
-
KU BlueVariable Name —$ku-blue
Hex Value —#0051ba
RGB Value —rgb(0, 81, 186) -
CrimsonVariable Name —$crimson
Hex Value —#e8000d
RGB Value —rgb(232, 0, 13) -
Jayhawk YellowVariable Name —$jayhawk-yellow
Hex Value —#ffc82d
RGB Value —rgb(255, 200, 45) -
Signature GrayVariable Name —$signature-gray
Hex Value —#85898a
RGB Value —rgb(133, 137, 138)
-
FogVariable Name —$fog
Hex Value —#8e9fbc
RGB Value —rgb(142, 159, 188) -
LakeVariable Name —$lake
Hex Value —#2767ff
RGB Value —rgb(39, 103, 255) -
NightVariable Name —$night
Hex Value —#003459
RGB Value —rgb(0, 52, 89) -
SkyVariable Name —$sky
Hex Value —#73cbf2
RGB Value —rgb(115, 203, 242) -
SteamVariable Name —$steam
Hex Value —#dde5ed
RGB Value —rgb(221, 229, 237) -
BrickVariable Name —$brick
Hex Value —#971b2f
RGB Value —rgb(151, 27, 47) -
FireVariable Name —$fire
Hex Value —#ff3042
RGB Value —rgb(255, 48, 66) -
LimestoneVariable Name —$limestone
Hex Value —#d7d2cb
RGB Value —rgb(215, 210, 203) -
Terra CottaVariable Name —$terra-cotta
Hex Value —#c66e4e
RGB Value —rgb(198, 99, 78) -
WheatVariable Name —$wheat
Hex Value —#f2a900
RGB Value —rgb(242, 169, 0)
-
KU BlueVariable Name —$ku-blue
Hex Value —#0051ba
RGB Value —rgb(0, 81, 186) -
KU Blue -- 1Variable Name —$ku-blue--darker
Hex Value —#004091
RGB Value —rgb(0, 64, 145) -
KU Blue -- 2Variable Name —$ku-blue--darkest
Hex Value —#003171
RGB Value —rgb(0, 49, 113) -
KU Blue -- 3Variable Name —$ku-blue--lighter
Hex Value —#0170ff
RGB Value —rgb(1, 112, 255) -
KU Blue -- 4Variable Name —$ku-blue--lightest
Hex Value —#1479fb
RGB Value —rgb(20, 121, 251) -
CrimsonVariable Name —$crimson
Hex Value —#e8000d
RGB Value —rgb(232, 0, 13) -
Crimson -- 1Variable Name —$crimson--darker
Hex Value —#b90009
RGB Value —rgb(185, 0, 9) -
Crimson -- 2Variable Name —$crimson--darkest
Hex Value —#900007
RGB Value —rgb(144, 0, 7) -
Crimson -- 3Variable Name —$crimson--lighter
Hex Value —#fb2f39
RGB Value —rgb(251, 47, 57) -
Crimson -- 4Variable Name —$crimson--lightest
Hex Value —#fb5a62
RGB Value —rgb(251, 90, 98)
-
FogVariable Name —$fog
Hex Value —#8e9fbc
RGB Value —rgb(142, 159, 188) -
Fog -- 1Variable Name —$fog--lighter
Hex Value —#a5b2c9
RGB Value —rgb(165, 178, 201) -
Fog -- 2Variable Name —$fog--lightest
Hex Value —#a5b2c9
RGB Value —rgb(227, 231, 238) -
LimestoneVariable Name —$limestone
Hex Value —#d7d2cb
RGB Value —rgb(215, 210, 203) -
Limestone -- 1Variable Name —$limestone--lighter
Hex Value —#dfdbd5
RGB Value —rgb(223, 219, 213) -
Limestone -- 2Variable Name —$limestone--lightest
Hex Value —#f5f4f2
RGB Value —rgb(245, 244, 242) -
SkyVariable Name —$sky
Hex Value —#73cbf2
RGB Value —rgb(115, 203, 242) -
Sky -- 1Variable Name —$sky--lighter
Hex Value —#b6e2f5
RGB Value —rgb(182, 226, 245) -
Sky -- 2Variable Name —$sky--lightest
Hex Value —#dcf2fc
RGB Value —rgb(220, 242, 252) -
SteamVariable Name —$steam
Hex Value —#dde5ed
RGB Value —rgb(221, 229, 237) -
Steam -- 1Variable Name —$steam--lighter
Hex Value —#e7ecf2
RGB Value —rgb(231, 236, 242) -
Steam -- 2Variable Name —$steam--lightest
Hex Value —#eff3f7
RGB Value —rgb(246, 248, 250)
-
CautionVariable Name —$caution
Hex Value —#ecbd3a
RGB Value —rgb(236, 189, 58) -
Confirm ActionVariable Name —$confirm
Hex Value —#208374
RGB Value —rgb(32, 131, 116) -
Dangerous ActionVariable Name —$danger
Hex Value —#C50A37
RGB Value —rgb(197, 10, 55)
-
WhiteVariable Name —$white
Hex Value —#ffffff
RGB Value —rgb(255, 255, 255) -
Gray -- 1Variable Name —$gray--lighter
Hex Value —#f1f1f1
RGB Value —rgb(241, 241, 241) -
Gray -- 2Variable Name —$gray--light
Hex Value —#d9d9d9
RGB Value —R226 G227 B228 -
GrayVariable Name —$gray
Hex Value —#aaaaaa
RGB Value —R216 G216 B216 -
Gray -- 3Variable Name —$gray--dark
Hex Value —#7e7e7e
RGB Value —rgb(126, 126, 126) -
Text GrayVariable Name —$text-gray
Hex Value —#333333
RGB Value —rgb(51, 51, 51) -
BlackVariable Name —$black
Hex Value —#000000
RGB Value —rgb(0, 0, 0)
labore ut aut —
labore ut aut —
This is the default link style generated by the WYSIWYG editor.
List styles
- Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo
- Danish danish candy canes bonbon cheesecake danish marzipan
- Thunder, thunder, thundercats, Ho!
-
- Cottage cheese brie lancashire. Boursin when the cheese comes out.
- Veggies sunt bona vobis, proinde vos postulo
- Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo
- Danish danish candy canes bonbon cheesecake danish marzipan
- Thunder, thunder, thundercats, Ho!
-
- Cottage cheese brie lancashire. Boursin when the cheese comes out.
- Veggies sunt bona vobis, proinde vos postulo
possimus aut nesciunt nemo voluptatum officiis
Impedit voluptates in doloribus iusto. Reprehenderit aut vel sit quos dicta a. A autem corporis sunt ut deleniti neque quo. Id alias eos sunt exercitationem consectetur minima. officiis iste saepe dolores Omnis voluptatem unde quo et sunt sint odio.
Alternative header link style. Let's add some extra text to wrap.
Impedit voluptates in doloribus iusto. Reprehenderit aut vel sit quos dicta a. A autem corporis sunt ut deleniti neque quo. Id alias eos sunt exercitationem consectetur minima.
Halyard Display Bold
Halyard Display Book
Halyard Display Medium
Halyard Display Regular
Halyard Display SemiBold
Halyard Micro Medium
Halyard Micro SemiBold
Halyard Text Book
Halyard Text Book Italic
Halyard Text Light
Halyard Text Medium
Halyard Text Regular
Halyard Text SemiBold
Freight Display Pro Black Italic
Freight Display Pro Book
Freight Display Pro Semibold
Freight Display Pro Light
Freight Text Pro Black
Freight Text Pro Black Italic
Display h1 — Freight Display Pro Medium — font size: 47.78px = 2.98625rem / line height: 57px = 3.5625rem / letter spacing: 0
Rock Chalk, Jayhawk
Display h2 — Freight Display Pro Medium — font size: 39.81px = 2.488125rem / line height: 50px = 3.125rem / letter spacing: 0
One of a Kind
Display h3 — Freight Display Pro Light — font size: 33.18px = 2.07375rem / line height: 48px = 2.75rem / letter spacing: 0
KU institute designated lead agency
Display h4 — Freight Text Pro Black — font size: 27.65px = 1.728125rem / line height: 33px = 2.0625rem / letter spacing: 0
Far above the golden valley
Display h5 — Freight Text Pro Black Italic — font size: 23.04px = 1.728125rem / line height: 35px = 2.1875rem / letter spacing: 0
Our Chant Rises
Display h6 — Freight Text Pro Black — font size: 19.02px = 1.2rem / line height: 29px = 1.6875rem / letter spacing: 0
Degree Programs
Special h1 — Halyard Display SemiBold — font size: 47.78px = 2.98625rem / line height: 65px = 4.0625rem / letter spacing: 0
News at KU
Special h2 — Halyard Display Medium — font size: 39.81px = 2.488125rem / line height: 54px = 3.375rem / letter spacing: 0
Boots Maloy Limestone
Special h3 — Halyard Display SemiBold — font size: 33.18px = 2.07375rem / line height: 48px = 3rem / letter spacing: 0
Super duper headline
Special h4 — Halyard Text Medium — font size: 27.65px = 1.728125rem / line height: 35px = 2.1875rem / letter spacing: 0
A New Topic
Special h5 — Halyard Text Medium — font size: 23.04px = 1.44rem / line height: 31px = 1.9375rem / letter spacing: 0
Degree Requirements
Special h6 — Halyard Text Medium — font size: 19.2px = 1.44rem / line height: 29px = 1.8125rem / letter spacing: 0
KU Marketing Communications
Super Big — Frieght Display Pro Book — font size: 68.8px = 4.3rem / line height: 82px = 5.125rem / letter spacing: 0.8px = 0.5rem
Jayhawk spirit
Fancy — Freight Display Pro Black Italic — font size: 57.33px = 3.583125rem / line height: 68px = 4.25rem / letter spacing: 0
Super duper
Box Type — Halyard Text Medium — font size: 19.2px = 1.2rem / line height: 34px = 2.125rem / letter spacing: 3.43px = 0.214375rem
KU Marketing Communications
Header Light — Halyard Text Light — font size: 9.26px = 1.2rem / line height: 14px = 1.8125rem / letter spacing: .46px = 0.02875rem
KU Marketing Communications
Large Quote — Freight Display Pro Book — font size: 33.18px = 2.07375rem / line height: 46px = 2.875rem / letter spacing: -.2px = -0.0125rem
“A whole is greater than the sum of its parts.”
Small Quote — Freight Text Pro Black Italic — font size: 19.2px = 1.2rem / line height: 25px = 1.5625rem / letter spacing: 0
“A whole is greater than the sum of its parts.”
Overline — Halyard Display Bold — font size: 13.33px = 0.833125rem / line height: 18px = 1.5rem / letter spacing: 2.5 = 0.15625rem
Some sort of category
Caption — Halyard Text Book Italic — font size: 11.11px = 0.694375rem / line height: 17px = 0.875rem / letter spacing: 0
LAWRENCE — The University of Kansas Institute for Policy & Social Research (IPSR)
Micro — Halyard Micro — font size: 11.11px = 0.694375rem / line height: 17px = 0.875rem / letter spacing: 0
Home/ Folder/ A-Z
Button Text 1 — Halyard Text Regular — font size: 23.04px = 1.44rem / line height: 27px = 1.6875rem / letter spacing: 0
Button Text 2 — Halyard Text Regular — font size: 16px = 1rem / line height: 22px = 1.375rem / letter spacing: 0
Button Text 3 — Halyard Text Regular — font size: 19.02px = 1.18875rem / line height: 22px = 1.375rem / letter spacing: 0
Button Text Large Fill — Halyard Text Medium — font size: 19.02px = 1.18875rem / line height: 22px = 1.375rem / letter spacing: 0
UI Help Text — Halyard Text Book — font size: 10px = 0.625rem / line height: 17px = 1.0625rem / letter spacing: 0
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
UI Disable Text — Halyard Text Book — font size: 16px = 1rem / line height: 24px = 1.5rem / letter spacing: 0
Option three is disabled
h1 — Halyard Display Medium — font size: 47.78px = 2.98625rem / line height: 52px = 3.25rem / letter spacing: 0
News at KU
h2 — Halyard Display Medium — font size: 39.81px = 2.488125rem / line height: 47px = 2.9375rem / letter spacing: 0
Boots Maloy Limestone
h3 — Halyard Display Medium — font size: 33.18px = 2.07375rem / line height: 48px = 3rem / letter spacing: 0
Super duper headline
h4 — Halyard Text Medium — font size: 27.65px = 1.728125rem / line height: 35px = 2.1875rem / letter spacing: 0
A New Topic
h5 — Halyard Text Medium — font size: 23.04px = 1.44rem / line height: 31px = 1.9375rem / letter spacing: 0
Degree Requirements
h6 — Halyard Text Medium — font size: 23.04px = 1.44rem / line height: 29px = 1.8125rem / letter spacing: 0
KU Marketing Communications
p — Halyard Text Book — font size: 16px = 1rem / line height: 24px = 1.5rem / letter spacing: 0
This is an stellar example of body copy.
Ima Jayhawk
Aut dolorem modi sit possimus et. Dignissimos consequatur temporibus assumenda ea ut. Et dolore reprehenderit quod voluptatem eaque iure eos facilis. Similique magni aut inventore natus ex ut. Aliquid voluptas consequuntur accusantium ratione et rerum voluptates. Animi dolor a minima hic qui qui. Qui nemo aut maxime expedita. Quisquam sint soluta non id reiciendis modi iste. Aliquam distinctio voluptatibus rerum voluptatem assumenda omnis rerum. Assumenda eos magnam provident sequi accusantium. Ut id et illo labore aut et. Cum consectetur doloribus cumque consequatur. Neque voluptatem voluptatem nesciunt qui laudantium veniam. Quae earum exercitationem provident.
magnam sunt labore
Inventore quibusdam voluptatem autem qui illum. Occaecati repellendus quo architecto cupiditate. Sint rerum sunt sapiente odit id. Perspiciatis qui provident labore corrupti. Sint adipisci qui nihil dolor nihil.
Ima Jayhawk
In aperiam laudantium tempore aliquid. Delectus iste iste quasi eveniet praesentium aut totam. Consequatur hic consequatur nemo beatae commodi quidem quis. Quis rem explicabo est qui et eveniet laborum. In dolore pariatur non sunt impedit architecto. Dolore laudantium quia libero et nobis modi. Fuga a eius nulla tenetur et. Illo qui enim culpa iste deleniti debitis deleniti. Quas voluptas ut ea odio rem vitae et. Ducimus ducimus eos eum est iusto sed ipsam. Et aut quas voluptas unde possimus voluptatum ut. Ad qui quo qui vel minima nam nulla.
quae unde voluptates
Sequi repellat incidunt qui. Voluptas iure adipisci reprehenderit repellat numquam sit. Facilis nihil unde dolores totam incidunt. Et laborum non quae.
Ima Jayhawk
Accusantium suscipit sit quod asperiores. Quia illo similique et quam animi nisi molestiae. Vel error esse voluptas sit rerum et. Reprehenderit est consequatur rerum voluptatem perferendis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis enim redargueret? Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Duo Reges: constructio interrete.
Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Quamquam tu hanc copiosiorem etiam soles dicere. Eadem fortitudinis ratio reperietur. An est aliquid, quod te sua sponte delectet? Consequens enim est et post oritur, ut dixi. Quod non faceret, si in voluptate summum bonum poneret. Aliter enim explicari, quod quaeritur, non potest. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat.
Si enim non fuit eorum iudicii, nihilo magis hoc non addito illud est iudicatum-. Sed videbimus. Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Qua tu etiam inprudens utebare non numquam. Tuo vero id quidem, inquam, arbitratu. Uterque enim summo bono fruitur, id est voluptate. Quam si explicavisset, non tam haesitaret. Non semper, inquam;
Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. At iste non dolendi status non vocatur voluptas. At enim, qua in vita est aliquid mali, ea beata esse non potest. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. Quid loquor de nobis, qui ad laudem et ad decus nati, suscepti, instituti sumus? Primum quid tu dicis breve? Et quidem saepe quaerimus verbum Latinum par Graeco et quod idem valeat;
Sed in rebus apertissimis nimium longi sumus. Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore. Quae si potest singula consolando levare, universa quo modo sustinebit? Tu enim ista lenius, hic Stoicorum more nos vexat. Non est igitur summum malum dolor. At multis malis affectus. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec.
bg-blue
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-crimson
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-yellow
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-gray
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-fog
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-lake
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-night
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-sky
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-steam
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-steam-lightest
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-steam-lighter
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-brick
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-fire
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-limestone
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-terra-cotta
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
bg-wheat
Omnis voluptatem unde quo et sunt sint odio. dignissimos id voluptatem
Z-index
Limestone uses a standard z-index to coordinate our layering. Content defaults to 0, and elements should be placed according to this scale.
$z-index: (
contentTop: 40,
content: 30,
contentBottom: 20,
backgroundTop: -10,
background: -20,
backgroundBottom: -30,
backgroundVeryBottom: -40
);
Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.
We don’t encourage customization of these individual values; should you change one, you likely need to change them all.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
Container
The standard container is a fixed-width container (meaning its max-width changes at each breakpoint)
Limestone has customized the bootstrap container to add an additional xxl breakpoint of 1440px at 1600px and above.
Fluid Container
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... } // Small devices (landscape phones, 576px and up)
@include media-breakpoint-up(md) { ... } // Medium devices (tablets, 768px and up)
@include media-breakpoint-up(lg) { ... } // Large devices (desktops, 992px and up)
@include media-breakpoint-up(xl) { ... } // Extra large devices (large desktops, 1200px and up)
@include media-breakpoint-up(xxl) { ... } // Extra large devices (large desktops, 1600px and up)
We occasionally use media queries that go in the other direction (the given screen size or smaller):
@include media-breakpoint-down(xs) { ... } // Extra small devices (portrait phones, less than 576px)
@include media-breakpoint-down(sm) { ... } // Small devices (landscape phones, less than 768px)
@include media-breakpoint-down(md) { ... } // Medium devices (tablets, less than 992px)
@include media-breakpoint-down(lg) { ... } // Large devices (desktops, less than 1200px)
@include media-breakpoint-down(xl) { ... } // Large devices (desktops, less than 1600px)
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
@include media-breakpoint-only(xs) { ... } // Extra small devices (portrait phones, less than 576px)
@include media-breakpoint-only(sm) { ... } // Small devices (landscape phones, 576px and up)
@include media-breakpoint-only(md) { ... } // Medium devices (tablets, 768px and up)
@include media-breakpoint-only(lg) { ... } // Large devices (desktops, 992px and up)
@include media-breakpoint-only(xl) { ... } // Extra large devices (large desktops, 1200px and up)
@include media-breakpoint-only(xxl) { ... } // Extra large devices (large desktops, 1200px and up)
Similarly, media queries may span multiple breakpoint widths:
@include media-breakpoint-between(md, xl) { ... }
University of Kansas
1001 Sunnyside Avenue
Lawrence
KS
66045
Summa Cum Laude
harum qui
- facere mollitia voluptates eaque facere in perferendis iusto
- aliquam libero omnis nulla ab quia voluptates similique amet debitis
aspernatur error
- iusto vero sint quis dignissimos nostrum quaerat aut
- saepe iure consectetur fuga et consectetur porro sed exercitationem dicta