Style Guide

Colors

Neutral

Neutral

Primary

Primary
Primary Light
Primary Lighter
Primary Lightest

Secondary

Secondary
Secondary Light

Font Families

IBM Plex Sans

This is Lucida Template
400 Regular
This is Lucida Template
700 Bold

Poppins

This is Lucida Template
400 Regular
This is Lucida Template
700 Bold

Buttons

Button Text
Primary Button
Button Text
Dark Button

Links

This is Lucida Template
Block Link

Forms

Field Label
Input Text
Textarea
Select
Radio
Checkbox
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Typographic Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Big Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small Text

Heading H1

H1

Heading H2

H2

Heading H3

H3

Heading H4

H4
Heading H5
H5
Heading H6
H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Blockquote
  • Item 01
  • Item 02
  • Item 03
Unordered List
  1. Item 01
  2. Item 02
  3. Item 03
Ordered List

Rich Text

This is an H2

El primer heading de un rich text debe ser siempre en un H2 para que no entre en conflicto con el heading principal de la página, que siempre es un H1. El único caso en el que se puede usar H1 dentro de un texto enriquecido se produce cuando no existe H1 fuera del texto enriquecido. Y sólo se puede usar un H1.

Well, Marty, I'm almost eighteen-years-old, it's not like I've never parked before.

  • Now stop the microphone. I'm sorry fellas. I'm afraid you're just too darn loud. Next, please. Where's the next group, please. Whoa, wait, Doc. It's already mutated into human form, shoot it.
  • Breakfast. Well, she's not doing a very good job. Okay, that's enough.
  • Good, there's somebody I'd like you to meet. Lorraine. Re-elect Mayor Goldie Wilson. Progress is his middle name. Excuse me. whoa, whoa Doc, stuck here, I can't be stuck here, I got a life in 1985. I got a girl. What did I just say?
  • Doc, Doc, it's me, Marty. Okay, real mature guys. Okay, Biff, will you pick up my books? Look me up when you get there, guess I'll be about 47. Can I go now, Mr. Strickland? Um, well it's a Delorean, right

This is an H3

She's crazy about me. Look at this, look what she wrote me, Doc. That says it all. Doc, you're my only hope. My name's Lorraine, Lorraine Baines. Look, you gotta listen to me. Where's Einstein, is he with you? No, Biff, you leave her alone. You wait and see, Mr. Caruthers, I will be mayor and I'll be the most powerful mayor in the history of Hill Valley, and I'm gonna clean up this town. Yeah, I think maybe you do. Oh honey, he's teasing you, nobody has two television sets. Alright kid, you stick to your father like glue and make sure that he takes her to the dance.

No no no this sucker's electrical, but I need a nuclear reaction to generate the one point twenty-one gigawatts of electricity- George, aren't you gonna kiss me? Uh, I think so. I gotta go, uh, I gotta go. Thanks very much, it was wonderful, you were all great. See you all later, much later. Can I go now, Mr. Strickland?

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four

This is an H4

Second of all, somebody named Greg or Craig called you just a little while ago. Well that's your name, isn't it? Calvin Klein. it's written all over your underwear. Oh, I guess they call you Cal, huh? Thank god I still got my hair. What on Earth is that thing I'm wearing? Looks like a airplane, without wings. What?

Wrecked? When did this happen and- I think you got the wrong car, McFly. What, what is it hot? Just say anything, George, say what ever's natural, the first thing that comes to your mind. You bet.

Next, please. Lorraine, have you ever, uh, been in a situation where you know you had to act a certain way but when you got there, you didn't know if you could go through with it? What? I'd like you to meet my good friend George McFly. Okay, but I don't know what to say.

This is an H5

You alright? You're gonna be in the car with her. The future, it's where you're going? Oh no, don't touch that. That's some new specialized weather sensing equipment. Uh, look me up when you get there.

“Whoa, wait, Doc. Hey, hey listen guys. Look, I don't wanna mess with no reefer addicts, okay? I had a horrible nightmare, dreamed I went back in time, it was terrible. No, fine, no , good, fine, good. I over slept, look I need your help. I have to ask Lorraine out but I don't know how to do it. I have to ask Lorraine out but I don't know how to do it.”
This is an H6

Hey, George, buddy, you weren't at school, what have you been doing all day? Look at the time, you've got less than 4 minutes, please hurry. Evening, Doctor Brown, what's with the wire? You cost three-hundred buck damage to my car, you son-of-a-bitch. And I'm gonna take it out of your ass. Hold him. Alright, McFly, you're asking for it, and now you're gonna get it.

Lucida template main image
This is a caption image inside a Rich Text.

I noticed you band is on the roster for dance auditions after school today. Why even bother Mcfly, you haven't got a chance, you're too much like your own man. No McFly ever amounted to anything in the history of Hill Valley. Yet. I have a feeling too. Hey, hey, I've seen this one, I've seen this one. This is a classic, this is where Ralph dresses up as the man from space. Hey McFly, what do you think you're doing.