Design system

Tokens and components extracted from the Figma file "HUGE ONE" (canvas "MVP launch"). Three-layer architecture: primitive, semantic, component. Source code: css/styles.css.

Token architecture

A raw value (hex, px) should never appear directly in a component. It always goes through a semantic token, which itself is built on a primitive token.

Layer	Role	Example
Primitive	Raw value, no intent	`--blue-500: #5790df;`
Semantic	Alias with meaning	`--color-primary: var(--blue-500);`
Component	Specific use in one component	`--button-primary-bg: var(--color-primary);`

Colors

Palette read directly from the Figma styles (original Figma variable names in the caption).

blue-500 / primary#5790df

blue-600 / hover#5378b0

blue-100 / focus#e2ecfe

blue-50 / surface 2#f2f7ff

blue-25 / app bg#f4f7fe

navy-900 / heading#1e2028

navy-800 / icon#282a36

navy-700 / text 1#26346e

navy-600 / text 2#3a568c

navy-400 / text 3#6b6f8c

overlay white 60rgba(255,255,255,.6)

overlay black 15rgba(0,0,0,.15)

Semantic token	Value	Usage
`--color-primary`	#5790df	CTAs, active links, active tab
`--color-text-primary`	#26346e	Content titles (startup name, post text)
`--color-text-secondary`	#3a568c	Numeric values (KPIs)
`--color-text-tertiary`	#6b6f8c	Secondary text, descriptions
`--color-heading`	#1e2028	Navigation labels, UI headings

Typography

Two families: SF Pro Display for the interface, DM Serif Display for editorial moments (startup name, headings). Fonts are not embedded on this demo page (system fallback), they need to be sourced and licensed for the app.

Heading 20
DM Serif Display, 20/24

Nautilus

Body 16 Bold
SF Pro Display Bold, 16/21, +0.64px

Primary button label

Body 16 Regular
SF Pro Display, 16/22

Price comparison platform for boat charters & tours worldwide.

Body 15 Regular
SF Pro Display, 15/19, +0.25px

Body 14 Semibold
SF Pro Display Semibold, 14/20

220,000€

Body 14 Regular
SF Pro Display, 14/20

Startup description text

Caption 12
Inter, 12/16

30 min

Spacing & radius

Scale observed in the components (button padding, list gaps).

--space-1 (4px)

--space-2 (8px)

--space-3 (12px)

--space-4 (16px)

--space-5 (20px)

--space-6 (24px)

--space-8 (32px)

Token	Value	Usage
`--radius-sm`	8px	Small UI elements
`--radius-md`	24px	Inner cards, wide badges
`--radius-lg`	32px	Buttons, container cards, tab bar
`--radius-pill`	999px	Avatars, round buttons, pill badges

Effects

Soft blue-tinted shadow on cards, blue glow on the primary CTA. Liquid glass (blur, saturation boost, bright top edge, soft elevation) on the tab bar, the secondary button, and tertiary icon buttons, in the style of iOS's layered glass surfaces.

shadow-card

•

Buttons

Primary and secondary, 4 states each (read directly from the "Button states" frame in Figma). Secondary uses the liquid glass treatment; see also the tertiary icon buttons under Swipe actions.

Badges: funding stage

"Funding round status" component, 4 variants depending on the startup's stage.

🫘 Pre-seed 🌱 Seed 🪴 Series A 🌴 Series B+

Tab navigation

Used for the startup profile tabs (Overview / Feed / Documents / Team / Q&A) and the feed filters. Active tab: bold, with a primary-colored underline.

Implementation: ARIA tablist/tab/tabpanel pattern. Each button drives an associated panel through aria-controls, only one tab sits in the tab order (tabindex="0") while the rest are -1, and left/right arrow keys move between tabs.

Tab bar (bottom navigation)

Blurred glass background, active dot highlighted. Used for the app's main navigation.

Touch target raised to 44×44px (the original Figma trace was 42px, below the WCAG 2.5.8 threshold). aria-label is required since these buttons carry no visible text, only an icon.

Cards & avatar

White card, 24px rounded corners, soft shadow. Circular avatar with a verification badge (not recreated here, SVG icon sourced from Figma).

NNautilus

Price comparison platform for boat charters & tours worldwide.

Swipe actions (tertiary)

Floating circular icon buttons above the card stack (discovery feed). Tertiary action style: liquid glass, same recipe as the tab bar and the secondary button.

Icons

Reference library: Hugeicons (59,000+ icons), replacing the ad hoc icons from the original Figma file (Phosphor Icons and a custom $icon-line-* set). This site's own nav icons are inlined straight from the Hugeicons free SVG source, not the icon font, to avoid any external font-loading dependency.

Default style	Stroke Rounded, the only style included in the free tier and consistent with the line-icon style already used in the mockups
Flutter integration	the `hugeicons` package on pub.dev (free), or the Pro guide if premium styles are needed
License	Free: Stroke Rounded style only. Pro (paid): 9 other styles (Bulk, Solid, Twotone, Duotone, Sharp...)

Open question: if a screen needs a style outside Stroke Rounded (for example a filled icon for an active state), the choice is either the Hugeicons Pro plan or a one-off exception. To decide case by case during implementation.

Accessibility

Target: WCAG 2.1 level AA. Checked against the real tokens (computed contrast ratios, not visual guesses). Several gaps were found and fixed in the tokens above.

Contrast fixes

Token	Before	After	Why
`--color-primary` / `--color-link-active`	#5790df, 3.25:1 on white	#3568b8, 5.49:1	Used as button text, link, and label color, below the AA threshold (4.5:1) as it stood
`--navy-400` (text-tertiary)	#6b6f8c, 4.58:1 on app background	#63678a, 5.10:1	Margin too thin (AA cutoff is 4.5:1), a different font rendering could have pushed it below
Note code chips	same tint as their own background, invisible	white with a border, always visible	Code chips reused the surrounding tint, so they disappeared inside tables headers and notes

The raw Figma color (--blue-500 / --blue-600) stays documented as the brand reference and remains usable for pure decoration (borders, large fills, glow), never for text or an informative icon.

Keyboard focus

A real :focus-visible rule was added on every interactive element (buttons, tabs, tab bar, nav links): a 3px ring in --color-focus-ring, 2px offset. This is separate from the "Focused" variant in Figma, which documents a visual design state rather than actual keyboard behavior.

Touch targets

44×44px minimum (token --touch-target-min) on every interactive element. The Figma tab bar drew dots at 42px, raised to 44px in the tokens.

Semantics & keyboard

Tabs (startup profile, tab bar): ARIA tablist/tab/tabpanel pattern, arrow-key navigation, only one element in the tab order at a time.
Icon-only buttons with no visible label (tab bar): aria-label is required.
Heading hierarchy: one h1 per page, no level skipped (h2 to h3 directly, never h2 to h4).

Open questions

Admin back-office forms (not yet designed): every field will need an associated <label> and a clear error message, not a placeholder used as the only label.
Startup logos, photos, and uploaded documents: alt text to be entered by the internal team at upload time (needs a field in the back office).
Swipe action icons (♥ / ✕ / ↺) sit over a variable photo background in production. Contrast needs checking against real startup photos, not just the dark demo background used here.
No animation is defined yet. Once swipe transitions are implemented, plan a prefers-reduced-motion alternative that keeps the information instead of just cutting the animation to 0ms.

Usage notes

SF Pro Display and DM Serif Display need to be sourced and licensed before integrating them into the app. This page uses a system fallback for the demo.
This extraction covers the components visible on the screens reviewed so far (Feed, buttons, navigation, badges). Other components in the file still need documenting as we go (inputs, modals, empty states).
Native Figma variables (linked colors/effects) aren't reachable remotely without the desktop app. The tokens above were rebuilt from the resolved values in the design context.