DFT-HungáriaDigitális fejlesztések
← Sztenderdizálás

DFT "Felívelő Vonal" design system

The approved design system of DFT-Hungária's digital products. Dr. Csikesz Tamás chose it from 10 concepts (concept 02, "Felívelő Vonal" / Rising Line), and it is live on the Hibaok-átvilágítás landing page: https://dft-outreach.com/hibaok/

All new DFT services, including Sztenderdizálás, use this system. Concepts may differ in layout, navigation and motion, but not in brand.

1. Idea

The rising white swoosh under the letters of the DFT logo is the spine of the system. Progress indicators, chart curves, dividers and edges all draw the same "jót és jobban" (good, and better) upward movement, from left to right.

2. Logo

  • Files are in 01 DFT logo/:
    • dft-logo.svg is the full logo: a green square with white letters and swoosh.
    • dft-logo-mark-white.svg is the white mark only, for use on green or dark backgrounds.
    • dft-logo-1920.png is the high-res PNG.
  • Never redraw, recolour or restyle the logo.
  • Client request: the DFT logo must appear bottom-left on every screen. On a website that means the footer, in addition to the header.
  • A sub-brand is written next to the logo as a lockup, e.g. dft | Sztenderdizálás. The DFT logo is always the master brand.

3. Colour (use only these, plus tints)

TokenHexRole
Mélyzöld (deep green)#00432Ddark surfaces, headlines, primary text accents
DFT zöld#006745primary buttons, key lines, active states
Hajnal (dawn mint)#8FD4B0secondary accent, highlights on dark green, soft lines
Összevetés (comparison)#566F92muted slate blue, approved by Dr. Csikesz Tamás instead of the brighter #3558B8; used for comparison and deviation data
Háttér (background)#F4F0F3warm off-white page background
Szöveg (text)#15201Abody text
Másodlagos szöveg (secondary text)#4A554Esecondary text (7.0:1 on the background)
Vonal (line)#DDD7DAhairlines, borders
Menta felület (mint surface)#E6F4ECsoft info panels, chips
White#FFFFFFcards

Dark mode: background #0C1410, surface #16221C, primary #4CC98E, comparison #9DB0CE, text #EEF2EF, muted #9FAEA6.

Contrast: every text pairing meets WCAG AA. White on #566F92 is 5.1:1, and #8FD4B0 on #00432D is about 6.3:1.

4. Typography

  • SF Pro Display for headlines and big numbers: bold 700–800, tight tracking (−0.03 to −0.05em), line-height about 1.0.
  • SF Pro Text for body, UI and tables, with tabular figures for numbers.
  • Web fallback: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif.
  • Scale on the landing page: H1 clamp(44px, 6.2vw, 84px), H2 clamp(34px, 4.4vw, 56px), lead 18–21px, body 17px.
  • UI copy is always Hungarian.

5. Shape & surfaces

  • Continuous rounded corners: 10 / 14 / 20 / 34 pt (chips, buttons, cards, large panels).
  • Surfaces: white cards on the warm off-white background.
  • Soft shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 30px 60px -36px rgba(0,40,25,.35).
  • Dark green (#00432D) panels are used for key moments: stats, cost, the finale.
  • Section edges: a rising curved edge in mint and deep green leads into dark sections.

6. Components (see the landing page)

  • Buttons. Primary: DFT zöld with white text, radius 18, and a "↗" arrow. Ghost: white with a hairline. On dark panels: Hajnal mint with deep-green text.
  • Chips. Mint surface with deep-green text, radius 10, and a "↗" prefix.
  • Tags. K / V / G (direct / indirect / root) are 22px squares, radius 7:
    • K is deep green.
    • V is mint with dark text.
    • G is the muted blue.
  • Charts. Tapered swooshes instead of bars. Rising curves with nodes that sit exactly on the line. Values count up.
  • Cards. White, radius 34, soft shadow, 32px padding.
  • Iconography. Minimal line icons. The "↗" arrow is the recurring pointer.

7. Motion (Apple-level restraint)

  • Easing: cubic-bezier(.15,.85,.35,1). Rise 12–24px, scale 0.96–0.97 → 1, stagger 60–90ms.
  • The rising curve draws left to right like a pen stroke. Numbers count up. Charts draw in; they never "jump".
  • A few scroll-linked moments (curves, progress bands), with one-time reveals everywhere else. No sticky pinning.
  • Never: glowing blobs, gradient orbs, particles, glassmorphism shimmer, neon, cursor trails or infinite idle loops.
  • Only transform, opacity, clip-path and stroke-dashoffset; it must be smooth in Safari. prefers-reduced-motion shows the final state.

8. Voice

Calm authority, precise, human. Short Hungarian sentences. Motto: "Jót és jobban."

Letöltés Markdown fájlként