# Iceberg Design System

> Tradesolution's design system for building consistent, accessible user interfaces.

This file provides AI-readable documentation for the Iceberg design system.
For comprehensive documentation with code examples, see: /llms-full.txt

## Quick Links

- Icons Browser: https://iceberg-icons.tradesolution.no
- Styles Documentation: https://iceberg-styles.tradesolution.no
- Themes Documentation: https://iceberg-themes.tradesolution.no
- React Storybook: https://main--614c4b23cace32003a62281e.chromatic.com (requires login)

## Packages

- `@tradesolution/iceberg-ui-react` - React components (IcebergIcon, etc.)
- `@tradesolution/iceberg-icons` - Icon definitions and complete icon set
- `@tradesolution/iceberg-styles` - CSS/SCSS styles, variables, and themes

## Available Icons (369 total)

1-layer, 2-layers, 3-layers, 3-d, activities, address-book, adminportal, alert, anchor, archive, arrow-down-left, arrow-down-right, arrow-down, arrow-left, arrow-right, arrow-up-from-square, arrow-up-left, arrow-up-right, arrow-up, arrows-left-right, arrows-up-down, autumn, bag, ban, barcode, basis-inside-height, basis-inside-length, basis-inside-width, bell-new-notifications, bell, bill, book, bookmark-filled, bookmark, bot, bottle, box-archive, box-height, box-length, box-m-1, box-m-2, box-open, box-width, box, boxed-lightbulb, boxes, bread, bridge, briefcase, brush-with-image, brush, bucket, bug, bulb, cable-coil, cable-drum, cable, cactus, calculator, calendar-clock, calendar, camera, can, car, cards, cards-2, cards-3, cartridge, case-height, case-length, case-width, case-2-height, case-2-length, case-2-width, category, chart-line, chart-pie, check-document, check, cherry, chevron-down, chevron-left, chevron-right, chevron-up, circle-arrow-down, circle-arrow-up, circle-check-blue-small, circle-check-blue, circle-check-green-small, circle-check-green, circle-check-small-green, circle-check-small, circle-check, circle-empty, circle-full, circle-half, circle-question, circle-x-red, circle-x-small-red, circle-x-small, circle-x, clock-rotate-left, clock, close, cloud-check, cloud-slash, code, coffee, combine, combined, comment, company, coop-portal, coop-resept, cooperation, copy-to-clipboard, couple, credit-card, crop, cutlery, danger-goods-00, danger-goods-empty, demi-trailer, discount, disk, document-approved, document-detail, document-draft, document-unapproved, document, dot, drum-horizontal, dry, duplicate, edit, eds, el, ellipsis-horizontal, ellipsis, email, envelope-arrow-turn-up-right, envelope-open-document, envelope, envelope-2, epd-bedrift, epd, ep-dadmin, epix, equal, etim-ec, etim-eg, etim, excel, exclamation-mark, expand, export, eye-closed, eye-open, factory, fase-0-filled, fase-0, fase-1-filled, fase-1, fase-2-filled, fase-2, fase-active, fase-inactive, feed, filer, fill, filter, flag-filled, flag, folder, font, food-pot, fotopunkt, fridge, gallery, gln, globe, grade-a, grade-b, grade-c, grade-d, grade-e, gs-1-databaerer, gs-1-datamatrix, gtin, handshake, handwashing, hashtag, headset, heart-filled, heart, height-net, hex-nut-4, hex-nut, hole-depth, hole-height, hole-width, home, hourglass, iceberg, image-camera, image-search, image, import, inbox, industry, info, insight, iskrem, key, k-radmin, lansering, laptop, layer-height, length-net, lightning, line, link, list, location, lock-open, lock, login, logo-apple, logo-windows, logo, logout, management, map-location-dot, map, measuring-cup-full, measuring-cup, meatballs, mediastore-config, menu, min-depth, min-height, min-width, minimize, minus, mobile, more-layers, multiply, no-enter, no-photo, orange, order, org, orion, packaging-orange-type, packaging-type, pallet-full-with-load-carrier, pallet-full-without-load-carrier, pallet-height, pallet-length, pallet-top-weight, pallet-width, pdf, pen, percent, phone, photorobot, picasso, pin-here, pin, placement-bottom, placement-middle, placement-top, planogram, plate, plug, plus, pogo, printer, product-inside, profile, pulsar, qr, question, recall, redo, replace, roll, rotate-left, rotate-right, rotate, scale-balanced, scissors, screwdriver-wrench, search, select, sell, semi-trailer, send, setsquare, settings, shield, ship, shirt-stains, shirt, shopping-basket-crossed, shopping-basket, shopping-cart, sign, sign-stroke, smidig, snowflake, snowman, spaces, spring, square-play, square-weight, star-filled, star, stars, stats, sticky-note, store, strawberry, suite, summer, supplier, synchronize, table, tag, takecargo, temperature-fire, temperature-snow, temperature, thumbs-down-filled, thumbs-down, thumbs-up-filled, thumbs-up, time, tradefacts, train-tunel, train, trash, truck, tube, undo, unit-box-mini, unit-box, unit-breakage, up-down, user, users, varsling, vetduat, video, warehouse, washingmachine, waves, web, weight, wholesaler, width-net, wifi-slash, wifi, wificonnect, wifidisconnect, window, wine-glass, winter, word

## Tjenestegruppe Icons (11 total)

takecargo, epd, edison, fotostudio, mediastore, increase, kradmin, orion, sell, varsling, bridge

## App Icons (29 total)

takecargo, epd, epdadmin, epdbedrift, edison, fotostudio, mediastore, msadmin, increase, kradmin, orion, sell, adminportal, iskrem, lanseringer, recall, coopportal, coopresept, filer, vetduat, management, startsiden, global, pulsar, tradefacts, bridge, sign, signStroke, picasso

## Color Tokens

### Primary (Blues)
- B500: #0075DB
- B200: #BFE0FF
- B100: #EAF5FF
- B000: #F7FAFC
- B700: #003B6E
- B900: #001F3D

### Success (Greens)
- G500: #32872C
- G200: #CCEEC9
- G100: #F0FAEF
- G900: #1C4D19

### Warning (Oranges)
- O500: #F58F18
- O200: #FCD7AD
- O100: #FEEEDD
- O900: #5D3304

### Error (Reds)
- R500: #B4110F
- R200: #FAC1C0
- R100: #FEF1F1
- R900: #730B09

### Neutral (Grays)
- GY500: #5C5C5C
- GY400: #68778D
- GY200: #DCDCDC
- GY100: #F3F3F3
- GY900: #3B3B3B

### Text Colors
- base: #001F3D
- muted: #68778D
- link: #0075DB

### Background Colors
- primary: #FFFFFF
- secondary: #FBFAFC
- tertiary: #DFE4F0