.card .card--hover
Surface background, 1px line frame, heading frame on hover.
Details →
Design System
Sági Dániel design system
Tokens (src/css/styles.css) and component classes (src/css/custom-tailwind.css) on Tailwind CSS v4. Every colour resolves through a CSS variable, so :root[data-theme="dark"] swaps the palette.
01 colours
Colour palette
Core
-
page
light #F3F2F2 · dark #161514Page background (paper) -
heading
light #201E1D · dark #F3F2F2Text, headings, dark section background (ink) -
ink
light #201E1D · dark #F3F2F2Body text -
slate-500
light #5A5757 · dark #A8A4A4Muted text (text-muted) -
line
light #D7D3D3 · dark #363332Rules and frames -
surface
light #FFFFFF · dark #1F1D1CCards, highlighted sections -
page-dark
light #EAE7E7 · dark #2A2827Soft background, image placeholder
Magenta
-
primary
light #D6006C · dark #D6006CButtons, cursor, selection, focus -
primary-hover
light #AA0B56 · dark #EE1F80Button hover -
accent-strong
light #B3005A · dark #FF73AEMagenta text: //, numbers, errors, link hover -
primary-subtle
light #FBE6F0 · dark #3A1426Soft magenta background -
accent
light #F0469A · dark #F0469ADecoration on dark backgrounds
Dark surfaces
-
dark
light #201E1D · dark #F3F2F2Dark section (bg-dark + on-dark), inverts in dark mode -
darker
light #141312 · dark #141312Always dark chrome
02 typography
Typefaces and type scale
Geist
font-heading · font-body
400 · Quick websites that sell
500 · Quick websites that sell
600 · Quick websites that sell
700 · Quick websites that sell
Geist Mono
font-mono
400 · eyebrow, labels, breadcrumbs
500 · numbers, contact details
<sd/>
text-display
clamp(44px, 6.4vw, 92px) · 1.02 · -.05em
Home hero title
Websites that work
text-h1
clamp(40px, 5.6vw, 80px) · 1 · -.05em
Page title
Websites that work
text-h2
clamp(32px, 4vw, 54px) · 1.02 · -.045em
Section title
Websites that work
text-h3
clamp(28px, 3.4vw, 44px) · 1.05 · -.045em
Sub title
Websites that work
text-h4
clamp(24px, 2.6vw, 34px) · 1.1 · -.04em
Row title, CTA band
Websites that work
text-h5
22px · 1.2 · -.03em
Card title
Websites that work
text-h6
20px · 1.25 · -.03em
Small title
Websites that work
text-stat
clamp(44px, 5vw, 64px) · 1 · -.05em
149 000 Ft
text-lead
20px / 1.5 · 18px ≤ 991px
Lead paragraph under page titles, set in the muted colour.
text-base
16px / 1.55
Body copy for cards, lists and descriptions.
text-small
15px / 1.55
Small text, navigation and button labels.
font-mono text-tag
12px mono
Label in the mono typeface
eyebrow
14px mono
What I do
cursor-block
animate-blink
sági dániel and blinking
a · link-more
Body text with an inline link · Details →
03 buttons
Buttons
04 tags and chips
Tags and chips
Most popular
Outline tag
Soft tag
nav · chip · aria-current
components/breadcrumbs
05 cards
Cards and icon tiles
.card--light
Page background with an inset frame.
Dark card
.card--dark
Ink background, paper text. Inverts in dark mode.
.card--panel
Larger padding for forms and asides.
06 dark section
bg-dark with on-dark
Dark sections use the ink colour as background and the paper colour as text, so they flip in dark mode. The eyebrow slashes are not coloured here and the eyebrow sits at 75% opacity.
Muted text on dark (text-muted).
07 forms
Form elements
08 article text
prose-content
Article body at 19px with a 1.7 line height. Links inside the text stay underlined: an underlined link.
Article subheading
Second paragraph under a 28px heading with tight letter spacing.
- List item one
- List item two
A short quote with a magenta rule.
prose-content--compact · 17px / 1.65
Compact legal text: 17px paragraphs, 20px rhythm and a 720px measure.
1. Data controller
Headings stay at 22px so long policies remain scannable.
prose-content--article · 19px / 1.7
Blog article body: 19px paragraphs, 22px rhythm and a 700px measure.
When is it worth it?
Subheadings at 28px with tight letter spacing.
09 section parts
Section header and lists
components/section-header · eyebrow · link
references
Companies I worked for
marker · number
-
Errors spotted before your client does Short supporting sentence.
-
1 year warranty Short supporting sentence.
marker · plus
- Custom theme, no page builder
- Technical SEO from day one
marker · none (dl)
- Takeover
- Definition text under the term.
- Replacement
- Definition text under the term.
10 pricing
Pricing cards
new site
−15% with maintenance
New website with a custom theme
450 000 FtCustom WordPress theme, technical SEO, WCAG 2.1 AA.
Details → New website with a custom theme Request a free audit- Tested updates
- Regular backups
- Error monitoring
- Monthly report
11 faq
FAQ accordion
Tested updates, backups, error monitoring and a monthly report.
Yes, for maintenance and small content changes.
12 hero
Rotator and cursor
data-rotator · cursor-block animate-blink
Websites that sell, load fast and work
13 cta
CTA note and band
cta_layout · note
note
Not sure where to start?
A dark box inside the container with an eyebrow, a title and a short text.
cta_layout · band
Ask for a free audit of your site
14 icons
Icons
-
icon-arrow-left -
icon-arrow-right -
icon-arrow-up-right -
icon-calendar -
icon-caret-down -
icon-check-circle -
icon-check -
icon-chevron-down -
icon-chevron-left -
icon-chevron-right -
icon-chevron-up -
icon-clock -
icon-close -
icon-download -
icon-external-link -
icon-facebook -
icon-file-text -
icon-globe -
icon-image -
icon-info -
icon-link -
icon-linkedin -
icon-mail -
icon-map-pin -
icon-menu -
icon-minus -
icon-phone -
icon-play -
icon-plus -
icon-quote -
icon-search -
icon-settings -
icon-sun -
icon-user -
icon-users -
icon-zap
15 tokens
Layout, rules, spacing
- container-site
- max 1240px · padding clamp(20px, 4vw, 48px)
- section-y
- clamp(56px, 8vw, 112px)
- section-y-sm
- clamp(48px, 6vw, 80px)
- --spacing-header
- 81px
- rounded-*
- 0 · rounded-pill 999px
-
frame-line0 0 0 1px line -
frame-insetinset 0 0 0 1px line -
rule-b0 1px 0 line -
rule-t0 -1px 0 line -
rule-t-strong0 -2px 0 heading -
shadow-soft0 1px 3px rgb(0 0 0 / .25)
-
p-14px -
p-28px -
p-312px -
p-416px -
p-520px -
p-624px -
p-832px -
p-1040px -
p-1248px -
p-1664px -
p-2080px -
p-2496px