Brand
Flowery’s own identity covers the landing page, the control panel, emails, social accounts and print. It was adopted on 5 October 2026. Shop storefronts keep their own identities; where it fits, they can carry a small “Powered by Flowery”.
The source files are in brand/ in the repository: logos, icons, tokens and the full guide (brand/guide/flowery-brand-guide.html).
- The symbol is three solid petals and a stem in one colour. It replaces the earlier gradient tulip.
- The wordmark is title-case “Flowery”, in outlined Literata.
- Which version to use:
- Website headers and emails: the horizontal signature, 150–180 px wide.
- Dark backgrounds: the reverse version (blush symbol, ivory wordmark).
- Square spaces: the stacked version.
- Browser tabs and the home screen: the app icon or favicon.
- Space and size: keep clear space of a quarter of the symbol’s width. The minimum is 120 px wide for the horizontal signature and 24 px for the symbol alone; below that, use the favicon.
- Never: stretch, outline or rotate the logo, add shadows, or recolour single petals.
Colour
Section titled “Colour”| Name | Value | Job |
|---|---|---|
| Rose | #BE123C (hover #9F1239) |
Identity and the main action |
| Forest | #2F5D45 |
Trust and success |
| Ivory | #F8F4ED |
Page canvas |
| Sage | #E3EEE6 |
Soft support, success background |
| Ink | #1C1F1B |
Type and contrast |
| Blush | #FBE5EA |
Brand tint |
How much of each:
- About 75% neutral surfaces, 15% botanical tints and 10% strong accents.
- Flower photography supplies the rest of the colour.
Status colours:
- Success: forest on sage.
- Warning:
#8A5300on#F8EAD2. - Error:
#B42318on#FEE4E2. This is a separate red, never rose. - Information:
#245EA8on#E8F0FC. - Every status has a label and, in the app, an icon. Hue alone never carries meaning.
Dark mode tokens (blush actions with dark text) are in brand/tokens/. The contrast of every pair is checked in brand/tokens/contrast-checks.json; all pass WCAG AA for normal text.
Type and layout
Section titled “Type and layout”- Literata, for the story: headlines at weight 400–500. The hero is 52–64 px on desktop and 36–40 px on phones, with a line height of 1.12–1.2. Since 12 October 2026 the landing page sets its display type in Unbounded (600–800) instead, as part of its auction-hall look (landing page); Literata stays for the control panel and emails.
- Onest, for the work:
- Body text is 16 px with a line height of 1.6.
- Controls are 14–16 px at weight 500–600.
- Quantities, totals and margins use tabular numbers.
- Spacing: an 8 px rhythm.
- Corners: app controls 12 px, cards 16 px, status badges fully rounded. Marketing buttons follow the landing page.
- Targets: at least 44 px.
Specific and human, describing a useful result: “Квіти в резерві”, “Замовлення підтверджено”, “Залишилось 12 стебел”. Never vague claims such as “revolutionary all-in-one ecosystem”.
Where it is applied
Section titled “Where it is applied”| Place | What |
|---|---|
| Landing page | The horizontal signature (inlined), reverse in the footer, the brand palette, rose actions, warm frames around real product screens, and the brand’s hero sizes |
| Control panel | The symbol (AppLogoIcon) in the sidebar, on the sign-in and onboarding pages, on a solid rose tile. The whole app uses the brand palette (below) since 7 October 2026 |
| Browser and home screen | public/favicon.svg, favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png and site.webmanifest, shared by the landing page and the control panel. Shop storefronts that set no icon of their own also fall back to /favicon.ico. The pages link the icons with ?v=brand1: browsers keep favicons for a long time, so change that value whenever the icons change |
The control panel palette
Section titled “The control panel palette”Since 7 October 2026 the control panel uses the brand palette, the one the sign-in page introduced, in place of the neutral grey of the starter kit. The theme tokens in resources/css/app.css (:root and .dark) carry the brand values. Components use the tokens (bg-background, text-muted-foreground, bg-primary…), never fixed greys.
| Token | Light | Dark |
|---|---|---|
Page (background, card, popover) |
surface #FFFDF9 |
#171C19; cards and menus #222A25 |
| Sidebar | ivory #F8F4ED |
#222A25 |
Text (foreground) |
ink #1C1F1B |
#F8F4ED |
Secondary text (muted-foreground) |
#61655D |
#BEC8C0 |
Quiet fills and hover (muted, secondary, accent) |
paper #EFE8DC |
#2C352E |
Lines (border) |
#DDD4C4 |
#465349 |
Form-control borders (input) |
#8E9288 |
#87978B |
Primary actions and focus (primary, ring) |
rose #BE123C, white text |
#FDA4AF, #39131E text |
Sign-in, sign-up and onboarding (.brand-surface) sit one step warmer, on ivory #F8F4ED, like the landing page.
Contrast (WCAG 2.2), checked when the palette was applied:
| Pair | Light | Dark |
|---|---|---|
| Text on the page | 16.4:1 | 15.7:1 |
| Secondary text on the page | 5.9:1 | 10.0:1 |
| Secondary text on a quiet fill | 4.9:1 | 7.4:1 |
| Secondary text on the sidebar or a card | 5.4:1 | 8.6:1 |
| Button text on the primary colour | 6.3:1 | 8.6:1 |
| Focus ring on the page | 6.2:1 | 9.1:1 |
| Form-control border on its background | 3.1:1 | 4.8:1 |
Text pairs meet 4.5:1, and control borders and the focus ring meet 3:1. The chart colours and the destructive red are unchanged. Destructive actions keep their red and an icon or a confirmation, so they never rely on colour alone next to the rose of a primary action.