Skip to content

Instantly share code, notes, and snippets.

@romain-grecourt
Last active May 17, 2021 18:18
Show Gist options
  • Save romain-grecourt/dd8af18fb13b541476f74511cc47d076 to your computer and use it in GitHub Desktop.
Save romain-grecourt/dd8af18fb13b541476f74511cc47d076 to your computer and use it in GitHub Desktop.
Helidon Site Guide Notes

Style guide inconsistencies

Overall observations

The guide has been made after the sketchs and only document them. It does not provide any actual guide-lines for building other pages.

The style guide is not adaptable to our framework (vuetify) as-is, thus we need to tune both the framework and the guide.

Hard CSS tuning might result in broken components. The less hacks we do the better.

Links

Iconsistencies (light theme guide)

  • Logo: background only, actual Helidon logo does not have any color
  • Colors:
    • The caption does not match the actual colors
    • There are 10 documented named colors in figma, the guide only shows 5
    • There are other un-named colors used in the sketches
    • The sub title of the colors section shows "Primary and Secondary", which one is which ?
      • The framework theme configuration uses "Primary, Secondary, Accent, Info, Error, Warning, Success"
  • Shades:
    • Some shades are un-named colors
    • How the shades for all other colors?
    • What is the pattern
    • What is the context on how to use them?
      • E.g. the actual logo uses two shades
  • Typography:
    • The font Wotfard is non free
    • It does not exist as is, instead there is regular, bold etc.
    • Css values do not match (e.g. weight)
    • The style guide itself does not follow the typography rules, this is confusing
    • 3 different style of paragraph, when should they be used ?
    • 'TAG' is not an HTML DOM element
  • Buttons:
    • Vuetify buttons only take text and background color configuration
    • Some buttons don't have outline or background colors
    • Switches are not shown in the context of the sketches
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment