UI kit

Phase 1 verbatim reference β€” reproduced from Figma "Calico UI Design Working File" (UI kit 5181:13924 + Components 2001:2788). Each specimen shows the component's Figma-actual name and every state. Failing contrast, missing focus states and name typos are reproduced as-is (corrected in Phase 2).

Buttons

States shown left→right: Default · Hover · Pressed · Disabled (+ extra states where Figma defines them).

Bn / 44 / Primary

Bn / 44 / Secondary

Bn / 44 / Primary accent

Bn / 40 / Primary

Bn / 40 / Primary destructive

Bn / 36 / Primary

Bn / 36 / Secondary

Bn / 44 / Primary left icon

Bn / 36 / Primary left icon

Bn / 36 / Primary accent

Bn / 36 / Primary accent left icon

Bn / 36 / Secondary left icon

Bn / 40 / Secondary left icon

Bn / 40 / Secondary left icon

Bn / 40 / Secondary Lessons tabs

Bn / 44 / Secondary 2 type right icon

left icon

no icon

Bn / 36 / Secondary left icon 2 type

right icon 2 type

Bn / 36 / Arrow right

Arrow left

Bn / 36 / Back dark bg

Bn / 24 / Tertiary H6 right [icon 24]

right [icon 16]

left [icon 24]

left [icon 16]

Bn / 24 / Close

Bn / 24 / Maximize

Bn / 24 / Minimize

Bn / 16 / Close

Bn / 44 / Email services Google

Microsoft

Bn / 44 / Res library

Bn / 44 / Get started checklist

Bn / Play white

Bn / Play yellow

Bn / Radio

Bn / Toggle

Bn / Slider dot

Bn / Checkoxes

Bn / Bookmark

Bn / Bookmark w label

bn / 40 / Upgrade

bn / 40 / Upgrade expired

Inputs

States per Figma, top→bottom. Glyphs ic/24/Search (4123:128) + ic/16/Close (4164:1712) exported from Figma.

Input / Search

Search
Search
Search
Text Here
Text Here Text Here Text

Input / No icon

Text here
Text here
Text here
Text here
Text here Text here Text
Text here
Text here

There was an error.

Input / Password

Type password
Type password
Type password
β€’β€’β€’β€’β€’β€’β€’β€’
β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’
9v!B6ZQ%WLS!
β€’β€’β€’β€’β€’β€’β€’β€’
Weak password
β€’β€’β€’β€’β€’β€’β€’β€’
Medium password
β€’β€’β€’β€’β€’β€’β€’β€’
Strong password
Type password

There was an error.

Type password

Input / With label β€” Email

Email*

Type email

Email*

avabrown@yahoo.com

Email*

avabrown

Please enter a valid email address.

Email*

avabrown@yahoo.com

We can't find an account with this email address.

Email*

Type email

Please enter an email address.

Input / With label β€” Password

Password*

Forgot password?

Type password

Password*

Forgot password?

β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’

Password*

Forgot password?

9v!B6ZQ%WLS!

Password*

Forgot password?

Type password

Please enter a password.

Password*

Forgot password?

β€’β€’β€’β€’β€’β€’β€’β€’

Password is incorrect.

Tabs. Dropdowns

Part 1 β€” Linear, Sign-in-method, User type, Levels filter. (Library-icon tabs, Levels-w-radio, Menu items, Dropdowns πŸ“‹ next.) Radio/level glyphs reproduced in CSS (approximate; exact glyph export pending).

Tabs / Linear /40

Tex here
Tex here
Tex here
Tex here

Tabs / Sign in method / Google

Tabs / User type

Text here
Text here
Text here
Text here
Text here
Text here

Tabs / Levels filter

ALevel A
ALevel A
ALevel A
ALevel A
BLevel B
CLevel C
DLevel D

Tabs / Sign in method / Microsoft

Tabs / Linear /32

Tex here
Tex here
Tex here

Tabs / Filter

Text here
Text here
Text here
Text here

Tabs / Levels filter / All levels

All levels
All levels
All levels
All levels

Menu item / Home

Home
Home
Home
Home

Menu item / Level A

ALevel A
ALevel A
ALevel A
ALevel A
ALevel A

Menu item / Level B

BLevel B
BLevel B
BLevel B

Menu item / Level C

CLevel C
CLevel C
CLevel C

Menu item / Level D

DLevel D
DLevel D
DLevel D

Menu item / Settings

Settings
Settings
Settings
Settings

Menu item / Log Out

Log Out
Log Out
Log Out
Log Out

Menu item-subgroup

Unit 1
Unit 1
Unit 1

Dropdown / Cell left icon

Text here
Text here
Text here
Text here

Dropdown / Cell right icon

Text here
Text here
Text here

Dropdown / Cell w title, right icon

Level A, Unit 1In this unit, learners will learn a simple greeting exchange, including telling their names.
Level A, Unit 1In this unit, learners will learn a simple greeting exchange, including telling their names.
Level A, Unit 1In this unit, learners will learn a simple greeting exchange, including telling their names.

Tabs / Levels w radio bn / Horizontal / Level A

Level A AI Am Special
Level A AI Am Special
Level A AI Am Special
Level A AI Am Special
Level A AI Am Special

TTabs / Levels w radio bn / Horizontal / Level B

Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family

Tabs / Levels w radio bn / Horizontal / Level C

Level C CI Live Here
Level C CI Live Here
Level C CI Live Here
Level C CI Live Here
Level C CI Live Here

Tabs / Levels w radio bn / Horizontal / Level D

Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm

Tabs / Levels w radio bn / Vertical / Level A

Level A AI Am Special
Level A AI Am Special
Level A AI Am Special
Level A AI Am Special
Level A AI Am Special

Tabs / Levels w radio bn / Vertical / Level B

Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family
Level B BI Love My Family

Tabs / Levels w radio bn / Vertical / Level C

Level C CI Live Here
Level C CI Live Here
Level C CI Live Here
Level C CI Live Here
Level C CI Live Here

Tabs / Levels w radio bn / Vertical / Level D

Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm
Level D DWelcome to the Farm

Tabs / Library icons (Video stories Β· Music video Β· Dialogue video Β· Songs & Stories Β· Storybook videos Β· Flash cards Β· Activity sheets Β· Games Β· Teacher's materials Β· Posters)

Tabs / Library icons type 2 (Videos Β· Vocabulary Β· Comics Β· Activities Β· Games Β· Teacher resources)

Videos
Videos
Videos
Vocabulary support
Vocabulary support
Vocabulary support
Comics
Comics
Comics
Activities
Activities
Activities
Games
Games
Games
Teacher Resources
Teacher Resources
Teacher Resources

Colors

Every Figma colour variable, verbatim (incl. duplicates & AA-failing values β€” kept). Name = Figma variable; hex = exact value.

Brand

Brand/600

#705AC2

Brand/600 Dark

#9983EC

Brand/800

#482D8C

Brand/900

#312461

Brand/200

#BBB1E2

Brand/100

#DFDAF1

Brand/50

#F3F1FA

Neutrals

Neutrals/50

#F4F5F5

Neutrals/100

#E2E3E5

Neutrals/200

#C5C7CB

Neutrals/300

#A8ABB1

Neutrals/400

#8B8F97

Neutrals/500

#6D737E

Neutrals/600

#575C65

Neutrals/700

#42454B

Neutrals/800

#2C2E32

Neutrals/900

#15171A

Yellow

Yellow/50

#FFF9D6

Yellow/100

#FFF4B8

Yellow/600

#FDE55E

Yellow/700

#FBD358

Yellow/800

#F9BF0D

Yellow/900

#E09B06

Yellow/900 Dark

#684803

Yellow/Normal

#FBD358 (= Yellow/700)

Green Β· Blue Β· Red

Green/50

#F0F7E0

Green/100

#DCECB8

Green/200

#CEE896

Green/400

#BFE176

Green/600

#A0CC3F

Green/900

#648223

Blue/50

#EBF8F8

Blue/100

#C8EFEF

Blue/600

#68C9C9

Blue/900

#138890

Blue 1

#2F80ED

Red/50

#FCF3F2

Red/100

#FBD4D0

Red/200

#FAC8C2

Red/600

#F75855

Red/800

#DF625F

Red/900

#D5322F

Gray/900

#101828

Bg

Bg/Gray light

#FAFAFA

Bg/Yellow light

#FDF285

Bg/Yellow medium

#FDE9AB

Bg/Brand light

#D3C7FF

Bg/Brand medium

#B1A2F5

Bg/Pink

#F4DCFC

White / bg/white / OtherΒ·Clickable

#FFFFFF Γ—3

Bg Resources (resource-card tile fills)

Bg Resources/Orange

#EC9865

Bg Resources/Green

#ADD35A

Bg Resources/Aquamarine

#9BCECF

Bg Resources/Pink

#E0A3AE

Bg Resources/Brown

#CDB384

Bg Resources/Mint

#A4D298

Bg Resources/Blue

#ABBFD9

Bg Resources/Red

#EF9A9A

Bg Resources/Purple

#BDB4D9

Bg Resources/Azure

#97D5E7

Bg Resources/Nude

#E0B6A4

Bg Resources/Lavender

#A8B1EB

Typography

Each Figma text style, applied. Families "Inter" / "Inter Display" per Figma (note H3 uses Inter, not Display). Name typos kept.

Heading H1 β€” semibold

Heading/H1 - semibold Β· 600 28/36 Inter Display

Heading H2 β€” semibold

Heading/H2 - semibold Β· 600 24/32 Inter Display

Heading H3 β€” semibold

Heading/H3 - semibold Β· 600 20/28 Inter (not Display)

Heading H4 β€” Semibold

Heading/H4 - Semibold Β· 600 18/26 Inter Display (capital-S in name)

Heading H4 β€” medium

Heading/H4 - medium Β· 500 18/26 Inter Display

Heading H5 β€” semibold

Heading/H5 - semibold Β· 600 16/24 Inter Display Β· +0.1px

Heading H5 β€” medium

Heading/H5 - medium Β· 500 16/24 Inter Display

Heading H6 β€” semibold

Heading/H6 - semibold Β· 600 14/24 Inter Display Β· +0.1px

Body B16 β€” semibold

Body/B 16 - semibold Β· 600 16/24 Inter

Body B16 β€” regular

Body/B 16 - regular Β· 400 16/24 Inter

Body B14 β€” semibold

Body/B 14 - semibold Β· 600 14/24 Inter

Body B14 β€” medium

Body/B 14 - medium Β· 500 14/24 Inter

Body B14 β€” regular

Body/B 14 - regular Β· 400 14/24 Inter

Body B14 β€” regular srtike through

Body/B 14 - regular srtike through Β· 400 14/24 Inter Β· line-through ("srtike" typo kept)

Body B14 β€” semibold italic

Body/B 14 - semibold italic Β· italic 600 14/24 Inter

Body B12 β€” semibold

Body/B 12 - semibold Β· 600 12/18 Inter (double space in name)

Body B12 β€” medium

Body/B 12 - medium Β· 500 12/18 Inter

Body B12 β€” regular

Body/B 12 - regular Β· 400 12/18 Inter

Body B11 β€” semibold

Body/B 11 - semibold (& dup "B 11 - semibold") Β· 600 11/13 Inter

Caption 14 β€” Regular (tight)

Caption 14/Regular (tight) Β· 400 14/18 Inter

Caption 14 β€” Medium (tight)

Caption 14/Medium (tight) Β· 500 14/18 Inter

Caption 14 β€” Semibold (tight)

Caption 14/Semibold (tight) Β· 600 14/18 Inter

Caption 14 β€” Regular (medium heigh)

Caption 14/Regular (medium heigh) Β· 400 14/20 Inter ("heigh" typo kept)

Caption 14 β€” Semibold (medium heigh)

Caption 14/Semibold (medium heigh) Β· 600 14/20 Inter ("heigh" typo kept)

Link 14 β€” Semibold (default)

Link 14/Semibold (default) Β· 600 14/24 Inter Display Β· +0.1px

Link 14 β€” Semibold (med heigh)

Link 14/Semibold (med heigh) Β· 600 14/20 Inter Display Β· +0.1px

Link 14 β€” Semibold (tight heigh)

Link 14/Semibold (tight heigh) Β· 600 14/18 Inter Display Β· +0.1px

Link 12 β€” Semibold

Link 12/Semibold Β· 600 12/18 Inter

Icons. Logos. Avatars

Every Figma icon, logo and avatar, exported as SVG and shown at native size. Names are Figma-actual (typos/casing kept).

ic / 24

Close
Log out
Lock
Download
Search
zap
Filters
Menu
Placeholder
Home
Settings
Help
Trash
Edit
Bookmark
Maximize
Minimize
Check
Chevron-down
Chevron-left
Chevron-right
Chevron-up
eye
eye-off
Avatar placeholder
Check on circle
Error on circle
Rocket

ic / 16

Arrow left
Close
Arrow left collapse
Chevron-up
Chevron-right
Chevron-left
Chevron-down
Plus
Arrow external link
Arrow right
Lock
Download
Play
Exclamation
Exclamation circle
Loading circle
Check [1]
Paused
Game
Tip
Check [2]
Check [3]
Info

ic / 12 Β· ic / 24 / Level Β· ic / Services

12 Chevron left
12 Chevron right
Level A
Level B
Level C
Level D
Services Google
Services Microsoft

ic / 32 / Resources (mono)

Music
Games
Cards
Video stories
Music video
Dialogue video
Storybook videos
Activity sheets
Teacher’s materials
Posters
Comic
Videos
Daily
Vocabulary

ic / 32 Β· 40 / Resources color

32 Music
32 Video stories
32 Music video
32 Dialogue video
32 Storybook videos
32 Cards
32 Posters
32 Activity sheets
32 Games
32 Teacher’s materials
32 Comic
32 Videos
32 Vocabulary
40 Music
40 Video stories
40 Music video
40 Dialogue video
40 Storybook videos
40 Cards
40 Posters
40 Activity sheets
40 Games
40 Teacher’s materials
40 Comic
40 Videos
40 Vocabulary

ic / 32 (other) Β· ic / 72 Β· Logo Β· Avatars

File add
Empty folder
Empty search results
Diamond
Check email
72 Premium
72 Check
72 Email sent
logo / Calico Nav big
Avatar / 40 / Placeholder
Avatar / 40 / Image β€” sample photo (18 MB export, not committed; πŸ“‹)

Cards. Controls

Part 1 β€” Badge/Level, Links, List item. Inline icons recoloured to text colour via CSS mask.

Badge / Level / flex

Text here Text here Text here Text here

Link / Icon right

Text here Text here Text here

Link / No icon

Unit 1 Unit 1 Unit 1

List item / [2]

2Create first class Try it
2Create first class Completed

Progress line / Tracking / A Β· B

Progress fill approximated as a solid segment (Figma uses a dashed completed-line β€” πŸ“‹).

0/14 1/14 2/14 0/12 1/12 2/12

Lesson block / Closed

Checkbox glyph (Bn / Checkoxes 4205:4167) reproduced with Figma's 24px frame and 20px inset states.

Block 1
Text here
Block 1
Text here

Complete the lesson / states

Checkbox / indeterminate / checked glyphs reproduced in CSS (approximate).

Check all
Collapse all 10 blocks
Check all
Complete the lesson
Collapse all 10 blocks
Check all
Complete the lesson
Collapse all 10 blocks
Check all
Lesson completed
Collapse all 10 blocks
Save lesson
Collapse all 10 blocks
Collapse all 10 blocks

List item / [3]

3Complete your first lesson Try it
3Complete your first lesson Completed

List item / [4]

4Explore Resources library Try it
4Explore Resources library Completed

Progress line / Completing checklist

Figma fill is the rounded completed-line vector inside the track.

Chart progress

Ring track and arc states are rendered from Figma vector assets.

0% 15% 30% 50% 75% 100%

Card / Flash cards mini

72px preview is a bespoke raster fill in Figma (Spanish "Hola." / English "Hello." / Hidden "?"); shown here as a neutral placeholder tile.

Hola. Hola. Hola. Hello. Hello. Hello. ? ? ?

Card/ Animal level small

Animal illustrations (Level A fish / Level B dog) are bespoke raster art in Figma; shown here as the tinted card only.

Badge / Level / fixes long

Level A Level B Level с Level d

Badge / Level / fixes short

Level A Level b Level C Level D

Badge / Level / + Unit

Level AUnit 1 Level BUnit 1 Level CUnit 1 Level DUnit 1

Badge / Level tabs

Colour-box level glyph (level fill, Neutrals/900 stroke, white letter) reproduced in CSS β€” distinct from the monochrome ic-24-level-* nav glyph.

AI Am Special BI Love My Family CI Live Here DWelcome to the Farm

Audio player / Fixed

Play / pause glyphs are ic-16-play / ic-16-paused recoloured to Neutrals/900.

00:0001:19
00:2301:19
00:0001:19

Audio player / Flex

00:0001:19
00:2301:19
00:0001:19

Card / Resources / Audio flex

Free (playable) and Paid (locked) variants. 264Γ—276 card with preview, level badge, title, and embedded audio player.

Level A Unit 1

Pedro el pez

00:0001:19
Level A Unit 1
Paid feature

Pedro el pez

00:0001:19

Flash card / 464 + 544

Flash card carousel: 464px and 544px width variants, Default and Paid states. Paid = blurred preview, no thumbs/dots.

Level A Unit 1

Download a printable sheet of this unit's flash cards to use with your learners, or purchase a professionally printed set.

View flash cards Flash cards
Show English
Level A Unit 1
Paid feature

You will be able to use the flashcards on the page and download a printable flashcard worksheet for this unit after you Buy subscription.

View flash cards Flash cards
Show English

Breadcrumbs / 3 levels

Text here Text here Text here

Pagination

States top→bottom: Default · Next page · Hover · Pressed · End. Arrow buttons = Bn / 36.

Show 1-6 of 20
Show 7-12 of 20
Show 7-12 of 20
Show 7-12 of 20
Show 19-20 of 20

Other

Part 1 β€” Tags. Alert/Badge/Tooltip/Banner/Toast/Overlay πŸ“‹ next.

Tag / 44 / Left icon

Text here Text here

Tag / 44 / No icon

Unit 1 Unit 1

Alert / Info Β· Warning Β· Success Β· Danger

Text here Text here Text here Text here Text here Text here Buy a subscriprion.

Text here Text here Text here Text here Text here Text here Buy a subscriprion.

Text here Text here Text here Text here Text here Text here Buy a subscriprion.

Text here Text here Text here Text here Text here Text here Buy a subscriprion.

Toast / Success Β· Error

Text here Text here Text here Text here

Banner / CTA / With button Β· With link

Get free unlimited access to all premium features for one month.

Get Started

Unlock an Extra Week of Free Trial! Fill out our quick questionnaire to extend your access and enjoy more time. Unlock now

Alert / Warning w button

Text here Text here Text here Text here Text here Text here. Text here Text here Text here Text here Text here Text here.

Text here

Badge / Level / fixes long

Level A Level B Level с Level d

Badge / Level / + Unit

Level AUnit 1 Level BUnit 1 Level CUnit 1 Level DUnit 1

Badge / Level tabs

I Am Special I Love My Family I Live Here Welcome to the Farm

Badge / Counting steps Β· Paid feature Β· Tip Β· Discount

1 of 4 Paid feature tip Text here

Badge / Status / Active Β· Expired

Active Expired

Tooltip / Bottom left Β· Bottom center Β· Right Β· Left Β· Bottom center fixed Β· Top center fixed

Text here Text Here Text here Text here Text here Text here Text here Text here In this unit, children will learn more ways to talk about weather, clothing, and activities in the context of the Mexican celebration known as the Day of the Dead. In this unit, children will learn more ways to talk about weather, clothing, and activities in the context of the Mexican celebration known as the Day of the Dead.

Overlay / Gray opacity Β· White Β· Gray Blur opacity

Each scrim shown over a sample backdrop in a framed 280×160 box (Figma renders full-bleed 1280×720). Gray Blur uses a backdrop-filter blur(8px).

Gray opacity White Gray Blur opacity

Popovers

Popover / Checklist opened β€” 4 progress states (25% / 50% / 75% / 100%). Typo "exelent" in 100% state is Figma verbatim.

Popover / Checklist opened β€” 1 of 4 (25%)

Get started checklist
1 of 4

25% complete - nice work!

1Create your account
Completed
2Create first class
Try it
3Complete your first lesson
Try it
4Explore Resources library
Try it

Popover / Checklist opened β€” 2 of 4 (50%)

Get started checklist
2 of 4

50% complete - nice work!

1Create your account
Completed
2Create first class
Completed
3Complete your first lesson
Try it
4Explore Resources library
Try it

Popover / Checklist opened β€” 3 of 4 (75%)

Get started checklist
3 of 4

75% complete - nice work!

1Create your account
Completed
2Create first class
Completed
3Complete your first lesson
Completed
4Explore Resources library
Try it

Popover / Checklist opened β€” 4 of 4 (100%)

Get started checklist
4 of 4

100% complete - exelent!

1Create your account
Completed
2Create first class
Completed
3Complete your first lesson
Completed
4Explore Resources library
Completed

Coach Mark / Left β€” 1 of 4

Create first class

Start with creating your first classroom to track all your lessons in one place and monitor progress

1 of 4

Coach Mark / Top left β€” 2 of 4

Explore Resource library

See which materials can be used in the daily curriculum. Click on "Resource library" to learn more.

2 of 4

Coach Mark / Top left β€” 3 of 4 (with media)

Complete your first lesson
GIF placeholder

Check all lesson blocks to complete the lesson or select multiple blocks for subtle control

Your progress updates automatically when you click "Complete the lesson"

3 of 4

Images

Preview containers at exact Figma sizes + the locked-preview blur. Raster thumbnails/illustrations are content (placeholders here; real art populated in page beads β€” πŸ“‹).

Preview / Video β€” default Β· blur (locked, 232Γ—132)

image image β€” locked

Preview container sizes (raster = content πŸ“‹)

Animal level small 176 Animal medium Animal big 256Γ—232 Flash mini 72 Small guide 132Γ—75 Printed 264Γ—192 Flash card 288 Gif 296Γ—168

Filters

More filters drawer β€” Default Β· Themes open (5062:127853) Β· Units open + Themes selected (5062:127894)

Figma note: artboard 5062:127894 renders the expanded Units toggle with a down-chevron (inconsistent with the up-chevron used for the expanded Themes group in 5062:127853/127971); component uses up=open consistently. Checkbox checked-state styling deferred (πŸ“‹) pending a checked variant in Figma.

Content loading

Home-page content-loading states from Figma "Content loading / Versions" (4848:76376). Version 1 = "Loading..." spinner; Version 2 = skeleton (Neutrals/50 blocks). Reproduced verbatim incl. the failing-contrast Neutrals/300 "Loading..." label.

Home page / Content loading β€” Version 1. (figma node 4848:76377)

Loading...

Home page / Content loading / Skeleton β€” Version 2. (figma node 5093:108087)