Style Guide

A complete guide to all Ollie's modular interface elements.
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#068466
Primary 2
#FC9F5B
Primary 3
#001E42
Grays
Gray 1
#272929
Gray 2
#62636B
Gray 3
#ECEBEA
Gray 4
#F8F6F4
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Button Sizes
Small
Standard
Large
Theme Colors
Primary 1
Primary 2
Primary 3
Outline
Feedback Colors
Success
Warning
Error
Grays & White
Gray 1
Gray 2
Gray 3
Gray 4
White
Circle Buttons
Icons
Search
Finish
Sign up with Google
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Icons - Interface
Headings, body and other common text elements.
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Link
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image
Smiling man sitting on carpeted floor with person behind wearing white sweater.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Dropdowns
Preset styles to imply depth on interface components
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Smiling young man with short dark hair wearing a checkered shirt against a plain background.Smiling young man with short dark hair wearing a checkered shirt against a plain background.Smiling young man with short dark hair wearing a checkered shirt against a plain background.
Avatar Group
Smiling young man with short dark hair wearing a checkered shirt against a plain background.Thoughtful young woman with brown hair, resting her chin on her hand, looking to the side.Profile of a woman with long black hair wearing a blue blouse against a dark blue background.Black and white close-up of a serious man with short hair and beard wearing a dark shirt.
Avatar Indicators
Smiling young man with short dark hair wearing a checkered shirt against a plain background.
Portrait of a woman with braided hair wearing a yellow spaghetti strap top against a blue background.
Thoughtful young woman with brown hair, resting her chin on her hand, looking to the side.
Avatar with name
Profile of a woman with long black hair wearing a blue blouse against a dark blue background.
Katherine Cho

We solve your property problems, so you don't have to.

Contact Us
Leaseholder Portal
Urang Property Management Limited is authorised and regulated by the Financial Conduct Authority, Firm Reference Number 495824. Urang Property Management Limited is registered in England and Wales. Company Registration Number 06541973. Registered Office: 196 New Kings Road, London, SW6 4NF

London property management company specialising in Block Management and other property services for leaseholders, freeholders, developers and local businesses across London.

Services
About
Quick Links
Contact
Complaints
© The Urang Group • Powered by GoElevate