A Scandinavian minimal component library and token system for lightbulb.no. Neutral palette, generous whitespace, clean typography.
Light background
Dark background
import { LogoFull, LogoIcon } from '@lightbulb/design'
// Full logo with wordmark
<LogoFull variant="dark" width={200} />
<LogoFull variant="light" width={200} />
// Icon only
<LogoIcon variant="dark" size={40} />
<LogoIcon variant="light" size={40} />50
#fafaf9
100
#f5f4f2
200
#e8e6e2
300
#d4d0ca
400
#b5b0a7
500
#908a80
600
#6e6860
700
#524e48
800
#38342f
900
#231f1b
950
#111009
50
#f4f7f4
100
#e6ede7
200
#cddacf
300
#a9bfac
400
#809f85
500
#5d8263
600
#486750
700
#3a5240
800
#2f4234
900
#28382d
950
#131e17
50
#fdf9f0
100
#faf0d9
200
#f4dea8
300
#ecc76d
400
#e3b040
500
#d49527
600
#b87420
700
#96571e
800
#7c461f
900
#673c1e
950
#3c1e0c
4px base unit. All spacing is multiples of 4px.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>We'll never share your email.
This field is required.
<Input label="Full name" placeholder="Jørgen Emerslund" />
<Input label="Email" hint="We'll never share your email." />
<Input label="With error" error="This field is required." />
<Textarea label="Message" rows={3} />With default padding and shadow.
Card body content goes here.
Hover to see shadow lift.
Interactive card for clickable items.
More generous internal spacing.
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Body content</CardContent>
<CardFooter>
<Button size="sm">Action</Button>
</CardFooter>
</Card>
<Card hoverable>...</Card>
<Card padding="lg">...</Card>