Booking

Style Guide

SIRI ISRA

Style Guide

This page outlines the current styles and standards for the SIRI ISRA website.

Colors

An overview of this site's brand colors.

Action

Action

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Primary

Primary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Secondary

Secondary

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Accent

Accent

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Base

Base

Ultra Light

Light

Medium

Dark

Ultra Dark

Comp

Shade

Shade

Ultra Light

Light

Medium

Dark

Ultra Dark

Action

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Primary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Secondary

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Accent

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Base

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Shade

Trans 10

Trans 20

Trans 40

Trans 60

Trans 80

Trans 90

Buttons

Solid and outline buttons are available across all color sets including black and white.

BUTTONS ON LIGHT BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

BUTTONS ON DARK BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button scale
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Widths

There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card

This is a card with XS padding. Its content is pretty close to the edges.

Card

This is a card with S padding. It has a little bit tighter padding.

Card

This is a card with M padding. It has standard breathing room.

Card

This is a card with L padding. It has extra breathing room.

Card

This is a card with XL padding. It has significant breathing room.

Card

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL

Health

Our body, just like nature, is an ecosystem. To cultivate and nurture a healthy body, we cannot isolate and focus on any single parts, but we have to care for the body as a whole.

Through the practice of yoga, we work for the wellbeing of the mind and body. With physical, mental (mindfulness), philosophical study, and a firm commitment to the practice, we believe that the practice would support us to discover the wisdom of the body and mind. 

Our intention is to offer a space for the study and practice of yoga as a medicine for the mind and the body. We trust that the practice and its wisdom will stay with us beyond the mats, support us to care for our wellbeing, and allow us to live life on the path towards splendid freedom.

Clothing

What if the clothes we are wearing everyday could be as alive as we are now?

What if this shirt, or this dress, is more than just a piece of cloth, but a story that reflects traditional wisdom and the biodiversity of the place?

It might be hard to imagine, especially in the time of fast fashion and mass-produced goods. Yet there is so much we could learn from the traditional way of making clothes, the process which carries many ancient and natural wisdoms passed on from generations to generations. 

From cotton flowers to yarn, natural dyes from plants, hand woven thread by thread into a piece of fabric that is turned into a wearable apparel. By experiencing first-hand with mamas of the village how clothes are made in traditional ways, we are invited to observe and reflect on the value of time and the care put into the process, and how much we could gain from living in alignment with the cycle of nature.

Shelter

How does the space around us influence how we live our lives?
Can we reclaim our knowledge to make informed decisions of how to create the space we want to live in?

From the material used, the consideration of the natural environment and local climate, to the function of the space, a simple but well thought-through architectural design can inform how we live and interact with others and the natural world. We believe that a great design of the space can support both the inhabitants and the ecosystem of the place to thrive in harmony.

By visiting and learning about well-designed spaces that care for the community and the environment, we can have the direct experience of the significance it has on how we live, how the level of energy and natural resources we consume change, and how it also affects us energetically. Through this, we can be inspired and reflect upon what changes we can make in our own spaces and our own lives.

Food

Food is a big thing.

Have we given it the attention it deserves?

It’s not only about the taste, because everything we choose to eat has an effect both on ourselves and the environment. The environmental issues we are facing these days, be it about the soil, the water, or the changing weather, can be linked to inefficiency of the food system.

For us, good food has to be good in 3 different areas — good for the consumers, good for the producers and good for the environment. 

The understanding of where our food comes from plays a big role in the choices we make. Through field visits, tasting and direct experiences, we wish to bring together the food producers and consumers, to share and exchange questions and experiences, and ultimately bring us to have a better understanding of what is really on our plates. Through that, we can then make informed decisions to have a more positive impact from our consumptions.