UI kit — Calico Spanish Teacher Portal (Phase 1 verbatim)

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 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

Text Here

Text Here Text Here Text

Input / No icon

Text here

Text here Text here Text

Text here

There was an error.

Input / Password

Type password

••••••••

••••••••••••

9v!B6ZQ%WLS!

••••••••

Weak password

••••••••

Medium password

••••••••

Strong password

Type password

There was an error.

Type password

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

Tabs / Sign in method / Google

Tabs / User type

Text here

Tabs / Levels filter

ALevel A

BLevel B

CLevel C

DLevel D

Tabs / Sign in method / Microsoft

Tabs / Linear /32

Tex here

Tabs / Filter

Text here

Tabs / Levels filter / All levels

All levels

Menu item / Home

Menu item / Level A

Menu item / Level B

Menu item / Level C

Menu item / Level D

Menu item / Settings

Menu item / Log Out

Menu item-subgroup

Unit 1

Dropdown / Cell left icon

Text here

Dropdown / Cell right icon

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.

Tabs / Levels w radio bn / Horizontal / Level A

Level A AI Am Special

TTabs / Levels w radio bn / Horizontal / Level B

Level B BI Love My Family

Tabs / Levels w radio bn / Horizontal / Level C

Level C CI Live Here

Tabs / Levels w radio bn / Horizontal / Level D

Level D DWelcome to the Farm

Tabs / Levels w radio bn / Vertical / Level A

Level A AI Am Special

Tabs / Levels w radio bn / Vertical / Level B

Level B BI Love My Family

Tabs / Levels w radio bn / Vertical / Level C

Level C CI Live Here

Tabs / Levels w radio bn / Vertical / Level D

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

Vocabulary support

Comics

Activities

Games

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

#433185

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

Log out

Lock

Download

zap

Filters

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

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 Check

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 in CSS (approximate — exact glyph export pending).

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

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 a rounded completed line inside the track; reproduced as a solid rounded segment.

Chart progress

Ring arc approximated with a conic-gradient (Green/600 fill on Green/100 track); Figma's rendered stroke caps differ.

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

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 19-20 of 20

Other

Part 1 — Tags. Alert/Badge/Tooltip/Banner/Toast/Overlay 📋 next.

Tag / 44 / Left icon

Text here

Tag / 44 / No icon

Unit 1

Alert / Info · Warning · Success · Danger

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

Toast / Success · Error

Text here Text here

Banner / CTA / With button · With link

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

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

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