Support Advocata

Advocata Design System for Web

Design Systems

Component catalogue groups

Colour Palette

Cerise Pink

Brand 1 / 50 #FFF0F4
Brand 1 / 100 #FFD6E2
Brand 1 / 200 #FFADCA
Brand 1 / 300 #FF75A8
Brand 1 / 400 #F03C7C
Brand 1 / 500 #E31B57
Brand 1 / 600 #C00D46
Brand 1 / 700 #9A0938
Brand 1 / 800 #74062A
Brand 1 / 900 #4E031C
Brand 1 / 950 #2E010E

Brand Grey

Brand 2 / 50 #F9FBFB
Brand 2 / 100 #F4F5F5
Brand 2 / 200 #E6EAEA
Brand 2 / 300 #D3D9D9
Brand 2 / 400 #A1A9AA
Brand 2 / 500 #808A8B
Brand 2 / 600 #515D5D
Brand 2 / 700 #3D4A4B
Brand 2 / 900 #162122
Brand 2 / 950 #070D0E

Supporting Colours

Accent #E31B57
Purple Grey Wash #EFDBE4
Yellow Wash #F6EFE4
Blue Wash #D6E0EA
Sage Wash #DEE6E1

Spacing, Layout, and Radius

Spacing

Token Desktop (>768px) Mobile (<767px) Utility Class
# 200 200 128 gap-spacing-200
# 160 160 104 gap-spacing-160
# 120 120 80 gap-spacing-120
# 80 80 48 gap-spacing-80
# 64 64 40 gap-spacing-64
# 48 48 32 gap-spacing-48
# 32 32 24 gap-spacing-32
# 24 24 20 gap-spacing-24
# 20 20 16 gap-spacing-20
# 16 16 12 gap-spacing-16
# 12 12 12 gap-spacing-12
# 8 8 8 gap-spacing-8
# 4 4 4 gap-spacing-4
# 0 0 0 gap-0

Section Padding

Token Desktop (>768px) Mobile (<767px) Utility Class
Extra Large 200 160 section-padding-extra-large
Large 160 96 section-padding-large
Medium 120 80 section-padding-medium
Small 80 48 section-padding-small
Extra Small 32 24 section-padding-extra-small

Layout Grid

Token Desktop (>768px) Mobile (<767px) Utility Class
Margin 32 16 layout-grid-padding
Gutter 16 12 layout-grid-gap
1 Column Gap 132 40 layout-grid-column-gap-1
2 Column Gap 248 40 layout-grid-column-gap-2

Border Radius / General

Token Desktop (>768px) Mobile (<767px) Utility Class
Small 8 4 radius-general-small
Medium 12 12 radius-general-medium
Large 20 16 radius-general-large

Border Radius / UI

Token Desktop (>768px) Mobile (<767px) Utility Class
Button Base 32 32 radius-ui-button-base
Button Circle 32 32 radius-ui-button-circle
Input 8 8 radius-ui-input
Tag 8 16 radius-ui-tag

Typography

Headings

Responsive heading utilities for page and section hierarchy.

Display

@apply heading-display;

DISPLAY

Heading H1

@apply heading-h1;

HEADING H1

Heading H2

@apply heading-h2;

HEADING H2

Heading H3

@apply heading-h3;

Heading H3

Heading H4

@apply heading-h4;

Heading H4

Heading H5

@apply heading-h5;

Heading H5

Heading H6

@apply heading-h6;

Heading H6

Body

Body styles use explicit size and weight names.

Body Large

@apply body-lg;

Body large regular

Body Large Medium

@apply body-lg-medium;

Body large medium

Body Medium

@apply body-md;

Body medium regular

Body Medium Medium

@apply body-md-medium;

Body medium medium

Body Small

@apply body-sm;

Body small regular

Body Small Medium

@apply body-sm-medium;

Body small medium

Interface

Typography for buttons, labels, and compact controls.

Button Large

@apply ui-button-lg;

BUTTON LARGE

Button Small

@apply ui-button-sm;

BUTTON SMALL

Label Large

@apply ui-label-lg;

LABEL LARGE

Label Small

@apply ui-label-sm;

LABEL SMALL

Elevation & Depth

Token Samples
Background Blur
Layer Blur
Drop Shadow
Glass
Progressive Blur
Book
Drop Shadow Big

Iconography

Buttons

Primary Large / No Icon

Primary

Primary Large / Icon Right

Primary

Primary Large / Icon Left

Primary

Secondary Large / No Icon

Secondary

Secondary Large / Icon Right

Secondary

Tertiary Large / No Icon

Tertiary

Tertiary Large / Icon Right

Tertiary

Checkbox

Radio Button

Tags

Tag Title
Tag Pill

Category Tag

Podcast Podcast

Dropdown

Dropdown

Text Field

Enter a valid email address.

Breadcrumb

Intro Image Card

Image-led content card with a compact default state and expanded content on hover or keyboard focus.

Woman spending time with a dog in a forest
Category

Proof & Results

Clear signals that the business delivers real outcomes. Metrics, experience, and concrete examples presented without exaggeration, so credibility builds naturally instead of being forced through marketing language.

Learn more

Case Study Card

Reforma-style image case cards with a bottom gradient, arrow control, and hover/focus image motion.

Two women reviewing colorful fabric in a shop Revamped Evermind’s structure Clear page hierarchy and content roles removed internal confusion. People working in a green hillside landscape We streamlined Nerdstack publishing Clear page hierarchy and content roles removed internal confusion.

Pagination

Interactive Search

Focus State (Input)

Tabs

Tab 1 content

Logo Carousel

Advocata Advocata Tamil Advocata Plus Miller Nothing Hollow Fold

Intro Blocks

Intro Block 1

Tag Title

Clear H1 Headline Goes Here

Use this text to expand on your headline. Keep it short and clear.

Intro Block 2

Tag Title

Clear H1 Headline Goes Here

Use this text to expand on your headline. Keep it short and clear.

Intro Block 3

Tag Title

Clear H2 Headline Goes Here

Use this text to expand on your headline. Keep it short and clear.

Intro Block 4

Tag Title

Clear H2 Headline Goes Here

Use this text to expand on your headline. Keep it short and clear.

Filter (Functional Block)

Default state (No search term and no filters applied.)

Our Thinking Archive

Explore All Content

Showing 1–8 of 246

Policy Brief 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Event 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Report 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Presentation 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Video 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more

Filters only (Filters applied, but the search field is empty.)

Our Thinking Archive

Explore All Content

Showing 1–8 of 18

Policy Brief 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Event 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Report 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Presentation 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more
Video 23, January 2025
Duis efficitur magna vitae phasellus molestie ipsum dolor sit amet magna vitae phasellus molestie ipsum dolor sit amet
Learn more

No results state

Our Thinking Archive

Explore All Content

No results found for “Economic Reform”

Try changing your search term or clearing some filters.

Featured Block Option 1 / Base Mode

Featured Block Option 2 / Base Mode

Featured Block Option 3 / Base Mode

Featured Block Option 1 / Invert Mode

Featured Block Option 2 / Invert Mode

Stay ahead of Sri Lanka's reform agenda

Support Advocata
Contact Us