დაწყებაGet started

დიზაინ სისტემის შესახებAbout the design system

gepha.design GEPHA ჯგუფის ერთიანი დიზაინ სისტემაა. სამი ბრენდი — GEPHA, GPC და ფარმადეპო — იზიარებს ერთ ტოკენ-სისტემას და კომპონენტების ერთ ნაკრებს. ბრენდს ერთი HTML ატრიბუტი ცვლის.

gepha.design is the shared design system of the GEPHA group. Three brands — GEPHA, GPC and Pharmadepot — share one token set and one component library. A single HTML attribute switches the brand.

რას მოიცავსWhat's included

ფაილიFile	დანიშნულებაPurpose
`tokens.css`	CSS ცვლადები: პალიტრები, სკალები, სემანტიკური ტოკენები სამი ბრენდისთვის, ღია და მუქი თემა.CSS custom properties: palettes, scales and semantic tokens for three brands, light and dark.
`components.css`	ღილაკები, ბეიჯები, შეტყობინებები, ფორმის ველები, ბარათები, ცხრილები, ტაბები — `gds-` პრეფიქსით.Buttons, badges, alerts, form fields, cards, tables, tabs — prefixed `gds-`.
`tokens.json`	იგივე ტოკენები JSON-ად — აპლიკაციებისთვის, მობილურისთვის, build ხელსაწყოებისთვის.The same tokens as JSON — for apps, mobile and build tools.
`scripts/check-tokens.mjs`	ამოწმებს კონტრასტს და სისრულეს, აგენერირებს tokens.json-ს.Checks contrast and completeness, and generates tokens.json.

დაკავშირებაInstall

ორი სტილის ფაილი საკმარისია. ტოკენები ყოველთვის კომპონენტებამდე უნდა ჩაიტვირთოს.

Two stylesheets are enough. Load the tokens before the components.

<link rel="stylesheet" href="https://gepha.design/tokens.css">
<link rel="stylesheet" href="https://gepha.design/components.css">

<!-- GEPHA: Inter + Noto Sans Georgian -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Georgian:wght@400;500;600;700&display=swap">

GPC და ფარმადეპოს შრიფტები (Graphik Georgian, Avenir Next Georgian) კომერციული ლიცენზიით გამოიყენება და ამ საიტზე არ ვრცელდება. ისინი საკუთარი დომენიდან ჩატვირთეთ — ტოკენები მათ სახელით მიმართავს და Noto Sans Georgian-ზე გადადის, თუ შრიფტი არ არის.The GPC and Pharmadepot fonts (Graphik Georgian, Avenir Next Georgian) are commercially licensed and are not served from this site. Load them from your own domain — the tokens reference them by name and fall back to Noto Sans Georgian.

ბრენდის არჩევაChoosing a brand

ბრენდი <html> ელემენტის data-brand ატრიბუტით ირჩევა. ატრიბუტის გარეშე — GEPHA.

The brand is set with data-brand on the <html> element. No attribute means GEPHA.

<html data-brand="gpc">          <!-- GPC -->
<html data-brand="pharmadepot">  <!-- ფარმადეპო / Pharmadepot -->
<html>                           <!-- GEPHA (default) -->

ბრენდიBrand	data-brand	სად გამოიყენებაUsed for
GEPHA	—	gepha.com, შიდა სისტემები, მარაგები, რეპორტებიgepha.com, internal tools, stock, reports
GPC	gpc	gpc.ge, GPC-ის აპლიკაციაGPC app
ფარმადეპოPharmadepot	pharmadepot	pharmadepot.ge, ფარმადეპოს აპლიკაციაPharmadepot app

ატრიბუტი მხოლოდ <html>-ზე მუშაობს. ერთ გვერდზე ორი ბრენდის ერთად ჩვენება არ არის გათვალისწინებული.

The attribute only works on <html>. Mixing two brands on one page is not supported.

ღია და მუქი თემაLight and dark

ნაგულისხმევად თემა ოპერაციული სისტემის პარამეტრს მიჰყვება. იძულებით შეცვლა — data-theme-ით.

By default the theme follows the operating system. Force it with data-theme.

<html data-brand="pharmadepot" data-theme="dark">

გამოყენებაUsage

კომპონენტის კლასები მზა სტილს იძლევა. საკუთარი UI-სთვის სემანტიკური ტოკენები გამოიყენეთ.

Component classes give you ready-made styles. For your own UI, use the semantic tokens.

−20%

<button class="gds-btn">შენახვა</button>
<button class="gds-btn gds-btn--secondary">გაუქმება</button>
<span class="gds-badge gds-badge--accent">−20%</span>

/* Your own component */
.order-summary {
  background: var(--gds-surface);
  color: var(--gds-text);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-card);
}

ძირითადი წესებიGround rules

UI კოდში მხოლოდ სემანტიკური ტოკენები (--gds-primary, --gds-text…) — არასოდეს პალიტრა ან hex.
ბრენდის ფერი ტექსტად — მხოლოდ --gds-link. ფონზე ტექსტი — მხოლოდ შესაბამისი --gds-on-*.
რადიუსი და შრიფტი ბრენდს მიჰყვება: --gds-radius-button, --gds-font-heading.
ყოველი ახალი ეკრანი შეამოწმეთ სამივე ბრენდში, ღია და მუქ თემაში.

UI code uses semantic tokens only (--gds-primary, --gds-text…) — never the palette or a hex value.
Brand colour as text is always --gds-link. Text on a fill is always the matching --gds-on-*.
Radius and fonts follow the brand: --gds-radius-button, --gds-font-heading.
Check every new screen in all three brands, in light and dark.

ცვლილებების შეტანაContributing

ტოკენების ერთადერთი წყარო tokens.css-ია. ცვლილების შემდეგ გაუშვით შემოწმება — ის JSON-საც აგენერირებს:

tokens.css is the single source of truth. After a change, run the check — it also regenerates the JSON:

node scripts/check-tokens.mjs --write-json

სკრიპტი ვერ გაივლის, თუ რომელიმე ბრენდს ტოკენი აკლია, მუქი თემის ორი ასლი ერთმანეთს არ ემთხვევა, ან რომელიმე წყვილი WCAG AA-ს ვერ აკმაყოფილებს.

The script fails if a brand is missing a token, if the two copies of a dark theme drift apart, or if any pairing misses WCAG AA.