Intora — Design System

Foundations

Colors

The Intora color palette is anchored in deep navy surfaces and a vivid mint-teal brand accent. All values are available as CSS custom properties.

Brand

#2DF8BB--surface-brand

Primary Interactive

#12B584--interactive-primary

Brand Dark

#0A8F68--text-brand2

Navy

#1C2E47--surface-navy

Navy Interactive

#243A5A--interactive-navy

Brand Subtle

#F0FEF9--surface-brandsubtle

Surfaces

Base

#F8F9FB--surface-base

Secondary / Elevated

#FFFFFF--surface-secondary

Sunken / Tertiary

#EEF0F4--surface-sunken

Pressed

#DDE1E9--surface-pressed

Text

Primary

#070D16--text-primary

Secondary

#636E7E--text-secondary

Tertiary

#8F9AAB--text-tertiary

Disabled

#BEC5D1--text-disabled

Icons

Primary

#0E1826--icons-primary

Secondary

#636E7E--icons-secondary

Tertiary

#8F9AAB--icons-tertiary

Disabled

#BEC5D1--icons-disabled

Brand

#0A8F68--icons-brand2

On Nav

#FFFFFF--icons-onNav

Feedback

Success

#28A745--feedback-success

Warning

#FF9500--feedback-warning

Error

#D70015--feedback-error

Info

#0A8F68--feedback-info

Intolerance Levels

All--level-all

None--level-none

Low--level-low

Medium--level-medium

High--level-high

Too High--level-too-high

Foundations

Typography

Intora uses Poppins across all surfaces. The type scale is consistent between desktop and mobile, with minor size reductions at smaller breakpoints.

Type Scale — Desktop

Display

40px / 700 / -1.5%--fs-6xl

Intora

Heading 1

32px / 700 / -1%--fs-5xl

Browse Foods

Heading 2

28px / 700 / -0.5%--fs-4xl

My Saved List

Heading 3

24px / 700--fs-3xl

Intolerance Profile

Heading 4

20px / 600--fs-2xl

App Settings

Heading 5

18px / 600--fs-xl

Supported Intolerances

Body Large

16px / 400 / 1.6--fs-lg

Search food or enter barcode…

Body

15px / 400 / 1.6--fs-md

Very high fructose content (63.4 g per 100g). Avoid if intolerant.

Body Small

14px / 400 / 1.55--fs-base

No lactose detected. Safe for lactose intolerance.

Caption

12px / 500 / 0.04em UC--fs-sm

ALL FOODS · 639

Overline

11px / 700 / 0.1em UC--fs-xs

DATA

Font Weights

Light 300 — Toggle chip label

Regular 400 — Body copy, list rows

Medium 500 — Buttons, nav links, chips

SemiBold 600 — Food names, section titles

Bold 700 — Page headings, modal titles

ExtraBold 800 — Display / Marketing

Foundations

Spacing

All spacing follows an 8px base grid. Tokens from --space-1 (4px) to --space-24 (96px).

--space-14px0.25rem

--space-28px0.5rem

--space-312px0.75rem

--space-416px1rem

--space-520px1.25rem

--space-624px1.5rem

--space-832px2rem

--space-1040px2.5rem

--space-1248px3rem

--space-1664px4rem

--space-2080px5rem

--space-2496px6rem

Foundations

Radius

Five radius tokens from sharp corners to full-pill shapes.

XS4px--radius-xs

SM8px--radius-sm

MD12px--radius-md

LG20px--radius-lg

Full999px--radius-full

Foundations

Elevation

Five shadow levels creating spatial depth hierarchy. Each variant uses a neutral black shadow; parameters list offset-x, offset-y, blur, and spread (CSS box-shadow order).

XS

XS--shadow-xs

Parameters0px 1px 4px 0px

Colorrgba(0, 0, 0, 0.04)

SM

SM--shadow-sm

Parameters0px 2px 8px 0px

Colorrgba(0, 0, 0, 0.06)

MD

MD--shadow-md

Parameters0px 4px 16px 0px

Colorrgba(0, 0, 0, 0.08)

LG

LG--shadow-lg

Parameters0px 8px 32px 0px

Colorrgba(0, 0, 0, 0.12)

XL

XL--shadow-xl

Parameters0px 20px 60px 0px

Colorrgba(0, 0, 0, 0.25)

Foundations

Icons

Intora uses Lucide icons throughout. Standard size is 16×16 for UI; 20×20 for primary actions; 24×24 for emphasis.

Sizes

12px
Micro
--icon-size-micro
--icon-stroke-micro · ~1.0px

16px
SM
--icon-size-sm
--icon-stroke-sm · ~1.33px

20px
MD
--icon-size-md
--icon-stroke-md · ~1.67px

24px
LG
--icon-size-lg
--icon-stroke-lg · 2px

32px
XL
--icon-size-xl
--icon-stroke-xl · ~2.67px

Color Roles

Primary
#0E1826

Secondary
#636E7E

Tertiary
#8F9AAB

Disabled
#BEC5D1

Brand
#0A8F68

On Nav
#FFFFFF

App Icon Set

search

camera

bookmark

bookmark-check

user

layout-grid

list

filter

chevron-down

chevron-right

x

check

info

alert-triangle

settings

globe

download

upload

lock

file-text

external-link

scan-barcode

heart-pulse

activity

Foundations

Grid

Intora uses a responsive grid with consistent gutters. The content max-width for the Browse layout is ~960px centered.

12 columns — Desktop (≥1280px) · 24px gutter

1

2

3

4

5

6

7

8

9

10

11

12

8 columns — Laptop (≥1024px) · 20px gutter

1

2

3

4

5

6

7

8

4 columns — Tablet (≥768px) · 16px gutter

1

2

3

4

2 columns — Mobile (≥480px) · 16px gutter

1

2

1 column — Mobile SM (≥320px) · 16px margin

1

Components

Top Bar

The app's primary navigation bar sits on the navy surface with the Intora logo, nav links, and contextual actions.

Default — All tabs

Components

Floating Nav

Mobile-first floating navigation anchored near the bottom with four tabs: Browse, Search, Scan, and My List.

Browse active (default)

All active states

Search active

Scan active

My List active

Anatomy & Tokens

Property	Value
Container background	`--interactive-navy` · #243A5A
Container radius	`--radius-full` · 999px
Container padding	6px (inner gutter between items and edge)
Container shadow	`0 8px 32px rgba(7,13,22,.35)`
Active item background	`--surface-navy` · #1C2E47
Active icon + label color	`--surface-brand` · #2DF8BB
Inactive icon + label color	`rgba(255,255,255,0.55)`
Item min-width	72px
Item padding	10px 20px
Icon size	20 × 20px
Label size	11px / 500 weight

Components

Search Bar

Two variants: simple (no scan button) and with scan action. Four interaction states.

With Scan button

States

Default

Hover

Focused

Disabled

Components

Buttons

Six variants × four sizes. All use the btn base class with modifier classes.

Variants

Sizes

With Icons & Icon-only

Disabled states

Components

Input Fields

Text inputs with label, hint, error, and icon variants.

Email * Used to link your saved data across devices.

Focused state

Error state Barcode must be 8–13 digits only.

Disabled state

Components

Chips & Pills

Category chips, intolerance toggle chips, and intolerance level pills.

Category chips — Default / Active

Intolerance toggle chips

Intolerance level pills

Intolerance level dots

Components

Dropdowns & Filters

Filter dropdowns for category and intolerance level selection.

Trigger states

Category panel (open)

Level panel (open)

Components

Tabs

Two tab styles: segmented (pill) and underline.

Segmented tabs

Underline tabs

Components

Onboarding

First-run steps for choosing app language and tracking intolerances. Language uses selectable cards with a checkmark; intolerances use the same typography rhythm with icons and toggles for multi-select.

Language item

Primary label (locale name) + secondary line (English name). Selected: mint-tinted surface, brand border, trailing check. Unselected: white surface, cool neutral border.

Example screen

Your language

Choose how you want to use Intora. You can change this anytime in settings.

Anatomy

Class	Purpose
`.onboarding-lang-list`	Vertical stack; gap `--space-3`
`.onboarding-lang-card`	Card shell; add `.onboarding-lang-card--selected` for active
`.onboarding-lang-card__primary` / `__secondary`	Bold title + muted subtitle
`.onboarding-lang-card__check`	Hidden when unselected (layout preserved)

Intolerance item

Horizontal row: icon in a sunken tile, title + short explainer, and the standard toggle-switch for on/off. Border uses a light mint stroke to group the list visually.

Example screen

Your intolerances

Select all that apply. You can change these anytime.

Lactose

Milk sugar found in dairy products

Fructose

Fruit sugar found in many foods

Sorbitol

Sugar alcohol used as sweetener

Gluten

Protein in wheat, barley and rye

Anatomy

Class	Purpose
`.onboarding-intol-list`	Vertical stack of rows
`.onboarding-intol-row`	Flex row; mint border `#A5E3C8`, radius `--radius-lg`
`.onboarding-intol-row__icon`	44×44 tile, `--surface-sunken`
`.onboarding-intol-row__title` / `__desc`	Name + one-line helper
`.toggle-switch`	Same component as Settings; `--interactive-primary` when on

Shared screen chrome

Use .onboarding-header, .onboarding-title, and .onboarding-subtitle above either list. Optional .onboarding-demo-frame constrains width for mobile-first previews in this doc only.

Components

Food List

The primary list view for Browse and My List. Each row shows an emoji, food name, level dots, and bookmark action.

ALL FOODS 639

🌴

Date

🍎

Apple

🍌

Banana

🥦

Quince

🥭

Mango

Components

Modals

Food detail modal with navy header, Nutri-Score, intolerance breakdown, and save action.

Components

Banners

Contextual banners for feedback and system messages.

Components

Nutri-Score

Five-letter nutritional quality indicator. Active letter is highlighted and scaled.

A — Excellent

A

B

C

D

E

B — Good

A

B

C

D

E

C — Average

A

B

C

D

E

D — Poor

A

B

C

D

E

E — Bad

A

B

C

D

E

Anatomy & Tokens

Property	Value
Track background	`#E6EAF0`
Letter color (inactive)	`#7C8797`
Letter color (active)	`#FFFFFF`
A — Excellent	`--nutriscore-a` · #1A8E3E
B — Good	`--nutriscore-b` · #83B83A
C — Average	`--nutriscore-c` · #F5C42A
D — Poor	`--nutriscore-d` · #E96B2A
E — Bad	`--nutriscore-e` · #D62D1B

Components

Tables

Used in the design system itself and for data-heavy views.

Token	Value	Usage
`--surface-navy`	#1C2E47	Navigation bar background
`--interactive-primary`	#12B584	Primary buttons, toggles, counts
`--surface-brand`	#2DF8BB	Logo accent, active nav underline
`--level-too-high`	#F44336	Too High intolerance level
`--radius-full`	999px	Chips, pills, badges

Components

Settings Rows

List rows used in the Profile / Settings tab.

My Profile

My Saved List

1 saved food

App Settings

Language

English

Notifications

Push alerts

Data

Scoring Method

How we rate products and levels

Export My Data

Download a copy of your data

Import My Data

Restore from a backup file

Language Selector

Confirm Dialog

Import data?

Import will replace your current intolerances and saved list on this device. Continue?

Components

Barcode Scanner

Photo/barcode check modal with scanner viewport, tip, and manual entry fallback.

Components

Supported Intolerances

Intora tracks the four most common food intolerances.

Lactose

Found in dairy products. We measure the exact lactose content per 100g whenever data is available.

Fructose

A sugar found in many fruits and processed foods. Important for people with fructose malabsorption.

Sorbitol

A sugar alcohol present in some fruits and sugar-free products that can trigger digestive symptoms.

Gluten

A protein found in wheat, barley, and rye. Essential to flag for people with celiac disease or sensitivity.

Level Badges (intol-badge)

None Low Medium High Too High

Intora · v1.1

Intora website · Open Food Facts data · Created by Nacho Munarriz